7. 分页结果

如您已注意到，由LaunchListQuery 返回的对象是一个 LaunchConnection。这个对象有一个 launches 列表，一个分页 cursor，以及一个布尔值来表示是否还有更多发射存在。

当使用基于 cursor 的分页系统时，重要的是要记住，cursor 给您一个地方，在某个位置之后可以选择所有结果，无论在此期间是否添加了更多项目。

在前一节中，您直接在 SMALL 大小 argument 中直接在 GraphQL 查询中硬编码，但您还可以使用 variables 程序化定义参数。您将在这里使用它们来实现分页。

添加一个 `cursor` 变量，以及 `cursor` 和 `hasMore` 字段

在 LaunchList.graphql 中添加一个 cursor variable。在 GraphQL 中，变量以前面符号 $ 预置。

同时将 cursor 和 hasMore 字段添加到查询中，因为我们将在分页时使用它们：

app/src/main/graphql/LaunchList.graphql

1
query LaunchList($cursor: String) { 
2
  launches(after: $cursor) { 
3
    cursor 
4
    launches {
5
      id
6
      site
7
      mission {
8
        name
9
        missionPatch(size: SMALL)
10
      }
11
    }
12
    hasMore 
13
  }
14
}

您可以在沙盒探索器中使用名为操作的下方面板来实验 GraphQL 变量。如果您省略 $cursor 变量，则服务器从开始返回数据：

在到达列表末尾时获取下一页

声明并记住一个 cursor 变量，初始化为 null，并使 LauchedEffect。这样，每当查询的 cursor 改变时，查询都将被重新执行。

同时保留 response 的引用，这样我们就可以进一步访问 hasMore 和 cursor 字段。

app/src/main/java/com/example/rocketreserver/LaunchList.kt

1
@Composable
2
fun LaunchList(onLaunchClick: (launchId: String) -> Unit) {
3
    var cursor: String? by remember { mutableStateOf(null) } 
4
    var response: ApolloResponse<LaunchListQuery.Data>? by remember { mutableStateOf(null) } 
5
    var launchList by remember { mutableStateOf(emptyList<LaunchListQuery.Launch>()) }
6
    LaunchedEffect(cursor) {

将光标传递给 LaunchListQuery，然后在列表末尾添加一个特殊项，如果 hasNext 为真，则更新 cursor。当用户滚动到列表末端时，这将会触发一个新的使用新 cursor 的查询，并将 launchList 与新结果串联起来。

注意： 这是在 Compose 中实现分页的基本实现。在实际项目中，你可能需要使用更高级的技术，比如 Jetpack Paging 库。

整个函数应该看起来是这样的

app/src/main/java/com/example/rocketreserver/LaunchList.kt

1
@Composable
2
fun LaunchList(onLaunchClick: (launchId: String) -> Unit) {
3
    var cursor: String? by remember { mutableStateOf(null) }
4
    var response: ApolloResponse<LaunchListQuery.Data>? by remember { mutableStateOf(null) }
5
    var launchList by remember { mutableStateOf(emptyList<LaunchListQuery.Launch>()) }
6
    LaunchedEffect(cursor) {
7
        response = apolloClient.query(LaunchListQuery(Optional.present(cursor))).execute() 
8
        launchList = launchList + response?.data?.launches?.launches?.filterNotNull().orEmpty() 
9
    }
10
    
11
    LazyColumn {
12
        items(launchList) { launch ->
13
            LaunchItem(launch = launch, onClick = onLaunchClick)
14
        }
15
        item { 
16
            if (response?.data?.launches?.hasMore == true) { 
17
                LoadingItem() 
18
                cursor = response?.data?.launches?.cursor 
19
            } 
20
        } 
21
    }
22
}

请注意我们使用了 Optional 来包裹 cursor，这是因为这个参数在查询中可以省略。

测试滚动

点击运行。现在你可以看到从夸贾林群岛的首次 FalconSat 到所有的 SpaceX 发射历史了！

接下来，你将添加一个详情视图，这将允许你在发射中预订座位。

6. 向列表添加更多信息

8. 添加详情视图