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

在本节中，您将使用Coil 图像加载库来显示关于发射的美好信息。您还将了解 GraphQL 和参数。

向您的查询添加更多信息

返回到 LaunchList.graphql。您的查询已经获取了您想要显示的大部分信息，但显示任务的名称和补丁图像会更好。

查看Sandbox中的模式，您可以看到Launch 有一个 mission 属性，允许您获取任务的详细信息。任务具有 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 字段都可以接受参数，如下面的 missionPatch，参数可以是标量或复合类型。在这种情况下，SMALL是GraphQL模式中的一个枚举。它可以接受有限值的列表。

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. 分页结果