10. 认证您的操作

在本节中，您将预订一次航班 🚀！预订航班需要向服务器进行认证，以便正确的人被送往太空！为此，因为Apollo Kotlin正在使用OkHttp 用于处理HTTP请求，你将使用一个OkHttp 拦截器向你的 GraphQL 请求中添加头部。

添加拦截器

在Apollo.kt 中，添加 AuthorizationInterceptor 类：

app/src/main/kotlin/com/example/rocketreserver/Apollo.kt

1
private class AuthorizationInterceptor() : Interceptor {
2
  override fun intercept(chain: Interceptor.Chain): Response {
3
    val request = chain.request().newBuilder()
4
        .apply {
5
          TokenRepository.getToken()?.let { token ->
6
            addHeader("Authorization", token)
7
          }
8
        }
9
        .build()
10
    return chain.proceed(request)
11
  }
12
}

此拦截器会向请求中添加一个 "Authorization: $token" HTTP头部，如果token非空。

使用拦截器

创建一个自定义 OkHttpClient，它将使用此拦截器并将其传递给 ApolloClient：

app/src/main/kotlin/com/example/rocketreserver/Apollo.kt

1
val apolloClient = ApolloClient.Builder()
2
    .serverUrl("https://apollo-fullstack-tutorial.herokuapp.com/graphql")
3
    .okHttpClient( 
4
        OkHttpClient.Builder() 
5
            .addInterceptor(AuthorizationInterceptor()) 
6
            .build() 
7
    ) 
8
    .build()

添加“预订行程”和“取消行程”的变化

在 schema.graphqls 旁边添加一个 BookTrip.graphql 文件：

app/src/main/graphql/BookTrip.graphql

1
mutation BookTrip($id:ID!) {
2
  bookTrips(launchIds: [$id]) {
3
    success
4
    message
5
  }
6
}

注意，bookTrips字段参数接受一个列表变量，但此突变本身只接受一个变量。

还要添加CancelTrip.graphql文件。此突变不使用列表：

app/src/main/graphql/CancelTrip.graphql

1
mutation CancelTrip($id:ID!) {
2
  cancelTrip(launchId: $id) {
3
    success
4
    message
5
  }
6
}

将突变连接到您的UI

返回LaunchDetails.kt，并将TODO替换为onBookButtonClick执行适当的突变，根据发射启动是否预定：

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

1
private suspend fun onBookButtonClick(launchId: String, isBooked: Boolean, navigateToLogin: () -> Unit): Boolean {
2
    if (TokenRepository.getToken() == null) {
3
        navigateToLogin()
4
        return false
5
    }
6
    val mutation = if (isBooked) {
7
        CancelTripMutation(id = launchId)
8
    } else {
9
        BookTripMutation(id = launchId)
10
    }
11
    val response = apolloClient.mutation(mutation).execute()
12
    return when {
13
        response.exception != null -> {
14
            Log.w("LaunchDetails", "Failed to book/cancel trip", response.exception)
15
            false
16
        }
17
    
18
        response.hasErrors() -> {
19
            Log.w("LaunchDetails", "Failed to book/cancel trip: ${response.errors?.get(0)?.message}")
20
            false
21
        }
22
    
23
        else -> true
24
    }
25
}

现在回到LaunchDetails函数，声明一个协程作用域，以便调用onBookButtonClick。同时，让我们记住isBooked并相应地更改按钮的文本：

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

1
// Book button
2
val scope = rememberCoroutineScope() 
3
var isBooked by remember { mutableStateOf(data.launch?.isBooked == true) } 
4
Button(
5
    modifier = Modifier
6
        .padding(top = 32.dp)
7
        .fillMaxWidth(),
8
    onClick = {
9
        scope.launch {
10
            val ok = onBookButtonClick( 
11
                launchId = data.launch?.id ?: "", 
12
                isBooked = isBooked, 
13
                navigateToLogin = navigateToLogin 
14
            ) 
15
            if (ok) { 
16
                isBooked = !isBooked 
17
            } 
18
        }
19
    }
20
) {
21
    Text(text = if (!isBooked) "Book now" else "Cancel booking") 
22
}

我们还添加了一个加载指示器，并且在突变运行时防止按钮被点击：

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

1
// Book button
2
var loading by remember { mutableStateOf(false) } 
3
val scope = rememberCoroutineScope()
4
var isBooked by remember { mutableStateOf(data.launch?.isBooked == true) }
5
Button(
6
    modifier = Modifier
7
        .padding(top = 32.dp)
8
        .fillMaxWidth(),
9
    enabled = !loading, 
10
    onClick = {
11
        loading = true 
12
        scope.launch {
13
            val ok = onBookButtonClick(
14
                launchId = data.launch?.id ?: "",
15
                isBooked = isBooked,
16
                navigateToLogin = navigateToLogin
17
            )
18
            if (ok) {
19
                isBooked = !isBooked
20
            }
21
            loading = false 
22
        }
23
    }
24
) {
25
    if (loading) { 
26
        SmallLoading() 
27
    } else { 
28
        Text(text = if (!isBooked) "Book now" else "Cancel booking")
29
    } 
30
}

预订您的旅行！

编译并运行您的应用程序。您现在可以预订和取消旅行！按钮将根据旅行是否已预订而更改。

在下一节中，您将编写您的第一个订阅并在有人预订航班时实时收到通知。

9. 编写您的第一个突变

11. 编写您的第一个订阅