React-query series Part 1: Basic react-query setup
Tags: react, javascript, webdev, hooks
Published: 2021-08-19 07:31:59

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), :worried: but there is no point hiding in your shell right ?

## Sections

  * [Intro](#chapter-0)

  * [Prerequisite](#chapter-1)

  * [Bootstrap our project](#chapter-2)

  * [Setup react-query](#chapter-3)

  * [Credits](#chapter-4)




## Intro <a name="chapter-0"></a>

[React-query](https://react-query.tanstack.com/) 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 that setting of loading, error and data state huh ? :woman_shrugging: ), 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 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.
You can also skip to the [part two: QueryClient configuration](https://dev.to/nnajiforemma10/react-query-series-part-2-queryclient-configuration-18g6) of this series




## Prerequisite <a name="chapter-1"></a>

  * Basic knowledge of react and hooks in react



## Bootstrap our project <a name="chapter-2"></a>





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](https://www.npmjs.com/package/react-query) version is at 3.19.6

```
npm i react-query
```
## Setup react-query <a name="chapter-3"></a>

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 come with react-query [here.](https://react-query.tanstack.com/guides/important-defaults)



```javascript
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`](https://react-query.tanstack.com/devtools) component to debug and visualize your queries on your development environment.



```javascript
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](https://dev.to/nnajiforemma10/react-query-series-part-2-queryclient-configuration-18g6) of this series, we will talk more on what each key-value in the `queryClientConfig` object does for queries and mutations.

I'd really appreciate a :sparkling_heart: if this article has helped you.
Thank you!

Follow me on [twitter @NnajioforEmma10
](https://twitter.com/NnajioforEmma10)


## Credits <a name="chapter-4"></a>
Image: [Logrocket: What is new in react-query 3 by Lawrence Eagles](https://blog.logrocket.com/whats-new-in-react-query-3/).

[React-query documentation](https://react-query.tanstack.com)


## Sections

  * [Intro](#chapter-0)

  * [Prerequisite](#chapter-1)

  * [Bootstrap our project](#chapter-2)

  * [Setup react-query](#chapter-3)

  * [Credits](#chapter-4)