4. Execute your first query

To execute your first query, you need to create an instance of ApolloClient and make a new call with your query.

Create an ApolloClient

Create a new file named Apollo.kt in the com.example.rocketreserver package and create an instance of ApolloClient in it:

1import com.apollographql.apollo3.ApolloClient
2
3val apolloClient = ApolloClient.Builder()
4    .serverUrl("https://apollo-fullstack-tutorial.herokuapp.com/graphql")
5    .build()

Note: apolloClient is a top-level variable so that it can be reused from other parts of the app later on for better performance. Reusing the apolloClient allows to reuse the underlying OkHttp instance and the associated threadpools and connections. In a real app, you would probably want to use a dependency injection framework to share the ApolloClient.

Creating the ApolloClient is as simple as giving it the endpoint of your GraphQL backend. It is https://apollo-fullstack-tutorial.herokuapp.com/graphql in our case.

Execute the query

Open LaunchList.kt and update the contents of the LaunchList composable function. Use the apolloClient and the generated LaunchListQuery to execute a new query:

1@Composable
2fun LaunchList(onLaunchClick: (launchId: String) -> Unit) {
3  LaunchedEffect(Unit) {
4    val response = apolloClient.query(LaunchListQuery()).execute()
5    Log.d("LaunchList", "Success ${response.data}")
6  }

Thanks to Kotlin coroutines, the query will be executed in a background thread even if the code looks synchronous.

Note: for simplicity, we are executing the query in a LaunchedEffect block. In a real app, you may want to do this in a ViewModel and otherwise use a layered architecture.

Test your query

Hit run. You should see this in the logcat output:

12023-03-14 12:08:30.694 16611-16611/com.example.rocketreserver
2D/LaunchList: Success Data(launches=Launches(launches=[Launch(
3id=109, site=CCAFS SLC 40), Launch(id=108, site=VAFB SLC 4E), 
4Launch(id=107, site=KSC LC 39A), Launch(id=106, site=CCAFS SLC
540), Launch(id=105, site=CCAFS SLC 40), Launch(id=104, site=
6KSC LC 39A), Launch(id=103, site=KSC LC 39A), Launch(id=102, 
7site=KSC LC 39A), Launch(id=101, site=CCAFS SLC 40), Launch(
8id=100, site=CCAFS SLC 40), Launch(id=99, site=KSC LC 39A), 
9Launch(id=98, site=CCAFS SLC 40), Launch(id=97, site=CCAFS SLC 
1040), Launch(id=96, site=CCAFS SLC 40), Launch(id=95, site=
11CCAFS SLC 40), Launch(id=94, site=KSC LC 39A), Launch(id=93, 
12site=KSC LC 39A), Launch(id=92, site=KSC LC 39A), Launch(id=91
13, site=CCAFS SLC 40), Launch(id=90, site=CCAFS SLC 40)]))

This means the request was correctly executed and you now have a list of launch sites 🚀🚀🚀.

Next, let's connect this data to your UI.