Using GraphQL with Apollo Client Android SDK

Apollo is a GraphQL client that helps you consume GraphQL APIs.

In this document, we will learn how to use the Apollo client and Contentstack GraphQL queries to power the content of your Android SDK apps.

Prerequisites

Before proceeding with the Apollo SDK, we need to install certain dependencies of the project’s build.gradle file. Install the required dependencies as follows:

buildscript {
    repositories {
        // ... (other values from the project)
        jcenter()
    }
    dependencies {
        // ... (other values from the project)
        classpath 'com.apollographql.apollo:apollo-gradle-plugin:x.y.z'
    }
}

Next, add the Gradle plugin within your app module’s build.gradle file as follows:

// ... other apply statements, Apollo needs to be last
apply plugin: 'com.apollographql.android'

dependencies {
    // ... more implementation statments
    implementation 'com.apollographql.apollo:apollo-runtime:x.y.z'
}

Note: The latest Gradle plugin version is here. Refer the Apollo-Android documentation for more details on what needs to be performed to add the Apollo SDK for Android into your project.

Download your schema

The first step is to construct a GraphQL schema file for your content model and include the file in your project. This schema file is a JSON file that contains the results of introspection queries and is used by Apollo-Android for the code generation process.

Download the GraphQL schema for your content model using Apollo CLI or you can use apollo-codegen as follows:

apollo-codegen introspect-schema “https://graphql.contentstack.com/stacks/<API_KEY>?access_token=<ENVIRONMENT-SPECIFIC_DELIVERY_TOKEN>&environment=<ENVIRONMENT_NAME>” --output schema.json

Note: Place the schema file next to your .graphql files or within the /app/src/main/graphql/com/contentstack/graphql directory.

Write GraphQL queries

Contentstack provides a GraphQL playground, which is the GraphiQL interface, to test your GraphQL queries in your browser. Use this interface to write and test your queries.

Open a browser of your choice and hit the following URL after filling the required details:

https://www.contentstack.com/docs/apis/graphql-content-delivery-api/explorer/

The following is an example of a sample query for GraphQL:

query allProduct {
    all_Product(locale: "en-us") {
        title
        description
        featured_image {
            url
        }
    }
}

Next, you need to create an instance of Apollo Client to fetch data.

Create ApolloClient

After downloading the schema and creating the queries, let’s create an instance of ApolloClient and point it at the GraphQL server.

ApolloClient uses OkHttp under the hood to handle network requests. To send header values with your GraphQL requests, you can add those to your OkHttpClient instance by means of an Interceptor. Create an instance of OkHttpClient and pass it to the ApolloClient builder as follows:

String BASE_URL = "https://graphql.contentstack.com/stacks/<API_KEY>?access_token=<ENVIRONMENT-SPECIFIC_DELIVERY_TOKEN>&environment=<ENVIRONMENT_NAME>";
OkHttpClient okHttpClient = new OkHttpClient.Builder().build();
ApolloClient apolloClient = ApolloClient.builder().serverUrl(BASE_URL).okHttpClient(okHttpClient).build();

Fetch data using ApolloClient

Finally, integrate ApolloClient into the app and pass in the generated queries. Write the logic for handling already-parsed responses as follows:

apolloClient.query(AllProductQuery.builder().build()).enqueue(new ApolloCall.Callback < AllProductQuery.Data > () {
    @Override
    public void onResponse(@NotNull Response < AllProductQuery.Data > response) {
        Log.d(TAG, response.toString());
    }
    @Override
    public void onFailure(@NotNull ApolloException e) {
        Log.e(TAG, e.getLocalizedMessage());
    }
});

Additionally, the snippet above sets the Stack and the Locale to be used by the client.

Example app

We have created an example app that demonstrates the usage of Contentstack GraphQL queries and Apollo Android SDK. Refer this guide and create your own apps easily.

Was this article helpful?
top-arrow