Implementing Apollo Client in Android Studio

This is just here, so I can choose it as a preview ;)

So first things first. This is my premiere in writing a post on medium.com and English is not my first language, so be gentle with me ;)

Who I am and why I’m writing this post.

At the moment I’m 22 years old and currently studying Mobile Media at the Stuttgart Media University in, well, Stuttgart, Germany. It’s a great mix between actual programming and UI/UX design. So in case you are from the area and interested in those topics, go apply for it, it’s worth it.

Right now we are working on a student project which requires an Android application communicating with our back end, build with Node.js.
For our database communication, we decided to use GraphQL, because, well we already knew how to implement REST API’s, and we wanted to try something new.

If you don’t know what I’m talking about, here’s a great article on how GraphQL works from Weblab Technology.

Unfortunately connecting our Android app with our GraphQL implementation sucked because we got a lot of errors and couldn’t find a fitting guide. So I decided to figure it out, write a guide and publish it here so you don’t have to waste the time.

Because this is a guide on how to implement the Apollo Client in Android, you should have a basic idea of how to query data from a GraphQL endpoint as well as basics in Android App Development.

Let’s get started.

Step 1: Adding the required dependencies.

Create or open an Android project and navigate to “/<projectName>/app/” to open your apps build.gradle file.
Paste the following line of code on top of the file.

Lower in the same file, add the following lines to your dependencies:

Now that we are done with our apps build.gradle file, let’s continue with the projects build.gradle.
We actually have to add just one line.
The build.gradle file is located in the root directory of your project.

Insert the following line:

Now click sync and give it time to download all necessary files.

Step 2: Building our file structure

This is a small step and sometimes it works without this structure but there are cases that Apollo needs this folder structure to be able to generate our query classes and allow us to access them. You’ll see what I mean in a second.

Try to name the sub directory of /graphql the same as the sub directory of /java.

In the /main directory, create a folder called “graphql” after that create another folder inside of /graphql with the same name as your subfolder of /java.

Step 3: Getting the introspection file of your GraphQL endpoint.

Now let’s get all the data to let ApolloClient know what it deals with!
For that, we will use apollo-codegen which you can install via the Node Package Manager.
To use apollo-codegen, you’ll have to have Node.js as well as Node Package Manager installed. Here you can get both as a package.

After you installed them successfully, open your CMD and run “npm install -g apollo” to install apollo-codegen globally.
After this is done, use it to get your introspection file.
To do that, run the command: apollo schema:download --endpoint=http://serverAddress/graphql schema.json.

You can find the generated file in the directory you were when you used the command.
Now take the “schema.json” file and copy it in the subdirectory of /graphql

Your file structure should now look like that.

Step 4: Inserting a query.

Now it's time to insert the first query of our GraphQL endpoint.
In this example, I want to get a restaurant by an ID.
The back end for that is already built.
The query looks like this if we would write it in the GraphiQL interface:

Our example query in the GraphiQL interface.

To actually use it, we don’t have to change a lot.
So let’s create a file with a meaningful name which fits the query and use the file ending “.graphql” finally paste your query. The only thing we now have to do is to give it a name after the “query” keyword.

I didn’t choose the best name for the query, but it should be okay for this example.

The result should look something like this:

Now we are ready to let the magic happen.

Go on “Build” and click “Rebuild Project”. This might take a while because Apollo is actually generating a class that we can use later to run our query.
In case you want to add more queries or mutations, just make another file with a meaningful name, the file ending of “.graphql” and insert the needed query or mutation. Don’t forget to build the project so the necessary classes are created.

The created classes are located under /build/source/apollo/classes/<packageName>

Step 5: Creating our Apollo Connector

Now our base is good to go, and we are ready to create our connector which connects our application to our endpoint.

First, we import the ApolloClient and OkHttmClient, which helps us send requests to our endpoint.
Then we initialize a variable for our endpoint.
In this case, I have a local server running and instead of using “localhost:5000/graphql”, I use “10.0.2.2:5000/graphql” because “localhost” won’t work if you use the Android emulator.
Obviously, your endpoint might look different from mine.

In the next step, we build a function with the name “ setupApollo” which returns an ApolloClient. In this function, we create our OkHttpClient and use it to build our ApolloClient which we directly return.

That's it, that's our client and now we’re ready to query data. Yay.

Step 6: Querying data.

Now that we have our ApolloClient we can finally use it to create a query function for our restaurant.
In this example, I will query in my MainActivity, but you should use different classes for that for the sake of cleaner code.

So let’s create a function called “getRestaurantByID” and give it a parameter of type String which will be used for our restaurant id.

In the function we call the setupRestaurant function from our ApolloConnector class and create our query.
After we called the “.builder()”-method, we can now access the fields of our query and forward our restaurantID parameter.

After that, we need to call the build()-method and apply a callback function.

Like the name already suggests onResponse() will be called if we get a response from the server. Our data is delivered as a parameter, and we can access it by using “response.data().getRestaurantByID”.

Be sure you gave the necessary permissions in the AndroidManifest to use internet:

That's it, now you know how to use GraphQL in an Android application.

I hope I could help you a bit :)

For testing this whole thing, you can try to apply the learned things with the Star Wars GraphQP endpoint.

For more information on ApolloClient make sure to read the documentation: https://www.apollographql.com/docs/android/.

Of course, I’m happy about feedback and if you liked it, I’d be happy for clappy down below!