6. 向列表中添加更多信息

在本节中，您将使用Coil图片加载库来展示关于启动的美好信息。您还将了解关于 GraphQL 参数。

请为您的查询添加更多信息

返回到 LaunchList.graphql。您的查询已获取您想要显示的大部分信息，但是显示任务名称和徽标图片会更好。

查看Sandbox中的模式，您可以看到Launch 有一个 mission 属性，允许您获取任务细节。一个任务既有名字和一个 missionPatch 属性，而且 missionPatch 可以可选地接受一个参数来指定期望的图像大小。

由于加载带有大图像的LazyList可能会影响性能，请请求一个 SMALL 任务徽标。更新您的 query 以类似于以下：

app/src/main/graphql/LaunchList.graphql

1
query LaunchList {
2
  launches {
3
    launches {
4
      id
5
      site
6
      mission {
7
        name
8
        missionPatch(size: SMALL)
9
      }
10
    }
11
  }
12
}

当您重新编译时，如果在 LaunchListQuery.kt 中查看，您将看到一个新的嵌套类型 Mission，它包含了您请求的两个属性。

任何 GraphQL 字段都可以接受像上面的 arguments 这样的参数，并且参数可以是 scalar 或复杂类型。在这种情况下，SMALL 是GraphQL模式中的一个枚举。它可以接受有限的值列表。如果您查看Sandbox中的模式部分，您可以看到枚举的列表。然后您可以点击进去看到 PatchSize 只能接受两个值：SMALL 和 LARGE

The patch size enum in Sandbox's Schema tab

显示字段

在LaunchList.kt中，使用Coil的AsyncImage将GraphQL数据绑定到任务名称、站点和任务徽标：

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

1
@Composable
2
private fun LaunchItem(launch: LaunchListQuery.Launch, onClick: (launchId: String) -> Unit) {
3
  ListItem(
4
      modifier = Modifier.clickable { onClick(launch.id) },
5
      headlineText = {
6
        // Mission name
7
        Text(text = launch.mission?.name ?: "") 
8
      },
9
      supportingText = {
10
        // Site
11
        Text(text = launch.site ?: "") 
12
      },
13
      leadingContent = {
14
        // Mission patch
15
        AsyncImage( 
16
            modifier = Modifier.size(68.dp, 68.dp),
17
            model = launch.mission?.missionPatch,
18
            placeholder = painterResource(R.drawable.ic_placeholder),
19
            error = painterResource(R.drawable.ic_placeholder),
20
            contentDescription = "Mission patch"
21
        )
22
      }
23
  )
24
}

测试你的查询

构建并运行应用程序，您将看到当前发射的信息。

如果您向下滚动，您会看到列表中只包含大约20次发射。这是因为发射列表是分页的，您只获取了第一页。

接下来，您将使用基于游标的加载数据系统加载整个发射列表。

5. 将查询连接到您的UI

7. 分页结果