What is React Query and why do we need it?
React Query, a React library that simplifies the way we fetch cache and synchronize data from a server. React itself has no opinions about how you fetch data from the front end.
The most basic approach is to use the browser fetch api. When a component first mounts and useEffect and then manage the response with useState that works, but it becomes increasingly difficult when requirements like caching retries and deduping come into play.
React query not only simplifies your data fetching code but also handles these complex requirements out of the box.
Getting Started
Setup
React Query is open source and available via npm:
First things first, we need to wrap our application inside QueryClientProvider that we can import from react-query
Before we specify queryClient in the client object of QueryClientProvider we need to instantiate it. That's all we need for set up in index.js
QueryClient essentially helps us to interact with the cached data from the queries we have made. It can return the data from the cache if the query still exists or if the specified staletime is not over and we obviously do not have to wait for the data to load in this process. Otherwise, it will fetch the most recent data.
useQuery Hook
In react query, useQuery hook is used to fetch data or perform any kind of read operations on the server. To make use of useQuery hook, you have to call it with
A unique query key that is used to refetching and caching the data, so whatever data is returned from the promise we are going to cache it against this unique key An asynchronous function that returns a promise which ultimately resolves the data or throws an error If we ever reuse the same key to fetch different data, it is going to overwrite all the previously cached data with the new data.
Let's take a look at how we actually fetch data with useQuery. In this example, we are going to be using Axios to fetch posts from a REST API.
useQuery returns an object full of important states that we can use for templating data, mount or unmount components, and many other operations. These returned properties are de-structured in the above example.
Among all the returned states, the most commonly used ones are
- data this property contains the returned data from the query
- isLoading is currently fetching data
- isError the query encountered an error
- error if the query is in isError state, the error property is returned with the error message
Mutations
The useMutation hook provides a way to mutate remote state. Let's define a way to delete a post:
Mutations do not automatically update the query cache, but React Query provides a number of ways to perform those updates that we'll go through below.
Key Takeaways:
React Query helps us in:
Window focus refetching – when a user leaves your app tab, React Query marks the data “stale” and refetches it when that person returns.
Request retry – you can set an amount of retries for any request to combat random errors.
Prefetching – if your React Query function app needs fresh data after an update request, you can prefetch the query with a specific key, and React Query will update it in the background.
Optimistic Updates – when you edit or delete an item in a list, you can issue an optimistic update of the list.
Thanks for reading! I hope you liked this article on 5 What is React Query and why do we need it? and I hope it comes handy to you in the future.
Do consider sharing this article with your friends – I'd really appreciate that. Stay tuned for more amazing content.