learn.hasura.
io
Course Introduction | GraphQL Android
Apollo Tutorial
2-3 minutes
This course is a concise and powerful introduction to GraphQL for android developers.
We’ve structured this course to cover fundamental concepts of both GraphQL and using
GraphQL in Android, in the shortest amount of time possible. The course is light on opinions
so that once you grok the fundamentals you can go on to choose your favorite tools and tailor
your workflow.
Key topics and takeways:
GraphQL vs REST
GraphQL queries, mutations, subscriptions
Setting up a GraphQL client with Apollo
Integrating GraphQL queries in your android app
Integrating GraphQL mutations with query variables to handle form input
Updating local state after a GraphQL mutation (form input) using Apollo cache
Optimistic updates to local state and UI after GraphQL mutations for a slick UX
Using subscriptions with a subscriptions methods
Building a real-time feed with notifications using mutations and subscriptions
What will we be building?
We will be building a realtime todo app using authenticated GraphQL APIs.
Try this deployed version of the frontend app to see what we'll be building: https://learn-
hasura-todo-app.netlify.com/
This is built on React but the functionality will be the same for android.
Will this course teach Android concepts as well?
No, we will be simulating a scenario where we already have a GraphQL API and the basic UI
of an android app built. Our task in this scenario is to integrate the GraphQL APIs into our
android app to build a complete and working app.
What do I need to take this tutorial?
You need to have npm/yarn & node 8+ running.
How long will this tutorial take?
Less than 2 hours
Other courses
Frontend: GraphQL for: Vue, React Native, iOS
Backend: Building a realtime GraphQL backend with Hasura in 30 mins (ideal for frontend,
backend or fullstack developers)
Intro to GraphQL
Edit on GitHub
What is GraphQL?
GraphQL is a specification for how to talk to an API. It's typically used over HTTP where the
key idea is to POST a "query" to an HTTP endpoint, instead of hitting different HTTP
endpoints for different resources.
GraphQL is designed for developers of web/mobile apps (HTTP clients) to be able to make
API calls to fetch the data they need from their backend APIs conveniently.
GraphQL vs REST: an example
Let's say you have an API to fetch a user's profile and their address. In a typical REST
scenario, this is what the request/response would look like:
If your API server was a GraphQL server instead, this is what your API calls would look like:
You can see that the response JSON is different for different "queries" sent by the client.
Request1: | Response1:
query { | {
user (id: 1) { | "user": {
id | "id": 1
} | }
} | }
----------------------------------------
Request2: | Response2:
query { | {
user (id: 1) { | "user": {
id | "id": 1
name | "name": "Elmo"
} | }
} | }
Thinking in GraphQL
We're changing the way we think about API calls. Instead of making different API calls to
different URLs to fetch data, we're making ad-hoc queries to a "single URL endpoint" that
returns data based on the query.
Instead of 'GET'ing a resource you 'POST' a query that describes what data you want.
You think of the data your API returns as a "graph", this allows you to make queries
to fetch "related" pieces of data in a single shot. In the example above, you fetch the
user and the user's address (as a nested JSON object) in the same API call, as opposed
to making 2 API calls.
The "query" you send as data in the POST request has a structure and a syntax. This
"language" is called GraphQL.
As you can see in the example above, GraphQL queries look very neat and easy to read! This
is because the query is the "shape" of the final JSON data you desire. This is one of the key-
reasons that makes GraphQL a joy to work with!
GraphQL benefits
Avoid over-fetching: You avoid fetching more data than you need because you can
specify the exact fields you need.
Prevent multipe API calls: In case you need more data, you can also avoid making
multiple calls to your API. In the case above, you don't need to make 2 API calls to
fetch user and address separately.
Lesser communication with API developers: Sometimes to fetch the exact data you
need, especially if you need to fetch more data and want to avoid multipe API calls,
you will need to ask your API developers to build a new API. With GraphQL, your
work is independent of the API team! This allows you to work faster on your app.
Self-documenting: Every GraphQL API conforms to a "schema" which is the graph
data model and what kinds of queries a client can make. This allows the community to
build lots of cool tools to explore & visualise your API or create IDE plugins that
autocomplete your GraphQL queries and even do "codegen". We'll understand this in
more detail later!
Here's a quick chart to show you the GraphQL analogs of typical REST-ish terms:
Requirement REST GraphQL
Fetching data objects GET query
Writing data POST mutation
Updating/deleting data PUT/PATCH/DELETE mutation
Watching/subscribing to data - subscription
Previous
Course Introduction
Next
