Using Contentful GraphQL With Android

In order to pull data from the new Contentful GraphQL endpoint, Apollo for Android Client can be used.

Overview

The workflow when working with a GraphQL endpoint and the Apollo SDK is as follows:

• Using the Apollo CLI to introspect the GraphQL schema to include the content model in the project.
• Write and test queries using GraphiQL.
• Use the Apollo plugin to generate model types from the schema and queries.
• Integrate ApolloClient into the app, passing in the generated queries; write the logic for handling already-parsed responses.

Setup

Installing dependencies can be achieved by adding the following statements to the root build.gradle file:

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

The application specific build.gradle needs to load the plugin and depend on the runtime libraries:

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

dependencies {
    // … more implementation statments
    implementation 'com.apollographql.apollo:apollo-runtime:1.0.0-alpha2'
}

Once dependencies have been declared, setup is done by providing the authorization header. The following is an example of doing so:

val httpClient: OkHttpClient = OkHttpClient
   .Builder()
   .addInterceptor { chain ->
       chain.proceed(
           chain.request().newBuilder().addHeader(
               "Authorization",
               "Bearer $token"
           ).build()
       )
   }
   .build()

ApolloClient
   .builder()
   .serverUrl("https://graphql.contentful.com/content/v1/spaces/$space?locale=$locale")
   .callFactory { request ->
       httpClient.newCall(request)
   }
   .build()

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

Schema downloading

For generating the java models, a GraphQL schema and a query is required. The schema can be generated by using the apollo cli, which can be obtained from the Apollo CLI GitHub page:

apollo schema:download --header "Authorization: Bearer $TOKEN" --endpoint "https://graphql.contentful.com/content/v1/spaces/$SPACE_ID"

Queries

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

query Courses {
  courseCollection {
    items {
      title
    }
  }
}

The query can be edited in GraphiQL here. If a query for a custom space is to be used, a link like this needs to be created: https://graphql.contentful.com/content/v1/spaces/${SPACE_ID}/explore?access_token=${ACCESS_TOKEN}. ${SPACE_ID} and ${ACCESS_TOKEN} need to be replaced with the custom credentials.

Model generation

By using Apollo for Android and placing this query and the schema in the right folder (i.e. /app/src/main/graphql/com/contentful/tea/kotlin/content/graphql), the apollo plugin creates classes that can be used for querying.

The following is an example of the query created by using the above mentioned classes :

apollo.query(CoursesQuery.builder().build())
    .enqueue(object : ApolloCall.Callback<CoursesQuery.Data>() {
        override fun onFailure(e: ApolloException) {
            // error
        }

        override fun onResponse(response: Response<CoursesQuery.Data>) {
            if (response.data() != null) {
                    // response.data()?.courseCollection()?.items
            )
        }
    })

In the onResponse method, the data is stored in data()?.courseCollection()?.items and can be redirected for view model generation.

Next steps

This concludes the basic explanation of using GraphQL with Contentful and Android. For further examination, refer to the example Android app using GraphQL.