We have created a sample product catalog app that is built using Apollo Android SDK. The content of this app is powered by Contentstack GraphQL APIs, and the app uses Apollo client on the client side to consume GraphQL APIs.
This document covers the steps to get this app up and running for you. Try out the app and play with it, before building bigger and better applications.
In this tutorial, we will first go through the steps involved in configuring Contentstack and then look at the steps required to customize and use the presentation layer.
Log in to your Contentstack account, and create a new stack. Read more about stack.
Add a publishing environment to publish your content in Contentstack. Provide the necessary details as per your requirement. Read more about environments.
For this app, we need just one content type: Product. Here’s what it’s needed for:
- Product: Lets you add the session content to your app
For quick integration, we have already created the content type. Download the content type and import it to your stack. (If needed, you can create your own content types. Read more about Content Types).
Now that all the content types are ready, let’s add some content for your Stack.
Create and publish entries for the ‘Product’ content type.
Now that we have created the sample data, it’s time to use and configure the presentation layer.
To get your app up and running quickly, we have created a sample Android app for this project. You need to download it and change the configuration. Download the app using the command given below:
$ git clone https://github.com/contentstack/contentstack-android-graphql-example.git Once you have downloaded the project, add your Contentstack API Key, Delivery Token, and Environment to the project during the SDK initialization step. ((Learn how to find your Stack's API Key and Delivery Token. Read more about Environments.)
To add the Gradle plugin, you need to first install the following dependencies into the root build.gradle file as follows:
buildscript {
repositories {
jcenter()
}
dependencies {
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:
apply plugin: 'com.apollographql.apollo'
dependencies {
...
implementation 'com.apollographql.apollo:apollo-runtime:x.y.z'
...
}
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.
In this step, you need to construct a GraphQL schema file for your content model and include the schema 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:
./gradlew downloadApolloSchema --endpoint="https://<HOST>/stacks/<API_KEY>?environment=<ENVIRONMENT_NAME>" \
--header="access_token: <ENVIRONMENT_SPECIFIC_DELIVERY_TOKEN>" Download the GraphQL schema for your content model using Contentstack GraphQL Schema Download, and place it in the root directory of your Android project
Note: Place the schema file next to your .graphql files or within the /app/src/main/graphql/com/contentstack/graphql directory.
Contentstack provides a GraphQL playground, which is a 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 URL given below (after entering the required details):
https://www.contentstack.com/docs/developers/apis/graphql-content-delivery-api/explorer/The following is an example of a sample query for GraphQL:
query ALLProducts($skip:Int, $limit:Int) {
all_product(locale: "en-us", skip:$skip, limit:$limit){
items{
title
price
url
description
featured_imageConnection{
edges{
node{
title
url
}
}
}
}
}}Next, you need to create an instance of Apollo Client to fetch data.
After downloading the schema and creating the queries, let’s create an instance of ApolloClient and point it at the GraphQL server. Create an instance of OkHttpClient and pass it to the ApolloClient builder as follows:
String BASE_URL = "https://<HOST>/stacks/<API_KEY>?environment=<ENVIRONMENT_NAME>";
OkHttpClient okHttpClient = new OkHttpClient.Builder().build();
ApolloClient apolloClient = ApolloClient.builder().serverUrl(BASE_URL).okHttpClient(okHttpClient).build(); This creates our Apollo Client which is ready to fetch data.
Finally, integrate ApolloClient into the app and pass in the generated queries. write the logic for handling already-parsed responses.
apolloClient.query(AllProductQuery.builder().build()).enqueue(new
ApolloCall.Callback<AllProductQuery.Data>() {
@Override
public void onResponse(@NotNull Response<AllProductQuery.Data> response) {
response.data().all_product().items().stream().forEach(item -> {
Log.i("Title", item.title());
Log.i("Price", item.price().toString());
Log.i("description", item.description());
Log.i("image", item.featured_imageConnection().edges().get(0).node().url());
});
}
@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.