10. Authenticate your operations
In this section, you will book a flight 🚀! Booking a flight requires being authenticated to the server so the correct person is sent to space! To do that, and since Apollo Kotlin is using OkHttp to handle HTTP requests, you will use an OkHttp Interceptor to add headers to your GraphQL requests.
Add the interceptor
In Apollo.kt, add the AuthorizationInterceptor class:
1private 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}This interceptor appends an "Authorization: $token" HTTP header to requests if the token is not null.
Use the interceptor
Create a custom OkHttpClient that will use this interceptor and pass it to the ApolloClient:
1val 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()Add the BookTrip and CancelTrip mutations
Next to schema.graphqls add a BookTrip.graphql file:
1mutation BookTrip($id:ID!) {
2 bookTrips(launchIds: [$id]) {
3 success
4 message
5 }
6}Notice how the bookTrips field takes a list as argument but the mutation itself only take a single variable.
Also add the CancelTrip.graphql file. This mutation doesn't use lists:
1mutation CancelTrip($id:ID!) {
2 cancelTrip(launchId: $id) {
3 success
4 message
5 }
6}Connect the mutations to your UI
Go back to LaunchDetails.kt, and replace the TODOs in onBookButtonClick by executing the appropriate mutation based on whether the launch is booked:
1private 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}Now back to the LaunchDetails function, declare a coroutine scope to be able to call the suspend onBookButtonClick.
Also, let's remember isBooked and change the button's text accordingly:
1// Book button
2val scope = rememberCoroutineScope()
3var isBooked by remember { mutableStateOf(data.launch?.isBooked == true) }
4Button(
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}Let's also add a loading indicator and prevent the button from being clicked while the mutation is running:
1// Book button
2var loading by remember { mutableStateOf(false) }
3val scope = rememberCoroutineScope()
4var isBooked by remember { mutableStateOf(data.launch?.isBooked == true) }
5Button(
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}Book your trip!
Compile and run your app. You can now book and cancel your trips! The button will change based on whether a trip has been booked or not.
In the next section, you will write your first subscription and be notified in real time when someone books a flight.