An Introduction to GraphQL With Apollo Client and React Hooks

What is GraphQL? How can I set it up for my project? And more

React, Apollo, GraphQL. Image courtesy of hackernoon.com

TL;DR:

• GraphQL is not a database query language. It’s a query language for API data, like REST.
• Make a single query and get exactly what you asked for, unlike REST.
• The GitHub repo for this article can be found here: https://github.com/machariamuguku/react_apollo_graphql

What is GraphQL?

GraphQL is a query language for (API) data developed by Facebook. GraphQL gives clients (front ends and other APIs) the power to ask for exactly what they want, nothing more or less. It provides a structured query for data with a complete and understandable description of the data requested.

Debunking Common GraphQL Myths (What Is GraphQL Not?)

Myth 1. GraphQL is a database query language like SQL

GraphQL is not a database query language. GraphQL queries an API (like REST) which does validations and the actual fetching. GraphQL is a glue layer between your front end on one end, and the API back end and the database on the other.

Myth 2. GraphQL is magic

GraphQL is not magic. You’ll have to define resolvers for every possible GraphQL query, mutation, or subscription yourself. This includes validations and business logic.

Myth 3. GraphQL has something to do with graphs

GraphQL is a query language for API data. The graph in GraphQL refers to how, in GraphQL, you model your business domain as a graph by defining a schema, and within the schema, you define different types of nodes and how they connect/relate to one another.

Myth 4. GraphQL exposes my whole database

GraphQL exposes only what you explicitly tell it to expose through resolvers. GraphQL gives you granular control over what you expose.

Why GraphQL? Why Not, Say, REST?

• It lets you query exactly what you need. Not more, not less. This helps solve the REST problem of over- and under-fetching.
• Predictable payload structure. The query is structured the same way as the respective payload. This makes the payload highly predictable.
• Only one endpoint. Unlike REST, GraphQL has only one endpoint, making the front-end work significantly easier.
• Data aggregation from multiple sources. With tools like Apollo Federation, it is possible to make a single request across multiple federated services. This means a serious cut in round trips.
• GraphQL is strongly typed. On the back end, GraphQL has a fully-fledged language (Schema Definition Language or SDL), complete with primitive types (String, Int, Float, Boolean, etc.). This makes it less prone to errors.
• Instantly test GraphQL queries, mutations, and subscriptions. Using GraphiQL or GraphQL Playground, you can easily test GraphQL queries, mutations, and subscriptions. This is complete with the ability to pass variables and HTTP headers.

Why Apollo Client?

• Apollo Cache. Apollo client ships with a default, minimal-setup, powerful cache. This ensures previously fetched data is cached in a user’s memory. By default, the client first checks if the required data is in the cache already and returns that instead of querying for it again.
• Ease of use. The ease of setup for Apollo client is fairly simple, and more so in the Apollo client v3 era.
• Apollo React Hooks. With Apollo React Hooks, you can make queries and mutations from within functional components. This makes composing pure functions easier.
• Apollo tooling. Tools like Apollo federation, apollo-link-rest, and apollo-upload-client have minimal configuration support.

GraphQL Mutation and Query Examples

1. GraphQL register user mutation. Mutations are like POST requests in REST.

GraphQL Register user mutation

2. GraphQL login user query. Queries are like GET requests in REST.

GraphQL Login user query

As you can see, the payload structures (on the right) mirrors the request structures (on the left). You get exactly what you queried for. Neat, huh?

Apollo Client Setup

We are going to use Yarn, create-react-app, CLI, Apollo Client 3 beta, Ant Design, and the Star Wars GraphQL API. Also, make sure you have Node.js installed.

1. cd into your projects folder and create a new React project.

npx create-react-app react_apollo_graphql

2. cd into the project, open it in your favorite editor/IDE, and start it to make sure everything works.

cd react_apollo_graphql && code . && yarn start 
#I use vscode. Replace code . with your fav text editor
#e.g subl . for sublime text

3. If everything went well, the project should launch itself on your code editor and default browser.

4. Add the Apollo Client package and GraphQL as a dev dependency.

yarn add @apollo/client && yarn add graphql --dev

4. Edit index.js as below to add Ant Design CSS and provide the Apollo Client globally on your app.

5. Create a components folder inside src/. Inside it, create two files named People.js and Person.js, as below.

6. Edit App.js as below.

7. Save, run, and enjoy.

Note: Just swap in useQuery, useMutation or useSubscription in place of useLazyQuery, and you are good to GraphQL.

That’s it! I hope this was helpful. Thanks for reading!