Apollo GraphQL in Android App

It’s been a long time since my last post, but I want to present some light on this intriguing topic on GraphQL for Android. In this blog, we will cover
1) What is GraphQL?
2) Getting started with GraphQL for Android
3) Apollo Android: Implementation of GraphQL Client for android
4) Queries and Mutations in GraphQL

What is GraphQL?

Just like any SQL, GraphQL is an open-source client-driven data query manipulation language. Most of us are working on querying data from a REST API. The main problem arrives when the scope of the app is worldwide, fetching millions of queries in a single instance. Here comes GraphQL in the picture. We can get specific data from a single API whereas there is a fixed data within multiple API calls. There are always issues of over-fetching and under-fetching with REST APIs. You can also consume graphql for utilizing a node server and in the browser.

An overview of how GraphQL looks like. Image reference

Getting started with GraphQL for Android

Both iOS and Android consume data APIs. We are using Apollo Client for handling all the GraphQL schema and queries. It generates all the models for Java and Kotlin for GraphQL queries. These APIs are type-safe. It makes it organized and easy to access. Let's start with the implementation.

Apollo Android: Implementation of GraphQL Client for android

To get started with the implementation of GraphQL we have to add the dependencies.

Add the dependencies to your Android Studio. Go to the link to know more: Get started with Apollo.

build.gradle (:app)

Download the schema.json
As an SDL(Schema Definition Language), Apollo GraphQL requires schema for all its operations. The schema has to be in the app folder. I have already provided a basic structuring below. After you hit this command schema.json will be downloaded to the path you will provide.

./gradlew downloadApolloSchema \  --endpoint="https://your.url.endpoint" \  --schema="app/src/main/graphql/com/example/schema.json”

Using this command will automatically make a schema.json file into the path you provide.

Note: If you don’t have a GraphQL server yet, you can use the server from the tutorial: https://apollo-fullstack-tutorial.herokuapp.com/graphql.

Query to write in the above link for getting a response.

The response you will get after hitting the above query.

Create a LaunchDetail.graphql as mentioned in the docs of put your first GraphQL query in a .graphql file, in the same directory as your downloaded schema: app/src/main/graphql/com/example/LaunchDetails.graphql and build the project. It will automatically create a model class for you to work on.

Auto-Generated model class.

To interact with the server we have to create an APIManager class.

Change the server matching your endpoint.

Apollo android uses okhttp client for requesting the query. HTTP Interceptor. After creating the API Interface for the APIs as we create in Retrofit. We can fetch the data.

Queries and Mutations in GraphQL

Just like we find GET and POST methods in a traditional REST client, there are Query and Mutation in a GraphQL server. Simply use query to fetch data and to modify server-side data, go for mutation. A simple example how both query and mutation look like.

• Query GraphQL

#Link to the API: https://devdocs.magento.com/guides/v2.4/graphql/queries/cart.html
This Api is used to get the customer cart count and cart_id. it is only used for not calling the whole api for saving excess network call and faster response time. Saved nearly 75.6% from the response size in respect for calling the whole api for cart in Home Fragment. See above link for the whole query for customer cart.
query CustomersCartCount {
    customerCart {
        id
        total_quantity
    }
}

• Mutation GraphQL

#Link to the API: https://devdocs.magento.com/guides/v2.4/graphql/mutations/create-customer.html
#firstname: The customer’s first name
#lastname: The customer’s last name. Required to create a customer
#email: The customer email
#password: The customer’s password
#isSubscribed: Indicates whether the customer is subscribed to the #company’s newsletter. This will be false for Mobile Version.

mutation CreateCustomer($firstname: String!, $lastname: String!, $email: String!,$password: String!){
    createCustomer(
        input: {
            firstname: $firstname
            lastname: $lastname
            email: $email
            password: $password
            is_subscribed: false
        }
    ) {
        customer {
            firstname
            lastname
            email
            is_subscribed
        }
    }
}

It has scalar types as well, how cool is that. See the String!type in the mutation. That’s one of the five basic types. Int, Float, Boolean, and ID You can even call the list type as [String]. To make them non- nullable you can use as above with an exclamation “!” mark.

References

1. GraphQL
2. Adobe E-Commerce DevDocs
3. Introduction to Apollo GraphQL (Android).

Thanks for reading this. Happy Querying! :)