React Apollo and GraphQL Hooks - two ways of using GraphQL in React

Published: 2019/08/12

You plan to use GraphQL in your React app but not sure how to start? Here you can find two different ways of implementation.

What’s in here?

I’ll write about two different techniques of using GraphQL in React - React Apollo and GraphQL Hooks. But hold your horses…

First I show how to define simple GraphQL endpoint on Back-End built with NodeJS. The endpoint will be able to process parameters I plan to provide by Front-End query. This is kind of a Full Stack content :)

Endpoint in NodeJS

So you know. All the code I show here is available in my GraphQL case study repo on Github. Small code snippets can be a bit out of context so it's good to see a bigger picture.

Data Schema

In order queries be able to accept parameters you need to define it in GraphQL types definition. That’s a place where you define all Schemas and data types you want to use. If I want my query country to find a country by id I need to do something like that:

So query should be defined inside type Query. In my example I use two queries:

countries - this query will return me entire dataset I’ve got assigned to it. Data should match types defined in type Country and it will be iterable so I wrap it with braces [ ].

country is a query that accepts one parameter- id that should always have integer value. I want a result to be a single object so no braces here.

Resolvers

Now I’ve got my schema sorted. I need to bind it to an actual data with resolver function. I store my data (hardcoded) in api.countries object. My resolver can look like that:

So my first query will return all the data and result will be an array. The resolver for the second query accepts two parameters - obj and args. Basically all parameters you define in your schema will be available in the second parameter in the resolver - args.

To find a particular value I use not that sophisticated method of looping through my dataset and returning matching value. This is only a simple example but you can be a way more creative here :) Anyway it works fine :D

Testing your query

Now it’s time to check whether you can access the endpoint. If you test it locally you can launch your Apollo server and go to Playground on http://localhost:4000/ ( you can use my repo to play around with it if you want :) ). If the endpoint is fine you should see something like that:

graphql-3-test-min.png

Ok, so the query works! It’s React time! graphql-3-works-min.jpg

React integration

So as I mentioned on the very beginning - I’ll use two techniques - React Apollo and GraphQL Hooks. Both require separate modules to import.

index.js

So let’s assume you do everything in your main React root file. You can obviously do it in any other nested component.

Imports

This is how it should look like:

Please keep in mind that you don’t really need the two in your project :) You choose the one you like and do not install modules for the other one ( both methods work together though… ).

Context Providers

Now if you want components in your app be able to use GraphQL queries you need to wrap them with a provider. React Apollo uses ApolloProvider and Hooks ClientContext.Provider.

Both take single parameter which is an object with endpoint url and cache management mechanism. It can look like that:

So now components should be ready for GraphQL!

Functional Components

On one of the React meetups I heard that using functional components instead of classes is good for performance. I don’t really have opinion about it but in that case let’s focus on a functional one. Moreover now once they can use hooks they are pretty much as powerful as classes :)

React Apollo

First I’ll just paste a code snippet and then some comments:

So I need two imports for React Apollo. Then I define my query that is suppose to accept id parameter.

In this example I get my id from component props but it can come from any other place like website form, data store etc. Then I assign it to an object containing id property.

To actually trigger a query I need to use Query wrapper and pass the query and parameters I specified earlier. State (error, loading) management in GraphQL is very simple and self explanatory :) That’s it! Your component just fetched data with GraphQL.

GraphQL Hooks

Now time for React buzz word - Hook! With GraphQL sounds even more cool :) I like it.

So now you need only one import. Notice that query definition is a bit different now and you shouldn’t use gql method. id still comes from props.

Hook is defined by using useQuery where you pass two parameters - defined query and an object with parameters of your query. It looks like that:

That’s it! You just used Hook to fetch data from API :)

Takeaway

That’s pretty much it from what I wanted to cover today. I think the main takeaway is that you can use Hooks to fetch data from GraphQL API.

And it might be obvious but you can’t pass parameters to GraphQL query if it’s not suppose accept any parameters :)

Bartek Cis

I'm a JavaScript Developer. I like JS world. I adore clean design and love to write articles for my blogs :)