December 16, 2022
How to implement React Query For NEXTJS 13 Project
Thuta Sann
In this article, we will learn about how react query will be used in a ReactJS (NextJS) Project effectively.
Code Snippet
import { useState } from 'react';
import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { config } from 'lib/react-query-config';
function MyApp({ Component, pageProps }) {
// This ensures that data is not shared
// between different users and requests
const [queryClient] = useState(() => new QueryClient(config))
return (
<QueryClientProvider client={queryClient}>
// Hydrate query cache
<Hydrate state={pageProps.dehydratedState}>
<Component {...pageProps} />
</Hydrate>
</QueryClientProvider>
)
}
export default MyApp;What is React Query?
React Query is often described as the missing data-fetching library for React. Still, in more technical terms, it makes fetching, caching, synchronising, and updating server state in your React applications a breeze. It provides a Hook for fetching, caching, and updating asynchronous data in React without touching any “global state” like Redux. Initially, it seems like a simple library; however, it is packed with complex features which handle most of the server state management issues you might have in an application.
In this article, we will discuss using React Query in React applications, and learn how to fetch and update a list of users from a database. Let’s get started!
Why do you need React Query?
React Query is hands down one of the best libraries for managing server states. It works amazingly well out-of-the-box, with zero-config, and can be customised to your liking as your application grows.
If this is the first time you will come across React Query, I guarantee you are walking out of this article with one of the best tools you will use for data fetching. You can agree with the sentiment that data fetching in React sucks. You try many hooks or even come out with a solution of yours, and it seems like you are always returning to the same loophole.
For instance, when working with an API, you have many things you want to track, like loading state and data state. While most traditional state management libraries are great for working with client states, they are not so great at working with async or server states.
Once the server state in your application is gotten, more issues could arise as you go. For example:
- Caching data
- Updating data
- Lazy loading data
- Knowing when data is “out of date”
- Managing server state
Ref - https://blog.openreplay.com/fetching-and-updating-data-with-react-query/