This content originally appeared on DEV Community and was authored by Emmanuel Chinonye Nnajiofor
Hey guys!
So after a few years as a frontend developer, I have decided to
write my first article. You have no idea the fear I had to
conquer (or maybe you do), ? but there is no point hiding in your shell right ?
Sections
Intro
React-query is a superlight library for fetching, updating and synchronizing and updating server state. With react-query, you don't have to write your
data-fetching logic (Who likes all that setting of loading, error and data state huh ? ?♀️ ), You
don't also do not need global store libraries like redux or
zustand to make your server state global or persistent. Even if a
global store is used in your application, it is restricted to only
client state like user settings etc, thereby reducing your
code size by a ton.
Although this library has a wonderful documentation, I have found that it can be daunting for beginners and thus, a need for a no-nonsense simple series to get beginners quickly setup to using react-query.
Prerequisite
- Basic knowledge of react and hooks in react
Bootstrap our project
We bootstrap a basic react app by running npx create-react-app project-name
npx create-react-app react-query-setup
We also install react-query library to our react app by running
npm i react-query. At the time of writing, react-query version is at 3.19.6
npm i react-query
Setup react-query
To setup react-query, we need the QueryClientProvider. The
QueryClientProvider component is used to connect and provide a
QueryClient to your application; more or less, connect our
application to features react-query provides.
The QueryClientProvider component takes in a "client" prop. This
prop is in turn, supplied the queryClient instance. You can supply
the queryClient instance a custom config object as a param if
you'd like to set your own defaults. You can read about some
important defaults that comes with react-query here.
import { QueryClient, QueryClientProvider } from 'react-query';
/*create and use a custom config object.Normally, I'd put this in another file and export
*/
const queryClientConfig = {
defaultOptions: {
queries: {
retry: 2,
refetchOnMount: "always",
refetchOnWindowFocus: "always",
refetchOnReconnect: "always",
cacheTime: 1000*30, //30 seconds
refetchInterval: 1000*30, //30 seconds
refetchIntervalInBackground: false,
suspense: false,
staleTime: 1000 * 30,
},
mutations: {
retry: 2,
},
},
const queryClient = new QueryClient(queryClientConfig)
function App() {
return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}
Additionally, you can add the ReactQueryDevTools component to debug and visualize your queries on your development environment.
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';
/*create and use a custom config object.Normally, I'd put this in another file and export
*/
const queryClientConfig = {
defaultOptions: {
queries: {
retry: 2,
refetchOnMount: "always",
refetchOnWindowFocus: "always",
refetchOnReconnect: "always",
cacheTime: 1000*30, //30 seconds
refetchInterval: 1000*30, //30 seconds
refetchIntervalInBackground: false,
suspense: false,
staleTime: 1000 * 30,
},
mutations: {
retry: 2,
},
},
const queryClient = new QueryClient(queryClientConfig)
function App() {
return <QueryClientProvider client={queryClient}>
{/* The rest of your application */}
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
}
In the next part of this series, we will talk about how to start fetching data and we will also look at what each key-value in the queryClientConfig object does for queries.
If the article has helped you, I wouldn't mind a ?
Thank you !
Follow me on twitter @NnajioforEmma10
Credits
Image: Logrocket: What is new in react-query 3 by Lawrence Eagles.
This content originally appeared on DEV Community and was authored by Emmanuel Chinonye Nnajiofor
Emmanuel Chinonye Nnajiofor | Sciencx (2021-08-19T07:31:59+00:00) React-query series Part 1: Basic react-query setup. Retrieved from https://www.scien.cx/2021/08/19/react-query-series-part-1-basic-react-query-setup/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.