GraphQL Summit is back for three days of insights, hands-on learning, and fun to celebrate the GraphQL community. Join us in San Diego Oct 3-5.
Docs
Try Apollo Studio

5. Connect your queries to your UI


In this chapter, you are going to display a list of Launch Sites in a RecyclerView.

Configure LaunchListAdapter

Open LaunchListAdapter and add a launches property:

app/src/main/java/com/example/rocketreserver/LaunchListAdapter.kt
class LaunchListAdapter(
private val launches: List<LaunchListQuery.Launch>
) : RecyclerView.Adapter<LaunchListAdapter.ViewHolder>() {

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

Bind the data to the UI

Use the launches property to bind items to your adapter:

app/src/main/java/com/example/rocketreserver/LaunchListAdapter.kt
override fun getItemCount(): Int {
return launches.size
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val launch = launches.get(position)
holder.binding.site.text = launch.site ?: ""
}

Pass the LaunchListAdapter to the RecyclerView

In LaunchListFragment.kt, update what happens within your lifecycleScope in onViewCreated to create a new Adapter and pass it to your RecyclerView:

app/src/main/java/com/example/rocketreserver/LaunchListFragment.kt
lifecycleScope.launchWhenResumed {
val response = try {
apolloClient.query(LaunchListQuery()).execute()
} catch (e: ApolloException) {
Log.d("LaunchList", "Failure", e)
null
}
val launches = response?.data?.launches?.launches?.filterNotNull()
if (launches != null && !response.hasErrors()) {
val adapter = LaunchListAdapter(launches)
binding.launches.layoutManager = LinearLayoutManager(requireContext())
binding.launches.adapter = adapter
}
}

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!

Edit on GitHub
Previous
4. Execute your first query
Next
6. Add more info to the list