8. Add a details view


In this section, you'll write a second GraphQL query that requests details about a single launch.

Open the details fragment from the list

In LaunchListAdapter.kt, add a click listener:

Kotlin
app/src/main/java/com/example/rocketreserver/LaunchListAdapter.kt
1    var onEndOfListReached: (() -> Unit)? = null
2    var onItemClicked: ((LaunchListQuery.Launch) -> Unit)? = null
3
4    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
5
6        // ...
7
8        holder.binding.root.setOnClickListener {
9            onItemClicked?.invoke(launch)
10        }
11    }

In LaunchListFragment.kt, register a click listener and navigate to the details screen:

Kotlin
app/src/main/java/com/example/rocketreserver/LaunchListFragment.kt
1    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
2
3        // ...
4
5        adapter.onItemClicked = { launch ->
6            findNavController().navigate(
7                LaunchListFragmentDirections.openLaunchDetails(launchId = launch.id)
8            )
9        }
10    }

Create the details query

Create a new GraphQL query named LaunchDetails.graphql.

As you did for $cursor, add a variable named id. Notice that this variable is a non-optional type this time. You won't be able to pass null like you can for $cursor.

Because it's a details view, request the LARGE size for the missionPatch. Also request the rocket type and name:

GraphQL
app/src/main/graphql/com/example/rocketreserver/LaunchDetails.graphql
1query LaunchDetails($id:ID!) {
2  launch(id: $id) {
3    id
4    site
5    mission {
6      name
7      missionPatch(size:LARGE)
8    }
9    rocket {
10      name
11      type
12    }
13    isBooked
14  }
15}

Remember you can always experiment in GraphQL Playground and type Ctrl + Space to show a list of fields that are available.

Show a loading ProgressBar

In LaunchDetailsFragment.kt, override onViewCreated and launch a new coroutine

This time, display a progressBar while the query executes:

Kotlin
app/src/main/java/com/example/rocketreserver/LaunchDetailsFragment.kt
1    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
2        super.onViewCreated(view, savedInstanceState)
3
4        lifecycleScope.launchWhenResumed {
5            binding.bookButton.visibility = View.GONE
6            binding.bookProgressBar.visibility = View.GONE
7            binding.progressBar.visibility = View.VISIBLE
8            binding.error.visibility = View.GONE
9
10            val response = apolloClient.query(LaunchDetailsQuery(id = args.launchId)).await()

Handle protocol errors

As you execute your query, two types of errors can happen:

  • Protocol errors. HTTP errors or JSON parsing errors will throw a ApolloException.

  • Application errors. In this case, response.errors will contain the application errors and response.data might be null.

For protocol errors, Apollo Android will throw an ApolloException, so you'll need to wrap the call in a try/catch block:

Text
1            val response = try {
2                apolloClient.query(LaunchDetailsQuery(id = args.launchId)).await()
3            } catch (e: ApolloException) {
4                binding.progressBar.visibility = View.GONE
5                binding.error.text = "Oh no... A protocol error happened"
6                binding.error.visibility = View.VISIBLE
7                return@launchWhenResumed
8            }

Enable airplane mode before clicking the details of a launch. You should see this:

Oh no

This is good! But it's not enough. Even if the request executes correctly at the protocol level, it might also contain application errors that are specific to your server.

Handle application errors

To handle application errors, you can check response.hasErrors:

Kotlin
app/src/main/java/com/example/rocketreserver/LaunchDetailsFragment.kt
1            val launch = response.data?.launch
2            if (launch == null || response.hasErrors()) {
3                binding.progressBar.visibility = View.GONE
4                binding.error.text = response.errors?.get(0)?.message
5                binding.error.visibility = View.VISIBLE
6                return@launchWhenResumed
7            }

response.errors contains details about any errors that occurred. Note that this code also checks for response.data == null. In theory, a server should not set response.data == null and response.hasErrors == false at the same time, but the type system cannot guarantee this.

To trigger an error, replace LaunchDetailsQuery(id = args.launchId) with LaunchDetailsQuery(id = "invalidId"). Disable airplane mode and select a launch. The server will send this response:

JSON
1{
2  "errors": [
3    {
4      "message": "Cannot read property 'flight_number' of undefined",
5      "locations": [
6        {
7          "line": 1,
8          "column": 32
9        }
10      ],
11      "path": [
12        "launch"
13      ],
14      "extensions": {
15        "code": "INTERNAL_SERVER_ERROR"
16      }
17    }
18  ],
19  "data": {
20    "launch": null
21  }
22}
Oh no

This is all good! You can use the error field to add more advanced error management.

Restore the correct launch ID: LaunchDetailsQuery(id = args.launchId) before displaying details.

Display details

If no errors occurred, hide the progressBar and display the detailed information:

Kotlin
app/src/main/java/com/example/rocketreserver/LaunchDetailsFragment.kt
1            binding.progressBar.visibility = View.GONE
2
3            binding.missionPatch.load(launch.mission?.missionPatch) {
4                placeholder(R.drawable.ic_placeholder)
5            }
6            binding.site.text = launch.site
7            binding.missionName.text = launch.mission?.name
8            val rocket = launch.rocket
9            binding.rocketName.text = "🚀 ${rocket?.name} ${rocket?.type}"
10        }
11    }

Handle the Book now button

Add a configureButton method that redirects to the login page:

Kotlin
app/src/main/java/com/example/rocketreserver/LaunchDetailsFragment.kt
1    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
2        super.onViewCreated(view, savedInstanceState)
3
4        lifecycleScope.launchWhenResumed {
5
6          // ...
7
8          configureButton(launch.isBooked)
9        }
10    }
11
12    private fun configureButton(isBooked: Boolean) {
13        binding.bookButton.visibility = View.VISIBLE
14        binding.bookProgressBar.visibility = View.GONE
15
16        binding.bookButton.text = if (isBooked) {
17            getString(R.string.cancel)
18        } else {
19            getString(R.string.book_now)
20        }
21
22        binding.bookButton.setOnClickListener {
23            if (User.getToken(requireContext()) == null) {
24                findNavController().navigate(
25                    R.id.open_login
26                )
27                return@setOnClickListener
28            }
29        }
30    }

Test your query

Hit Run. Your screen should look like this:

Details

Right now, you aren't logged in, so isBooked will always be false and you won't be able to book a trip.

Next, you will write your first mutation to log in to the backend.

Feedback

Edit on GitHub

Forums