Setup React Query and QueryClientProvider

Tomasz Ducin
InstructorTomasz Ducin
Share this video with your friends

Social Share Links

Send Tweet

To use React Query throughout your application you'll need to import and create a new instance of QueryClient and pass that to the QueryClientProvider component in the root of your app.

[00:00] Open the console and type NPM install at tamstack slash react query. After react query is installed, we need to put the react queries query client provider component. Let's put it over here, query client provider. And [00:19] let's import it from 10stack slash react query. So it's going to wrap the entire content of the application. In our case, the content of the application is put within the React router provider over here. So query client provider accepts the client itself, so we first need to create [00:39] it. So const query client equals new query client and this is going to be imported also from 10stack slash react query, query client over here. So this is going to be our handle that is going to process [00:59] everything that is going to be related to React Query. Most often, we are not going to interfere with this object directly, but it just needs to be put over here. So everything up is running. Let's just take a look at the components tab of the React Dev Tools, and let's [01:19] type query client provider. And we can see that query client provider is available at the top of our application structure.