Skip to Main ContentSkip to Footer

Use GraphQL Query Hooks With React

September 26, 2019

GraphQL and Apollo are a great combination of tools to be used with React! GraphQL makes it easier to get, modify, or get a realtime feed of your data from the servers. It’s also entirely open-source standard.

Apollo provides a suite of easy tools to implement everything related to GraphQL in React and it’s also open-source hosted on GitHub.

More recently, Apollo released an update introducing React Hooks, this has drastically reduced the code needed to use GraphQL, making it ten times simpler to use queries, subscriptions, and mutations in React.

Final Result

We are going to build a simple web page with the list of all the Star Wars films in chronological order:

You can get the final application here:

0  Sel  BrKGGUaPBnrB

Prerequisites

You need a working React app, you can get one from one of these boilerplates:

Apollo Dependencies

0  wsMoJC24G1ArJJY0

Apollo needs a few dependencies to provide all the tooling required for GraphQL, you need to open the terminal and type:

npm install apollo-boost @apollo/react-hooks graphql

The functionalities brought by these packages are:

  • apollo-boost: Package containing everything you need to set up the Apollo client.
  • @apollo/react-hooks: React Hooks-based view layer integration.
  • graphql: Parses your GraphQL queries.

Apollo Client

To enable Apollo in our project, we create an Apollo client and use ApolloProvider to inject it into our component tree:

  • We create the client with the URL of the remote GraphQL in this case: https://api.graph.cool/simple/v1/swapi. You can see it on the tenth line.
  • Then, we add the ApolloProvider, its power is that the client will be automatically passed as a singleton on every component inside the app component.

[src/index.js](https://github.com/Giorat/graphql_react_hooks/blob/master/src/index.js):

What Should I Query?

After having added the client, we need to think about which data we might want to request from this GraphQL endpoint and we can do it easily there.

We might want to request the first three or six films, changing the parameter “first”, we then select different information like the title or the release date.

Get and Show the Data

Then, we have to proceed with the final, most beautiful step:

  • First, we declare the query created in the previous part to get all first six films as a const variable STAR_WARS_FILMS on line 6 to 13.
  • We apply the useQuery on line 18, getting back the data of the films inside the data variable renamed dataFilms to make it more readable. We then use dataFilms as a simple JavaScript array.
  • We show those titles or bits of information inside the return of the render.
  • You can also use the error or loading variable to understand if the data from the server is loading or if it returned an error.

[src/App.js](https://github.com/Giorat/graphql_react_hooks/blob/master/src/App.js)

And voilà! Our app is now working wonderfully!

https://codesandbox.io/s/graphql-hooks-with-react-16-ixnpdhttps://851jm.csb.app/[](https://cdn-images-1.medium.com/max/800/1*7NajZZsJW0rZtSkYdfKc-g.png) https://codesandbox.io/s/graphql-hooks-with-react-16-ixnpdhttps://851jm.csb.app/

If you want to learn more about Hooks

I have personally read Learn React Hooks when I started using hooks and it helped me understand them to use tools such as useQuery from Apollo React: https://amzn.to/2Y8hoX9

References and Resources


Subscribe to my email list!

If you enjoy my work, you should definitely join my newsletter"Giorat Mails". It’s one email a week with everything interesting I’ve read or found, plus new articles and fresh tutorials.

Sign up for our newsletter