Apollo GraphQL Integration in Jetpack Compose

In this tutorial, we'll walk through setting up and configuring Apollo GraphQL in a Jetpack Compose project. If you're looking for a complete implementation of GraphQL using Clean Architecture, check out my GitHub repository.

Configure Your Project

1. Update app/build.gradle.kts

Add the Apollo plugin ID:

plugins {
    // ...
    alias(libs.plugins.apollo3Graph)
}

Next, add apollo-runtime to your dependencies:

dependencies {
    // ...
    // Apollo3
    implementation(libs.apollo.runtime)
}

2. Update libs.versions.toml

Add the Apollo version and library references:

[versions]
// ...
apollo3 = "3.8.5" // Latest version at the time of writing

[libraries]
// ...
apollo-runtime = { group = "com.apollographql.apollo3", name = "apollo-runtime" }
apollo-api = { group = "com.apollographql.apollo3", name = "apollo-api" }

[plugins]
// ...
apollo3Graph = { id = "com.apollographql.apollo3", version.ref = "apollo3" }

Define Package for Generated Files

Specify the package where the Kotlin files will be generated. Add this to the android section of app/build.gradle.kts:

android {
    // ...
    apollo {
        service("service") {
            packageName.set("com.example.appname")
        }
    }
    // ...
}

Add the GraphQL Schema

Get your server's URL from Apollo Studio, located in the box at the top left of the page:

Run the following command in Android Studio's Terminal tab to download your server's schema:

./gradlew :app:downloadApolloSchema --endpoint='http://localhost:4000/graphql' --schema=app/src/main/graphql/schema.graphqls

This will download a schema.graphqls file to app/src/main/graphql/schema.graphqls.

Sync the Project

After downloading the schema, sync the project.

Update AndroidManifest.xml

Add Internet Permission

First, add the internet permission to your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>

Configure Network Security for Emulator

If you are using the Android emulator to connect to a server running on localhost:4000/graphql, configure network security to avoid "Network Request Failed" errors and enable communication with your GraphQL server.

1. Create network_security_config.xml

Create a file named network_security_config.xml in ../app/src/main/res/xml/:

   <?xml version="1.0" encoding="utf-8"?>
   <network-security-config>
       <domain-config cleartextTrafficPermitted="true">
           <domain includeSubdomains="true">10.0.2.2</domain>
       </domain-config>
   </network-security-config>

This configuration allows cleartext traffic to 10.0.2.2, which maps to localhost on your host machine.

1. Reference the Network Security Configuration

Update your AndroidManifest.xml to reference this network security configuration:

   <application
       android:networkSecurityConfig="@xml/network_security_config"
       // ...
   >
       // ...
   </application>

Add the First Query

After verifying your query in Apollo Studio's Sandbox Explorer, copy the query and create a new GraphQL file in src/main/graphql/.

Here's an example of a query that fetches a list of posts:

# src/main/graphql/Posts.graphql
query Posts($limit: Int!, $cursor: String) {
    posts(limit: $limit, cursor: $cursor) {
        hasMore
        posts {
            id
            createdAt
            updatedAt
            title
            text
        }
    }
}

Generate the Model

Build your project to generate the model code. Check the generated file at app/build/generated/source/apollo/service/com/example/appname/PostsQuery.kt.

Note: You have to rebuild your project each time you add a new query, mutation, or fragment.

Execute the First Query

Create an instance of ApolloClient and make a new call with your query.

Create an ApolloClient

Create a new file named Apollo.kt and create an instance of ApolloClient in it with your server URL:

val apolloClient = ApolloClient.Builder()
    .serverUrl("http://10.0.2.2:4000/graphql")
    .build()

Execute the Query

Use the apolloClient and the generated PostsQuery to execute a new query:

val response = apolloClient.query(PostsQuery(limit = limit, cursor = Optional.present(cursor))).execute()
val posts = response.data?.posts?.posts?.filterNotNull() ?: emptyList()

Congratulations! You have successfully integrated Apollo GraphQL in your Android project. For a complete implementation of GraphQL using Clean Architecture pattern, check out my GitHub repository. Happy coding 😊!

References

• Apollo GraphQL Kotlin Tutorial