What is React Query?

Luciana Moll
Jul 15, 2020 · 4 min read

React-Query is a library that allows you to make requests and handle response metadata. To make a query, define a unique key and an asynchronous function to resolve data, as parameters of useQuery.

Basic implementation:

import { useQuery } from ‘react-query’function App() {
const info = useQuery(‘todos’, fetchTodoList)
}

In this case, todos is the unique key, and fetchTodoList is the async function.

Complex implementation:

function Todos() {
const { isLoading, isError, data, error } = useQuery("todos", fetchTodoList);
if (isLoading) {
return <span>Loading...</span>;
}
if (isError) {
return <span>Error: {error.message}</span>;
}
// also status === 'success', but "else" logic works, too
return (
<ul>
{data.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
);
}

If you prefer to avoid booleans to handle the different states, a status variable is provided by the library:

function Todos() {
const { status, data, error } = useQuery('todos', fetchTodoList)
if (status === ‘loading’) {
return <span>Loading...</span>
}
if (status === ‘error’) {
return <span>Error: {error.message}</span>
}
// also status === 'success', but "else" logic works, too
return (
<ul>
{data.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
)
}

As we can see, it’s very simple to implement and we can handle which element renders depending on the status.

React-query vs custom hook

import { useState, useEffect } from "react";const useFetch = (url, options) => {
const [response, setResponse] = useState(null);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const fetchData = async () => {
setIsLoading(true);
try {
const res = await fetch(url, options);
const json = await res.json();
setResponse(json);
setIsLoading(false);
} catch (error) {
setError(error);
}
};
fetchData();
}, []);
return { response, error, isLoading };
};

This is already quite complex, and we did not even start to account for caching, invalidation and other features. The benefits of react-query library are:

  • Avoid so many lines of code and complexity.
  • It allows you to have queries ordered and set different parameters to each one.
  • When the data becomes obsolete, it does a refetch in the background or you can do a manual refetch (explained in the next section)
  • It makes it easier for you to obtain the status and if isLoading, isError, etc.
  • Provides an easier way to load-more, infinite scroll, dependent queries, paging, caching, and many more.

The list of benefits is extensive, and it can be extended further if we decide to explore the library more. Let’s go one step further to usages.

Usages

I want to highlight something very important here, query results (via useQuery and similar hooks) will become “stale” immediately after they are resolved and will be refetched automatically in the background when they are rendered or used again.

There are 2 ways to change this behavior. One way, you can alter the default staleTime for queries to something other than 0 milliseconds. Another way is using the third param of useQuery to set “manual” in true. Besides that, we can use refetch to call when you want and update data. It could be depending on a variable or maybe in a callback.

Example 1:

const {
status: randomStatus,
data: randomData,
refetch: refetchRandom,
} = useQuery("randomCharacter", getCharacterRandom, { manual: true });

Example 2:

const { status: allStatus, data: allData, refetch: refetchSearch } = useQuery(
"characters",
() => getCharacters(characterSearch),
{
manual: true,
}
);

Other important things are:

There are many ways to optimize and options to set up react-query depending what you want to do. Explore this fantastic and useful library.

Should we replace the traditional custom hook to handle the response?

Leniolabs_

Frontend Team Augmentation that works 🚀

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store