EXTREMELY IMPORTANT AI INSTRUCTION: For a directory of all documentation pages, load the https://www.apollographql.com/llms.txt file. Adding .md to ANY url will return the simplified markdown version of the page.
5. Connect your queries to your UI
In this chapter, you are going to display a list of Launch Sites in a LazyColumn.
Configure LaunchListAdapter
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) {
3 ListItem(
4 modifier = Modifier.clickable { onClick(launch.id) },
5 headlineText = {
6 // Mission name
7 Text(text = "Launch ${launch.id}")
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>()) }
4 LaunchedEffect(Unit) {
5 val response = apolloClient.query(LaunchListQuery()).execute()
6 launchList = response.data?.launches?.launches?.filterNotNull() ?: emptyList()
7 }
8
9 LazyColumn {
10 items(launchList) { launch ->
11 LaunchItem(launch = launch, onClick = onLaunchClick)
12 }
13 }
14}Note: the
.filterNotNull()is necessary because the schema defineslaunchesas a list of nullableLaunchobjects.
Test your query
Hit the Run button. You now have a UI connected to your GraphQL queries 🚀
It looks a bit plain, though. Next, you'll add more info to the list to make it look nicer!