How to integrate React Query in a GraphQL-based React App?

Replace React’s useEffect & useState hooks with react query’s useQuery hook to simplify the process of fetching and managing the data via GraphQL

3 min readMay 28, 2022

React is fundamentally unopinionated

The best part about React is, that it is a fundamentally unopinionated library. This means, it is flexible, we can build our Web Apps using React as we want. There is no ONE correct way to:

Organize our components
Fetch data from the server & cache the fetched data
Manage states and update the UI

As long as it is working and performant, everything is valid. This is awesome in my perspective because it gives us a lot of room to innovate.

At the same time, the worst part about React is, that it is fundamentally unopinionated, duh?

What I mean to say is, since there is no single correct way to do certain things, especially data fetching, caching, and handling states across multiple components in React, and when multiple developers are working on the same codebase, it may end up becoming a mess. Therefore, we need a structure that helps us in standardizing the way we do things in React.

Why React Query?

React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.

It provides us with tools and techniques that help us in standardising the things we just discussed.

In this blog, we will see how we can integrate React Query’s useQuery hook in our app to eliminate the overhead of:

Managing the state of the data fetched from a GraphQL API
Update the component for different stages of data fetching like Loading, Fetched, and Failed.

We will use a React.js based expense manager that we created in this Atlas GraphQL API blog series to demons the power of React Query.

Step 1: Install React Query in our App

We will execute the following command from the root directory of our React App to install react-query:

npm i react-query

Step 2: Configure React Query

Now, we will make the following configurations in our App.js file in the src/ directory.

We are initializing a new QueryClient instance provided by React Query and wrapping our whole app with its provider so that it can be consumed from anywhere in the app.

Step 3: Implement the useQuery hook for fetching a list of expenses through GraphQL

No matter how complex the GraphQL Query is, all we need to do is pass the request function to the useQuery hook and we are all set, we don’t have to worry about client-side caching, component & state updates.

All of those responsibilities are now offloaded to React Query.

Step 4: Implement the useQuery hook for making a complex GraphQL

In this step, we will be implementing the useQuery hook for making a complex GraphQL request that will be used for displaying an Analytics Dashboard.

Conclusion

That’s it, in just 4 steps we have learned how to integrate React Query in our GraphQL-based React.js app. The code snippets shown in this blog are taken from a full-stack Expense Manager that we built in a blog series where we learned How to Create a Full Stack Web App Without Creating a Server.

Before you ask, here’s the GitHub Repository (linked to the appropriate branch specific to React Query Integration)