Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Use React Query to Simplify Data Fetching

Fetching data from APIs and servers can be a complex and usually annoying task in modern web applications. Developers usually face numerous challenges when managing data fetching in their applications.

These challenges faced by developers include but are not limited to:

  • Handling loading and error states for smooth UI experiences.

  • Repeatedly retrieving data and determining when to re-fetch

  • Race conditions leading to inconsistent data.

  • Changing API schemas requiring code updates

  • Complex logic for incremental rendering as data streams in

These issues can lead to brittle code and bug-prone applications, moreso, excess boilerplate code is required to handle the intricacies of data fetching. Fortunately, we have React Query, i.e. a library that makes fetching, caching, and managing the data easier.

What is React Query and Its Uses?

React Query is a preconfigured data management library for TS/JS, React, Solid, Vue, and Svelte that offers you power and control over server-side state management, data fetching and caching, and error handling in a straightforward and declarative method that does not alter your application’s global state, thus improving your overall user’s experience.

Server data is asynchronous data and can rapidly become out-of-date or stale data because it is not kept in your React app. This is where the Query library excels, allowing you to manipulate asynchronous data, cache it, update stale data, and synchronize it.

There is no need to reinvent the wheel by writing your code to handle caching, optimistic UI updates, and other useful features.

There are a couple of libraries that offer these functionalities, however, in this article, we will focus on the React Query library. By the end of this article, you will understand what the React Query library is, and how to use it to prefetch, fetch, cache, customize, memoize, and update (mutate) data.

We will also take a look at how it compares to other data-fetching libraries. By the end of this article, you will have a good understanding of React Query, and how to use it to efficiently fetch data using its useQuery hook, you will fetch a list of users using the JSON placeholder API.

React Query logo

If you are excited as I am writing about this article, then let’s dive right in ๐Ÿš€

Prerequisites

  • Knowledge of JavaScript, because everything about the React Query library is merely you writing JavasScript in a React application, it is necessary to have a good grasp of how data fetching works in JavaScript.

  • Knowledge of React, understanding how React components work and React-JSX syntax are required for you to follow along with this article.

  • NPM is installed on your machine.

  • The library is optimized for modern browsers. It is compatible with the following browsers config:

    Chrome >= 91 Firefox >= 90 Edge >= 91 Safari >= 15 iOS >= 15 Opera >= 77 

Before we delve ahead, check out how Purecode AI allows you to be a 10x developer by increasing efficiency, productivity, and effectiveness.

You no longer have to go through the hurdles of writing each piece of code for your components yourself; just choose from our repository of 10, 000+ AI-generated custom components for your web application.

Purecode AI

Uses of React Query Library

React Query aims to solve these common pain points and simplify data fetching in React applications. It provides powerful features like automatic caching, background updating, retry on failure, and optimistic updates. The simple useQuery hook abstracts away the complexity, while still allowing extensive customization.

With React Query, you can focus on creating their applications instead of wiring up complex data-fetching logic. It handles edge cases like stale data, provides request deduplication, and streamlines refetching. The usage of this library continues to grow across various companies due to its robust data caching and management capabilities.

By handling the hard parts of data fetching under the hood, React Query enables cleaner component code and smoother UI experiences. Its declarative approach and feature set make this library a go-to choice for managing data in React apps.

It also has an impressive list of features: caching; deduping multiple requests for the same data into a single request; updating โ€œout of dateโ€ data in the background (on windows focus, reconnect, interval, and so on); performance optimizations like pagination and lazy loading data; memoizing query results; prefetching the data; mutations, which make it easy to implement optimistic changes.

Check out this video on React Query Tutorial for Beginners vs Redux, Axios with CRUD Example:

Tabular Comparison of Different Aspects of Using React Query For Data Fetching

FeatureDescription
CachingCaches data and manages stale/fresh data automatically
Request RetryingRetries failed requests automatically
PrefetchingPrefetches data in the background to keep it fresh
Optimistic UpdatesOptimistically updates UI before fresh data comes in
Declarative APISimple use query hook abstracts away logic
Compared to React ReduxLess boilerplate, no global state
Compared to React SWRMore customizable, better SSR support
Compared to AxiosHandles caching, retrying, and prefetching automatically

What you should know from this table:

  • It

    handles a lot of complexity like caching, retrying, prefetching under the hood

  • Provides a simple user query hook for declarative data fetching

  • Reduces boilerplate compared to using React Redux for data fetching.

  • More customizable and better SSR support compared to React SWR

  • Automatically handles things like retrying and caching that you would have to implement yourself with Axios.

Features of React Query

Aside from the benefits discussed already, you should consider using the Query library for your React project because React Query takes care of:

  • Caching: Window focus refetching – This allows it to pre-fetch data depending on your application activity

  • Requests retry: Ability to set the number of requests retries in the event of errors.

  • Prefetching – It can pre-fetch data depending on if your application needs fresh data after an update network request. It can update data in the background.

  • Optimistic updates – It is also able to handle complex caching so that your application is fully optimized.

Getting Started with Your React App

In this tutorial, you will be creating a React app using CRA.

