React Hooks in Apollo Client for GraphQL Queries and Mutations

David Mráz

Introduction

The hype following the last React conference has diminished. The proposal for React Hooks was introduced as part of the React alpha release. Since React v16.8, React Hooks have been in all official release as well. How does this improvement affect how we build our apps with GraphQL? We usually take our time before introducing new tech features in our projects at Atheros. This will allow us to not jump on the false hypes. React Hooks are now tested and production ready, so we took a shot on implementing it in our projects as well. React Hooks is a new way how to reduce the need for React component classes and their life-cycle methods. They also solve other problems related to using HOC (Higher order component) or render props pattern. There are a lot of resources on React Hooks and I will not go deep into them from React standpoint in this article. You can checkout the following talk from the recent conference

or the official documentation

The official React library comes with its own default Hooks such as useState, useContext, useEffect and others. But, The React library does not, however, contain Hooks for executing GraphQL queries and mutations in the Apollo client. Let's take a look at these now. First, let's summarize how we currently fetch data with Apollo and React.

Apollo client API

With the Apollo client and React, you can query your GraphQL server in various ways. We currently have three major ways to query our GraphQL server.

  • HOC pattern
  • Render props pattern
  • React Hooks

We will show how these approaches work using the simple component for displaying a list of emails. The GraphQL query looks like this:

It will be useful to check out the repository with examples. You can clone the repository with...

and then, to preserve package-lock.json dependencies, install with...

You can run dev server as follows...

HOC (Higher-Order-Component) pattern

As far as I know, this is the oldest execution method for queries and mutations with Apollo. It uses the well-known React HOC pattern. This pattern is implemented in React Apollo using the HOC component created with the graphql function. We can use this function to define further HOCs for a different GraphQL query or mutation. With this approach, we can write our simple component as follows:

The disadvantage can be that if we have many mutations or queries, it can become impractical to maintain so many HOCs. In some cases, you even need to keep the HOCs in order if you use, for example, the with Apollo component as well. In these cases, to clean up the code we can use compose utility from the React Apollo package, or just use the recompose library.

Render props pattern

This pattern was official one for quite some time in Apollo community. There is no need to wrap the components with HOCs. The HOCs created with graphql() had been replaced by the Query and Mutation components. The rewrite for our simple component above is easy.

You are still able to use either HOCs or render props in Apollo client, but both ways are now obsolete and replaced with official React Hooks. You can also check out this article on pros and cons of higher-order components, render props, and React Hooks.

Using React Hooks with GraphQL in the Apollo client

This section was significantly updated to be compliant with official Apollo client API

React Hooks now have official support in the React Apollo. The support of React Hooks is coming with some great improvements. First of all there is significant reduction in bundle size as you can use only @apollo/react-hooks package. Even though you can reinvent the wheel and try to prepare the Hooks by yourself, I would suggest to use already-prepared Hooks. With the new introduction of React Hooks in Apollo official release you would need to install dedicated packages for SSR. The first thing that you need to do is to wrap your top-level component with the Apollo provider. We use Next.js in our example project, so a good place to do it can be in __app.js file as follows:

However, this is only good approach if you use Next.js with server side rendering (SSR) and fetch data from GraphQL on majority of your pages. For pages that do not need to be server side rendered you can use HOC to inject Apollo Provider on per page bases as follows:

The Apollo Provider enables us to use React Hooks for executing queries and mutations in our application. The following Hooks are available in the official Apollo release: useQuery, useLazyQuery, useMutation, useSubscription and useApolloClient.

GraphQL queries with React Apollo Hooks

Let's take a look at the component for fetching emails that we wrote with the HOC and render props pattern. We will import the useQuery Hook from the officialReact Apollo Hooks library. Now let's define our first Hook for a GraphQL query. Hooks need to be defined in the body of functional React components. The new implementation with React Hooks is as follows:

We can see that the API is simple to use, and also the useQuery Hook returns the same variables as usual. You might also notice that we have pre-generated our TypeScript types. For more information you can follow our previous article.

Now let's take a look at how we can define variables and manually update the cache.

Writing our GraphQL mutations with React Hooks

We can define the useMutation in a similar way. As we know, the main difference between a query and a mutation lies in their different execution. Queries are executed in parallel, but mutations are executed serially. Let's take a look at how to execute the subscribeEmail mutation

using the useMutation Hook.

We have written our component with the excellent Formik and Yup validation library. We can see that the Hooks definition is done without variables. In the React Apollo library, we can either define variables in the body of a functional component or pass them dynamically once the Hook is executed.

Conclusion

I hope that you like this short article on using React Hooks with GraphQL. We really enjoy using Hooks with unofficial community library and now with official Apollo support it gets even better. To ease your Hooks set-up with Apollo, you can use our example repository to speed up the process.

Did you like this post? You can clone the repository with the examples and project set-up here. Feel free to send any questions about the topic to david@atheros.ai.

Join thousands of others and be occasionally notified about new articles and our courses

* Signing up for Atheros newsletter indicates you agree with Terms and Conditions and Privacy Policy including our Cookie Policy.