8. 添加详细视图

在本节中，您将编写第二个GraphQL 查询请求有关单个发射。

创建详细查询

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

如 $cursor 所示，添加一个名为 id 的变量。注意，这次这个变量是一个非可选类型。您无法像对 $cursor 那样传递 null。

由于是详细视图，请请求 missionPatch 的 LARGE 大小。也要请求火箭的类型和名称：

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解析错误将抛出 ApolloException。
应用程序错误。在这种情况下， response.errors 将包含应用程序错误，而 response.data 可能是 null。

自 Apollo Kotlin 抛出 ApolloException 异常时，您需要在调用周围添加 try/catch 块。

首先创建一个 LaunchDetailsState 封闭接口，它将包含 UI 的可能状态：

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

1
private sealed interface LaunchDetailsState {
2
    object Loading : LaunchDetailsState
3
    data class ProtocolError(val exception: ApolloException) : LaunchDetailsState
4
    data class Success(val data: LaunchDetailsQuery.Data) : LaunchDetailsState
5
}

然后，在 LaunchDetails 中，将调用 execute 放在 try/catch 块中，并将结果包装到 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
        state = try {
6
            Success(apolloClient.query(LaunchDetailsQuery(launchId)).execute().data!!)
7
        } catch (e: ApolloException) {
8
            ProtocolError(e)
9
        }
10
    }
11
    // 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 ProtocolError -> ErrorMessage("Oh no... A protocol error happened: ${s.exception.message}")
5
        is Success -> LaunchDetails(s.data)
6
    }
7
}

在点击发射的详细信息之前，启用飞行模式。您应该看到以下内容：

这是好的！但这还不够。即使在协议级别上请求执行正确，它也可能包含特定于您服务器的应用错误。

处理应用错误

要处理应用错误，您可以检查 response.hasErrors()。首先，向封闭接口添加一个新状态：

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

1
private sealed interface LaunchDetailsState {
2
    object Loading : LaunchDetailsState
3
    data class ProtocolError(val exception: ApolloException) : LaunchDetailsState
4
    data class ApplicationError(val errors: List<Error>) : LaunchDetailsState 
5
    data class Success(val data: LaunchDetailsQuery.Data) : LaunchDetailsState
6
}

然后，在 try 块中，检查 response.hasErrors() 并将结果包装到新状态中：

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

1
state = try {
2
        val response = apolloClient.query(LaunchDetailsQuery(launchId)).execute()
3
        if (response.hasErrors()) { 
4
            ApplicationError(response.errors!!) 
5
        } else { 
6
            Success(response.data!!) 
7
        } 
8
    } catch (e: ApolloException) {
9
        ProtocolError(e)
10
    }

您还应该更新条件表达式来处理 ApplicationError 情况：

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

1
when (val s = state) {
2
        Loading -> Loading()
3
        is ApplicationError -> ErrorMessage(text = s.errors.first().message) 
4
        is ProtocolError -> ErrorMessage("Oh no... A protocol error happened: ${s.exception.message}")
5
        is Success -> LaunchDetails(s.data)
6
    }

response.errors 包含任何发生的错误详情。注意，此代码也对 response.data!! 进行了空值检查。在理论上，服务器不应同时设置 response.data == null 和 response.hasErrors == false，但是类型系统无法保证这一点。

要触发错误，将 LaunchDetailsQuery(launchId) 替换为 LaunchDetailsQuery("invalidId")。禁用飞行模式并选择一个发射物。服务器将发送以下响应：

(错误)

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中声明

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. 编写您的第一个突变