Setup Your Development Environment

You will scaffold a new React project. In this tutorial, I refer to my React app as react-query-app. In your terminal, type the following:

npx create-react-app react-query-app

After having created your app and all dependencies automatically installed, you will need to navigate into the project directory and run the app. For that, run the following command in your terminal:

cd react-query-app && npm start

You should see a similar output below in your terminal:

$ npm start

> react-query-app@0.1.0 start
> react-scripts start

You should get the following in your terminal upon completion of the commands above:

  Compiled successfully!

  You can now view react-query-app in the browser.

    Local:            http://localhost:3000
    On Your Network:  http://192.168.137.1:3000

  Note that the development build is not optimized.
  To create a production build, use npm run build.

If your web pack is compiled successfully then your React app will start hot reloading your development environment and your app should be running on localhost:3000 by default.

image of React app

If you want to follow along with the codes for this article, clone the GitHub repository.

Getting started with React Query

Install React Query and react-query-devtools

yarn add @tanstack/react-query && yarn add @tanstack/react-query-devtools -f

or

npm i @tanstack/react-query && npm install @tanstack/react-query-devtools -f

or

pnpm add @tanstack/react-query && pnpm add @tanstack/react-query-devtools -f

You installed react-query-devtools because it is difficult to debug data fetching, that is why you need to install react-query-devtools. It will help you to see and understand how it fetches the current data.

The -f flag is passed to the command to resolve any dependencies issues while installing react-query-devtools.

Recommendations

It is recommended to also use our ESLint Plugin Query to help you catch bugs and inconsistencies while you code. You can install it via:

$ npm i -D @tanstack/eslint-plugin-query
# or
$ pnpm add -D @tanstack/eslint-plugin-query
# or
$ yarn add -D @tanstack/eslint-plugin-query

Next, you will import QueryClientProvider and QueryClient in your App.js like so:


// App.js

import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query-devtools";

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>

      {/* The rest of your application */}

      <ReactQueryDevtools initialIsOpen={true} />

    </QueryClientProvider>
  );
};

export default App;

You initialized ReactQueryDevtools‘s initialIsOpen to true to enable the dev tools to default to being open.

What Is the useQuery Hook?

The useQuery hook in React Query is used to fetch data in a React application. It handles the logic for data fetching and abstracts away the complexity.

useQuery accepts two key arguments – a unique query key string and an async function that returns the data. The unique key allows the hook to cache the data and handle re-fetching.

Under the hood, useQuery manages caching after the initial data fetch, background re-fetching of updated data, and other complexities like request deduplication. You do not need to handle these issues manually.

What Is A useQuery?

useQuery is a custom hook within ReactQuery thatโ€™s used to fetch data. It requires two hooks: a key, such as the string โ€œusers,โ€ and a function to fetch the data likeโ€œfetchAllUsersโ€

Using the useQuery Hook

To use the useQuery hook, its syntax is as follows:

const fetchedData = useQuery(key, promiseBasedFn);

Example:

const response = useQuery("allUsers", fetchAllUsers);

Then, the fetchAllUsers function is your promise-based function that will return a list (array) of all users as a response from the JSON placeholder API, like so:

const fetchAllUsers = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
};

The response useQuery returns are really important. The useQuery hook returns a handful of objects such as isSuccess, isError, isLoading, isFetching, data, and error.

It contains the following properties. The complete list of the properties returned by the useQuery hook is as follows:

data,
error,
failureCount,
isError,
isFetchedAfterMount,
isFetching,
isIdle,
isLoading,
isPreviousData,
isStale,
isSuccess,
refetch,
remove,
status,

Enough said, let us get your hands dirty with code by walking you through actually using the query library and the useQuery hook to fetch data in your React Application.

coding cat

For this tutorial, you will be using the JSON placeholder API to get a list of public users.

The complete code for the application we will be building is available in this repository on GitHub: https://github.com/Eunit99/react-query-app

App Setup

We will be building a simple app, just to demonstrate how the query library works. Follow through these steps to get started with setting up your applications:

Start by installing the axios library. Axios is a JavaScript library that makes it easier to send asynchronous HTTP requests to a server and manage the response. It’s a third-party library that offers an API with built-in features for error handling, data transformation, and handling request and response interceptors.

Install the Necessary Libraries

Run this command inside your react-query-app folder:

cd react-query-app && npm i axios

Next, open your index.js and import the following QueryClient, and QueryClientProvider from ‘@tanstack/react-query’ like so:

import {
    QueryClient,
    QueryClientProvider
} from '@tanstack/react-query'

Still, in the index.js file, paste the following code:


...
const queryClient = new QueryClient();

<React.StrictMode>
  <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
</React.StrictMode>

In the snippet above, we are wrapping our App component with the QueryClientProvider component to connect and provide a QueryClient to your application:

Your index.js file should look like this below:

// App.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {
    QueryClient,
    QueryClientProvider
} from '@tanstack/react-query'

const queryClient = new QueryClient();
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
          <App />
        </QueryClientProvider>
    </React.StrictMode>
  </>
);

