Getting Started With React Query(@tanstack/react-query)
Tags: react, webdev, javascript
Published: 2023-01-14 06:37:03

When a React application has many effects, it can soon become chaotic as to which effect is happening at what time, and performance may start to suffer if effects start occurring quickly one after the other. It is manageable, but it can be challenging to comprehend.

Here I am going to teach you a library called **@tanstack/react-query.** It is the same people who do react-query. This is just the newer version. They now support than just React.

npm install @tanstack/react-query@4.10.1. This will install the package in your project directory.

React is built on the premise that you should cache the majority of the data you retrieve from a database. If a user visits that page again after you have already fetched the information for pet ID 1, you normally want to cache it instead of fetching it again. React-query will help you with this because it has an **integrated caching layer for async data stores** that performs admirably inside the confines of React. Let’s look at how to apply it on our React application.

First thing, we need to **wrap our app in a query client.**More concretely though is that it’s using React context to pass our app’s cache around. So let’s go handle that.

Below is my App.jsx file which is a simple react application that fetches a list of pets from an API and renders them to the user. The user can then click on each individual pet and he/she will be redirected to the details page where more details about the pet will be displayed.


![App.jsx file containing react code ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmcw1kouzygbtqpabtry.png)

This will wrap our app with the provider necessary to power react-query. We have to give it **cache and stale times** so that it will actually use its caching layer. Otherwise it’ll fetch each time. Here we’re saying “never invalidate” but in many apps you’d probably want to still fetch every few minutes or so.

Next I have created a file called fetchPet.jsx that will actually make a request to the API.

![fetchPet.jsx file that makes a request to an API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2umvp317mddmbhojp2d.png)

By splitting it, it can be tested independently and used repeatedly throughout our app.Notice the if conditional. We need it to throw if there’s an error and fetch wouldn’t throw here if there’s a 400 or a 500 error. We need it to.

Observe that we don’t wait for the json response. We don’t need to await it in the function body because any async function will always return a promise. You might. The outcome would still be the same.

Below is My Details.jsx file.


![Details.jsx file that shows how to implement react query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8nw9ob3rn0zbk8wu2ml.png)

useQuery will actually use the queryClient that we instantiated above via context.

**The query key** is the first thing you provide to useQuery. It could be a string; for instance, details:1 could have been used as the key for details 1. However, I appreciate the array approach. You can supply it with a variety of keys. Therefore, it must match both the first key, details, and its subkey, 1, which are both keys.

In this case react-query will make it start its first fetch (but not finish) and then continue rendering.This should all work now! Notice if we navigate back and forth from a page, the first time it will load it and the second time it won’t; it’ll just **pull it from the cache!** Perfect! Exactly what we wanted.

This got a lot simpler, didn’t it? It’s because **react-query handles all the caching for us instead of us having to.** I hope that this brief article will enable you to easily get started with React query.