What is GraphQL and using it on Android.
We all have worked by consuming REST APIs from day one of our development but as data queries are getting more complex with data growing larger it is turning to be expensive with respect to time and computations. There was requirement of framework or a layer which could make the appropriate optimization in querying and consuming APIs. Then comes GraphQL:
What is GraphQL?
GraphQL is a query language for the APIs for getting your data. It is an alternative for the REST APIs. It is not specific for a single platform and works for all type of clients including Android, iOS or web. It stands between your server and client and helps you to query your data in a more optimized way. Lets see why:
Main Advantages:
- Client driven, You only get what you need: This means that clients define what type of response they are interested to get in return which provides more control powers to the client on server. For example if the query is:
Query:query {
repository(owner:"jakewharton", name:"butterknife") {
name
description
forkCount
url
}
}Response:{
"data": {
"repository": {
"name": "butterknife",
"description": "Bind Android views and callbacks to fields and methods.",
"forkCount": 3989,
"url": "https://github.com/JakeWharton/butterknife"
}
}
}
In this example the client query requests the name, description, fork count and URL of the respective repository and thus in response we only get only those fields which were requested which will reduce our parse time comparatively from the case in which we will get much detailed JSON response.
- Avoid doing multiple calls : In case of REST APIs we have to maintain multiple endpoints. For instance, one end point for getting the “id” of user from /users and details of user from /users/<id> which will cost us two calls for the details. Now from the graphQL implementation this will reduce to single query because of the concept of Arguments in GraphQL
Resultant single Query:query{
User(id:"abcj34"){ //Argument
name
subject
}
}
Important tools and APIs to know before using:
So, you must be thinking that this is OK but I need some already developed graphQL APIs for practising the working on a client side (if you are a client side developer) and other important tools. So, here is an important list you can bookmark:
PS: If you already have a REST API and want to shift to graphQL API you can use express-graphql which will make a graphQL wrapper around your
REST API or a SOAP and then you can use it as a graphQL API.
- Yelp GraphQL API: https://www.yelp.com/developers/graphql/guides/intro
- Github GraphQL API: https://developer.github.com/v4/
- Star Wars GraphQL API: https://github.com/graphql/swapi-graphql
Important tools:
- GraphiQL: This is a type of plugin in your browser which is used to test your queries on the APIs. You can customize your requests by adding URLs and adding on different header types. Link: https://github.com/graphql/graphiql
- Altair GraphQL Client: It is a type of postman for graphQL APIs which is also available as Mozilla Firefox add-on to test the queries. Link: https://github.com/imolorhe/altair
Starting Up GraphQL on ANDROID
Now for testing GraphQL on Android I have made two projects one is a simple project with just posting up queries on the URL using Retrofit with appropriate headers and other is using GraphQL using apollo-android which is a compliant client that generates Java models according to your query which makes it easier to get your results from the response of the API. Let’s start how you will configure the apollo-android and how to use it to make following demo :
- Configuring apollo-android and setting up
In your project build.gradle add following:
//In your project build.gradle
dependencies {
classpath 'com.android.tools.build:gradle:3.0.1'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.2.21"
classpath 'com.apollographql.apollo:gradle-plugin:0.3.2' //Add this
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}Now go to app build.gradle add the following on top:
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
apply plugin: 'com.apollographql.android' // Add this
.....
.....Now in dependencies add following:
implementation 'com.apollographql.apollo:apollo-runtime:0.3.2'
implementation "com.apollographql.apollo:apollo-android-support:0.3.2"After this sync your project.
2. Adding files for CodeGen of models
For code generation of models two files are required to be added in project first with a .graphql extension and second a schema.json file which is also an input for the code generation of the models.
- For schema.json you should have apollo-codegen which is used to send an introspection query to server and get schema.json. For getting apollo-codegen execute following:
1. npm-install apollo-codegen //For installing the apollo-codegen2. For sending the introspection query and getting the schema.json execute following:apollo-codegen download-schema https://api.github.com/graphql --output schema.json --header "Authorization: Bearer <Your TOKEN here>"
- Now make a file with .graphql queries and add following queries:
query FindQuery($owner:String!,$name:String!){
repository(owner:$owner, name:$name) {
name
description
forkCount
url
}
}Make a directory with name “graphql”under the /main of your project in the same level of java directory and paste both the files. Now rebuild your project and when the build is successful you will see auto generated models in build/generated like shown in following screenshot:
3. Setting up Apollo client
Apollo-android uses okhttp client for requesting the queries and getting response. For this, setup the client by adding appropriate headers by adding okhttp interceptor. Add the respective okHttpClient to ApolloClient.builder( ) as shown.
4. Querying from the client
From the client object build the query as shown above and pass the appropriate arguments. Enqueue the result as shown above and change UI correspondingly.
5. Setup UI accordingly as shown above in screenshot
Your application will be ready in above steps.
For more closer look you can find the project on:
Show some ❤ by hitting clap. The project is open for any kind of PR or issue just open and you are in. Would love to here feedbacks.
Happy Coding ❤
