Setup React Query and QueryClientProvider

Tomasz Ducin
InstructorTomasz Ducin
Share this video with your friends

Social Share Links

Send Tweet
Published 5 months ago
Updated 2 weeks ago

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.

Andre Ferreira
Andre Ferreira
~ 4 months ago

The lesson description lacks the link to the API repository, and the one I found in Tomasz's repositories doesn't work with this course code: https://github.com/ducin/egghead-typescript

Tomasz Ducin
Tomasz Ducininstructor
~ 4 months ago

hi Andre, thanks for noticing! That's the repo: https://github.com/ducin/egghead-react-query. We'll link it in the course description.

Isaac
Isaac
~ 2 months ago

For some reason the linked repo branches provided are in the final lesson state, making it impossible to follow along. An intro video explaining the base repo and getting to the INITIAL state on this lesson would be more helpful.

Markdown supported.
Become a member to join the discussionEnroll Today