5. Connect your queries to your UI


In this chapter, you are going to display a list of Launches in a LazyColumn .

Setup the LaunchList composable

In LaunchList, declare a list of LaunchListQuery.Launch, initialized as empty:

Kotlin
app/src/main/java/com/example/rocketreserver/LaunchList.kt
1@Composable
2fun LaunchList(onLaunchClick: (launchId: String) -> Unit) {
3  var launchList by remember { mutableStateOf(emptyList<LaunchListQuery.Launch>()) }

LaunchListQuery.Launch is a typesafe generated model from your LaunchList.graphql query.

Make a UI for the items

Update the LaunchItem composable to pass it a LaunchListQuery.Launch and display the id:

Kotlin
app/src/main/java/com/example/rocketreserver/LaunchList.kt
1@Composable
2private fun LaunchItem(launch: LaunchListQuery.Launch, onClick: (launchId: String) -> Unit) { // highlight-line
3    ListItem(
4        modifier = Modifier.clickable { onClick(launch.id) }, // highlight-line
5        headlineText = {
6            // Mission name
7            Text(text = "Launch ${launch.id}") // highlight-line
8        },

Use the data in the list

Fill launchList with the data from the response, and use it in the LazyColumn:

Kotlin
app/src/main/java/com/example/rocketreserver/LaunchList.kt
1@Composable
2fun LaunchList(onLaunchClick: (launchId: String) -> Unit) {
3  var launchList by remember { mutableStateOf(emptyList<LaunchListQuery.Launch>()) } // highlight-line
4  LaunchedEffect(Unit) {
5    val response = apolloClient.query(LaunchListQuery()).execute()
6    launchList = response.data?.launches?.launches?.filterNotNull() ?: emptyList() // highlight-line
7  }
8
9  LazyColumn {
10    items(launchList) { launch -> // highlight-line
11      LaunchItem(launch = launch, onClick = onLaunchClick)
12    }
13  }
14}

Note: the .filterNotNull() is necessary because the schema defines launches as a list of nullable Launch objects.

Test your query

Hit the Run button. You now have a UI connected to your GraphQL queries 🚀

A basic list

It looks a bit plain, though. Next, you'll add more info to the list to make it look nicer!