Next, in your App.jsx file, start by importing the following: useQuery, axios, and ReactQueryDevtools from their respective libraries like so:

import {
    useQuery,
} from '@tanstack/react-query'
import axios from 'axios';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

Next, paste the following code into your App.js file like so:

// App.js

import './App.css';
import {
    useQuery,
} from '@tanstack/react-query'
import axios from 'axios';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

function App()  {
  const { isPending, error, data, isFetching } = useQuery({
    queryKey: ['allUsers'],
    queryFn: () =>
      axios
        .get('<https://jsonplaceholder.typicode.com/users>')
        .then((res) => res.data),
  });

  if (isPending) return 'Loading...';

  if (error) return 'An error has occurred: ' + error.message;

  return (
    <div>
      <ol>
        {data.map((user) => {
          return (
            <li key={user.id}>
              <b>Name:</b> {user.name}
              <ul>
                <li>
                  <b>Email:</b> {user.email}
                </li>
                <li>
                  <b>Phone:</b> {user.phone}
                </li>
              </ul>
            </li>
          );
        })}
      </ol>
      <div>{isFetching ? 'Updating...' : ''}</div>
      <ReactQueryDevtools initialIsOpen />
    </div>
  );
}

export default App;

The result should look like in the image below:

ReactQuery example

Alternatives to React Query

Apollo Client Vs React Query Vs URQL: A Detailed Comparison

  • Apollo client is a GraphQL implementation that enables developers to manage data in their applications. The team at Apollo also made the Apollo Client, a GraphQL client that can be used in your React applications.

  • URQL is a highly customizable and versatile GraphQL client for React, Svelte, Vue, or plain JavaScript, with which you add on features like normalized caching as you grow.

  • React Query, on the other hand, is an open-source project by Tanner Linsey. As pointed out above, React Query is a pre-configured library that solves the problem of fetching, caching, and optimizing data updates in your React applications.

The image below shows a graphical comparison of the download trends over the past year provided by NPM Trends. The graph shows that as of January 2024, React Query was averaging over 40M downloads compared to similar libraries.

NPM Trends - axios-vs-fetch-vs-react-query-vs-swr

Tabular Comparison of React Query to Other Popular Data Fetching Libraries

This table compares key features and capabilities of React Query to other common options like URQL and Apollo Client:

ComparisonReact QueryURQLApollo Client
GitHub stars29k7.418k
Ease of useVery easyEasyEasy
Platform requiredReactReact, Preact, and SvelteReact, GraphQL
Query supportโœ…โœ…โœ…
Window Focus Refetchingโœ…โœ…๐Ÿ›‘
Customizableโœ…โœ…โœ…
Cachingโœ…โœ…โœ…
Data fetchingโœ…๐Ÿ›‘๐Ÿ›‘
GraphQL๐Ÿ›‘โœ…โœ…

FAQs

Q: How Does React Query Compare To Redux?

A: React Query is an alternative to managing global state with Redux. It handles server state instead of client state like Redux.

Q: What Is The Difference Between Axios And React Query?

A: Axios is used just for making API calls. The latter handles additional features like caching, retrying failed requests, background updating, and optimistic UI updates.

Q: Is React Query Better Than Rtk Query?

A: They both have pros and cons. React Query has more features out of the box, while RTK Query is nicely integrated with Redux.

Q: What Companies Use React Query?

A: Major companies using React Query include Uber, Coinbase, Shopify, and Discord.

Q: How Do You Use The useQuery Hook In React Query?

A: useQuery accepts a query key and async function to fetch data. It returns fetching status and data.

Q: How Do You Fetch Data With useQuery?

A: Pass an async function to useQuery that returns data. React Query will handle loading state, errors, retrying, etc.

Q: What Is the Difference Between useEffect and useQuery?

A: useQuery handles asynchronous data fetching while useEffect runs on each render. useQuery handles caching, retrying failed fetches, background updating, and more.

Q: Is React Query Recommended For Data Fetching?

A: Yes, React Query is a great option for handling data fetching and avoiding common pitfalls like stale data.

What You Have Learned

Through this article, you have gained an understanding of how to use React Query to simplify data fetching in your React applications. The article walked you through the key problems with handling asynchronous data, like managing loading states and stale data. You now know how React Query provides simple hooks like useQuery to abstract away all the complexity behind features like caching, background updating, and request retries.

You learned how to fetch data from an API with the useQuery hook, handling loading and error states gracefully. The article also covered updating data on the server with the useMutation hook for posting data. You saw how React Query eliminates the need for excess boilerplate code compared to approaches like Redux or useEffect. The comparison tables gave you a clear picture of the advantages of this library over other options.

We at Purecode AI have simplified the process of building web applications by leveraging the power of AI to quickly and effortlessly generate top-quality components for your CSS, Tailwind CSS, Material UI, and React applications. Check out our repository of over 10, 000 components ready to be integrated and x20 development your speed ๐Ÿš€

Purecode AI

Further Readings and Lessons

Check out these articles from our blog and elsewhere to fast-track your React development journey.

Check out this crash course on React Query on YouTube

Happy Coding ๐Ÿ’ป

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.