8. 添加详细信息视图

在本节中，您将编写第二个GraphQL 查询，以请求关于单个发射的详细信息。

创建详细信息查询

创建一个名为的 GraphQL 查询LaunchDetails.graphql。

类似于对 $cursor 的操作，添加一个名为 id 的变量。注意，这次这个变量为非可选类型。您将无法像对 $cursor 那样传递 null。

因为这是一个详细信息视图，所以请请求大小为 LARGE 的 missionPatch。同时请求火箭类型和名称：

app/src/main/graphql/LaunchDetails.graphql

1
query LaunchDetails($id: ID!) {
2
  launch(id: $id) {
3
    id
4
    site
5
    mission {
6
      name
7
      missionPatch(size: LARGE)
8
    }
9
    rocket {
10
      name
11
      type
12
    }
13
    isBooked
14
  }
15
}

记得你始终可以在工作室资源管理器中实验，并查看左侧边栏以获取可用字段列表。字段。

执行查询并更新UI

在LaunchDetails.kt中，声明response和一个LaunchedEffect以执行查询：

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

1
@Composable
2
fun LaunchDetails(launchId: String) {
3
    var response by remember { mutableStateOf<ApolloResponse<LaunchDetailsQuery.Data>?>(null) }
4
    LaunchedEffect(Unit) {
5
        response = apolloClient.query(LaunchDetailsQuery(launchId)).execute()
6
    }

使用响应在UI中。这里我们也将使用Coil的AsyncImage来处理占位符：

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

1
Column(
2
        modifier = Modifier.padding(16.dp)
3
    ) {
4
        Row(verticalAlignment = Alignment.CenterVertically) {
5
            // Mission patch
6
            AsyncImage( 
7
                modifier = Modifier.size(160.dp, 160.dp),
8
                model = response?.data?.launch?.mission?.missionPatch,
9
                placeholder = painterResource(R.drawable.ic_placeholder),
10
                error = painterResource(R.drawable.ic_placeholder),
11
                contentDescription = "Mission patch"
12
            )
13

14
            Spacer(modifier = Modifier.size(16.dp))
15

16
            Column {
17
                // Mission name
18
                Text(
19
                    style = MaterialTheme.typography.headlineMedium,
20
                    text = response?.data?.launch?.mission?.name ?: "" 
21
                )
22

23
                // Rocket name
24
                Text(
25
                    modifier = Modifier.padding(top = 8.dp),
26
                    style = MaterialTheme.typography.headlineSmall,
27
                    text = response?.data?.launch?.rocket?.name?.let { "🚀 $it" } ?: "", 
28
                )
29

30
                // Site
31
                Text(
32
                    modifier = Modifier.padding(top = 8.dp),
33
                    style = MaterialTheme.typography.titleMedium,
34
                    text = response?.data?.launch?.site ?: "", 
35
                )
36
            }
37
        }

显示加载状态

由于response被初始化为null，你可以用这个作为结果尚未接收到的指示。

为了使代码结构更清晰，提取详情UI到一个单独的函数中，该函数以响应作为参数

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

1
@Composable
2
private fun LaunchDetails(response: ApolloResponse<LaunchDetailsQuery.Data>) {
3
    Column(
4
        modifier = Modifier.padding(16.dp)
5
    ) {

现在在原始的LaunchDetails函数中，检查response是否为null，如果是，则显示一个加载指示器，否则调用带有响应的新函数：

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

1
@Composable
2
fun LaunchDetails(launchId: String) {
3
    var response by remember { mutableStateOf<ApolloResponse<LaunchDetailsQuery.Data>?>(null) }
4
    LaunchedEffect(Unit) {
5
        response = apolloClient.query(LaunchDetailsQuery(launchId)).execute()
6
    }
7
    if (response == null) { 
8
        Loading() 
9
    } else { 
10
        LaunchDetails(response!!) 
11
    }
12
}

处理错误

在执行你的查询时，可能会发生不同类型的错误：

获取错误：连接问题、HTTP错误、JSON解析错误等。在这种情况下，response.exception包含一个ApolloException。既没有response.data也没有response.errors，都是null。
GraphQL 请求错误: 在这种情况下，response.errors 包含 GraphQL 错误。response.data 是 null。
GraphQL 字段错误: 在这种情况下，response.errors 包含 GraphQL 错误。response.data 包含部分数据。

现在我们先处理前两个：获取错误和 GraphQL 请求错误。

首先创建一个 LaunchDetailsState 封闭接口，以保留 UI 可能的状态：

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

1
private sealed interface LaunchDetailsState {
2
    object Loading : LaunchDetailsState
3
    data class Error(val message: String) : LaunchDetailsState
4
    data class Success(val data: LaunchDetailsQuery.Data) : LaunchDetailsState
5
}

然后在 LaunchDetails 中，检查 execute 返回的响应并将其映射到 State：

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

1
@Composable
2
fun LaunchDetails(launchId: String) {
3
    var state by remember { mutableStateOf<LaunchDetailsState>(Loading) }
4
    LaunchedEffect(Unit) {
5
        val response = apolloClient.query(LaunchDetailsQuery(launchId)).execute()
6
        state = when {
7
            response.data != null -> {
8
              // Handle (potentially partial) data
9
              LaunchDetailsState.Success(response.data!!)
10
            }
11
            else -> {
12
              LaunchDetailsState.Error("Oh no... An error happened.")
13
            }
14
        }
15
    }
16
    // Use the state

现在使用该状态显示适当的 UI

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

1
// Use the state
2
    when (val s = state) {
3
        Loading -> Loading()
4
        is Error -> ErrorMessage(s.message)
5
        is Success -> LaunchDetails(s.data)
6
    }
7
}

点击发射详情之前启用飞行模式。你应该看到这个：

这很好！

此方法处理获取和 GraphQL 请求错误，但忽略 GraphQL 字段错误。

如果出现 GraphQL 字段错误，相应的 Kotlin 属性是 null 并且在 response.errors 中存在错误：你的响应包含部分数据！

在 UI 代码中处理这种部分数据可能会很复杂。您可以通过查看 response.errors 早期处理它们。

处理部分数据

要全局处理 GraphQL 字段错误并确保返回的数据不是部分数据，请使用 response.errors:

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

1
state = when {
2
  response.errors.orEmpty().isNotEmpty() -> {
3
    // GraphQL error
4
    LaunchDetailsState.Error(response.errors!!.first().message) 
5
  }
6
  response.exception is ApolloNetworkException -> {
7
    // Network error
8
    LaunchDetailsState.Error("Please check your network connectivity.")
9
  }
10
  response.data != null -> {
11
    // data (never partial)
12
    LaunchDetailsState.Success(response.data!!)
13
  }
14
  else -> {
15
    // Another fetch error, maybe a cache miss?
16
    // Or potentially a non-compliant server returning data: null without an error
17
    LaunchDetailsState.Error("Oh no... An error happened.")
18
  }
19
}

response.errors 包含发生的任何错误的详细信息。请注意，此代码还检查了 response.data!!。理论上，服务器不应该同时将 response.data == null 和 response.hasErrors == false 设置为 true，但类型系统无法保证这一点。

要触发 GraphQL 字段错误，将 LaunchDetailsQuery(launchId) 替换为 LaunchDetailsQuery("invalidId")。禁用飞行模式并选择一个 launch。服务器将发送此响应：

(错误)

1
{
2
  "errors": [
3
    {
4
      "message": "Cannot read property 'flight_number' of undefined",
5
      "locations": [
6
        {
7
          "line": 1,
8
          "column": 32
9
        }
10
      ],
11
      "path": [
12
        "launch"
13
      ],
14
      "extensions": {
15
        "code": "INTERNAL_SERVER_ERROR"
16
      }
17
    }
18
  ],
19
  "data": {
20
    "launch": null
21
  }
22
}

一切正常！您可以使用errors 字段添加更高级的错误管理。

在显示详细信息之前，请恢复正确的启动 ID：LaunchDetailsQuery(launchId)。

处理立即预订按钮

要预订行程，用户必须登录。如果用户未登录，则点击 立即预订按钮应打开登录界面。

首先，让我们将一个lambda传递到LaunchDetails以处理导航：

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

1
@Composable
2
fun LaunchDetails(launchId: String, navigateToLogin: () -> Unit) {

lambda应在MainActivity中声明，在该Activity中处理导航

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

1
composable(route = "${NavigationDestinations.LAUNCH_DETAILS}/{${NavigationArguments.LAUNCH_ID}}") { navBackStackEntry ->
2
    LaunchDetails(
3
        launchId = navBackStackEntry.arguments!!.getString(NavigationArguments.LAUNCH_ID)!!,
4
        navigateToLogin = { 
5
          navController.navigate(NavigationDestinations.LOGIN) 
6
        } 
7
    )
8
}

接下来，返回到LaunchDetails.kt并替换TODO为对处理按钮点击的函数的调用：

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

1
onClick = {
2
    onBookButtonClick(
3
        launchId = data.launch?.id ?: "",
4
        isBooked = data.launch?.isBooked == true,
5
        navigateToLogin = navigateToLogin
6
    )
7
}

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

1
private fun onBookButtonClick(launchId: String, isBooked: Boolean, navigateToLogin: () -> Unit): Boolean {
2
    if (TokenRepository.getToken() == null) {
3
        navigateToLogin()
4
        return false
5
    }
6

7
    if (isBooked) {
8
        // TODO Cancel booking
9
    } else {
10
        // TODO Book
11
    }
12
    return false
13
}

TokenRepository是一个辅助类，它处理在EncryptedSharedPreference中保存和检索用户令牌。我们将在登录时使用它来存储用户令牌。

返回一个布尔值将有助于以后根据执行是否发生来更新UI。

测试按钮

点击运行。您的屏幕应如下所示：

目前您尚未登录，因此您无法预订行程，点击将始终导航到登录界面。

接下来，您将编写您的第一个突变以登录后端。

7. 分页结果

9. 编写您的第一个突变

8. 添加详细信息视图

执行查询并更新UI

显示加载状态

处理错误

处理部分数据

处理 立即预订 按钮

测试按钮

处理立即预订按钮