Launch 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:

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:

    override fun getItemCount(): Int {
        return launches.size

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val launch = launches.get(position) = ?: ""

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:

        lifecycleScope.launchWhenResumed {
            val response = try {
            } catch (e: ApolloException) {
                Log.d("LaunchList", "Failure", e)

            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