Join us from October 8-10 in New York City to learn the latest tips, trends, and news about GraphQL federation and API platform engineering.Join us for GraphQL Summit 2024 in NYC
Docs
Start for Free

6. Add more info to the list


In this section, you will use the Coil image-loading library to display a nice patch about the . You will also learn about .

Add more info to your query

Go back to LaunchList.graphql. Your is already fetching most of the information you want to display, but it would be nice to display both the name of the mission and an image of the patch.

Looking at the schema in Sandbox, you can see that Launch has a mission property, which allows you to get details of the mission. A mission has both a name and a missionPatch property, and the missionPatch can optionally take a parameter to specify the desired image size.

Because loading a LazyList with large images can impact performance, ask for the name and a SMALL mission patch. Update your query to look like the following:

app/src/main/graphql/LaunchList.graphql
query LaunchList {
launches {
launches {
id
site
mission {
name
missionPatch(size: SMALL)
}
}
}
}

When you recompile, if you look in LaunchListQuery.kt, you'll see a new nested type, Mission, with the two properties you requested.

Any GraphQL can take arguments like missionPatch above, and arguments can be of or complex types. In this case, SMALL is an enum in the . It can take a finite list of values. If you look at the Schema section in Sandbox, you can see a list of the enums. You can then click in to see that PatchSize can only take two values: SMALL and LARGE

The patch size enum in Sandbox's Schema tab

Bind the info

In LaunchList.kt, bind the GraphQL data to the mission name, site, and mission patch using Coil's AsyncImage:

app/src/main/java/com/example/rocketreserver/LaunchList.kt
@Composable
private fun LaunchItem(launch: LaunchListQuery.Launch, onClick: (launchId: String) -> Unit) {
ListItem(
modifier = Modifier.clickable { onClick(launch.id) },
headlineText = {
// Mission name
Text(text = launch.mission?.name ?: "")
},
supportingText = {
// Site
Text(text = launch.site ?: "")
},
leadingContent = {
// Mission patch
AsyncImage(
modifier = Modifier.size(68.dp, 68.dp),
model = launch.mission?.missionPatch,
placeholder = painterResource(R.drawable.ic_placeholder),
error = painterResource(R.drawable.ic_placeholder),
contentDescription = "Mission patch"
)
}
)
}

Test your query

Build and run the application, and you will see all the information for current .

Final launch list

If you scroll down, you'll see the list includes only about 20 launches. This is because the list of launches is paginated, and you've only fetched the first page.

Next, you will use a cursor-based loading system to load the entire list of launches.

Previous
5. Connect your queries to your UI
Next
7. Paginate results
Rate articleRateEdit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc.

Privacy Policy

Company