Getting Started with React Query

4 min readMay 17, 2021

Pre-Requirements

Basic understanding of JavaScript, React Js & React State.

What is React Query

What is React Query? React Query is a library that gives React JS the state management ability for any kind of asynchronous data. It allows you to make requests and handle response metadata. According to their official documentation,

“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.”

State management has been a topic from the front-end applications. There are several existing solutions such as Redux, context API directed towards client-side state management.

In this article, I am going to show how you can get started with React Query.

Installation

So first, you have to create a new react application using create-react-app.

after creating a new react application you can install react query using the following command.

installing react-query

Basic Implementation

Now, I’m going to show you how to fetch data using the useQuery hook. For that, I’m using JSON placeholder as an API endpoint to fetch data.

Now we are going to write the fetch users function, to fetch the posts.

The useQuery Hook

The useQuery hook is a function used to register our data fetching code into React Query library. It takes a key and asynchronous function for fetching data.

Fetching Data

Now we can use the usequery hook to manage the fetched data.

Let’s import the useQuery from react-query.

import useQuery

As mentioned earlier usequery hook accepts two parameters.

The first parameter is called query key. It is used by React Query to manage caching, Strings, arrays, and objects are valid query keys. Query keys should be serializable and unique to the query. Following are some valid examples of query keys.

The second parameter is the function that sends the request which interacts with the API. This function can choose any method to connect with the server. It can use native fetch API or any other library such as Axios. The only requirement is that this function needs to return a promise either resolve the data and throw an error.

now we can use useQuery hook to manage the data fetching as below,

fetching the response

Now the response returns from useQuery is most important. It has the following properties.

Here the data is the data we fetched from the API. “status” will be “loading”, “error”, “success” or “idle” according to the response. And all these properties have different uses.

Now that we are able to fetch information from the server let us create a component to display information to the user.

This is a basic example of React Query, here what I did is check the status of the response and display the post title.

Conclusion

React Query has completely removed the need we are having remote data inside the global state. we only have to tell the library where we need to fetch the data, and it will handle caching background updates and stale data without any extra code or configuration.

It also removes the usage of useState and useEffect hooks and replaces them with a few lines of React Query. It will definitely help to keep our application maintainable, responsive, and fast.

I hope you were able to have an overall understanding of React Query and how it solves the problem of server state management. There is a lot more in React Query than discussed here.

If you want to learn more about React Query you can check out the React Query documentation.