React-query Series Part 1: Basic react-query setup

Hey everyone!

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
• Prerequisite
• Bootstrap our project
• Setup react-query
• Credits

Intro

React-query is a superlight library for fetching, updating, and synchronizing server state. With react-query, you don’t have to write your data-fetching logic (Who likes all those settings of loading, error, and data state huh ? 🤷‍♀️ ), You don’t also 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 states like user settings, etc, thereby reducing your code size by a ton. Although this library has 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 set to using react-query.

You can also skip to part two: QueryClient configuration of this series

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 the react-query library to our react app by running

npm i react-query. At the time of writing, the react-query version is at 3.19.6

Setup react-query

To set the 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 with a custom config object param if you'd like to set your defaults. You can read about some important defaults that come 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 in 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 more about what each key value in the queryClientConfig object does for queries and mutations.

I’d appreciate a 👏if this article has helped you.

Thank you!

Credits

Image: Logrocket: What is new in react-query 3 by Lawrence Eagles.

React-query documentation