‫Okay, so let's now install
‫and set up React Query in our application.
‫And so back in VS code, let's head to our terminal
‫and then in here NPM install.
‫And then "@tanstack/react-query."
‫And then please install version number four here.
‫All right,
‫so the library itself is actually called "tan stack query"
‫because it also works in other frameworks
‫such as Svelte or View.
‫So the official name is not React Query anymore,
‫but I will just keep calling it that way
‫because that's what many people do
‫and the name is a bit more friendly as well.
‫But anyway, let's now head over here
‫to "App.JSX" and then actually set up React Query.
‫So the idea behind integrating React Query
‫into our application is very similar
‫to what we did earlier with the Context API or with Redux.
‫So first we create a place where the data basically lives
‫and then second, we provide that to the application.
‫And in the case of React Query, we set up the cache
‫and the Query client using "new QueryClient."
‫So using this function right here, coming again
‫from "tanstack/react-query."
‫All right.
‫And so let's store this into a variable
‫called "QueryClient."
‫And then in here we can pass a couple of options.
‫So let's just do that here, even though
‫we are not going to need many options.
‫But I just want to show you how it works.
‫So we can specify here the default options.
‫And then usually what we want is to specify options
‫for our queries.
‫And so here, one that we can experiment with
‫is called "staleTime".
‫And "staleTime" is basically the amount of time
‫that the data in the cache will stay fresh
‫so that it will stay valid
‫until it is refetched again.
‫But more about that in the next lecture.
‫So here, let's just set it to one minute,
‫which is 60 seconds times 1000 milliseconds.
‫Okay. And this is just one of the many, many options
‫that we can override.
‫So React Query sets a few quite aggressive,
‫as they say, defaults.
‫But as always we can override them.
‫So let's just search for React Query here.
‫And so then indeed that is at tanstack.com.
‫And then here, let's check out the documentation
‫and let's actually go to the latest version
‫which right now is version four.
‫So that's why we installed version four here earlier.
‫Now here, I'm not really sure where we can find
‫all of those options,
‫but that's also not really the point here.
‫So I just wanted to show you
‫that these documentations exist
‫and we will also later probably come back to them,
‫just so I can show you how we can use the documentation
‫which is always very, very important
‫for all new libraries that you include in your projects.
‫But anyway, with this we have created our "QueryClient,"
‫which basically sets up the cash behind the scenes.
‫And so now it's time to provide this to the application.
‫And we want to provide our Query data
‫to the entire application tree.
‫And so we make this basically a parent component
‫of our entire tree.
‫So right here,
‫let's then use the "QueryClientProvider" component
‫and then provide it with the actual client.
‫So we specified a client prompt, and then " QueryClient".
‫So just the one that we have created earlier.
‫So let's grab this, paste this here,
‫and then we actually no longer need our React fragment here.
‫Because now we actually do have
‫a single parent element here.
‫Now, another thing that we can immediately do here
‫is to install the React Query Dev Tools.
‫So just like Redux, React Query
‫also has some excellent Dev Tools.
‫We just set them up in a different way.
‫So in this case, it is simply an NPM package
‫and not something in the browser.
‫So here, let's then install "npm" install at
‫and then again, "tanstack/react-query-devtools."
‫And here, I'm not sure
‫if we also need to specify the version.
‫So in case you encounter some problem with this
‫then make sure to also install version four.
‫So basically just doing it like this,
‫but I'm not sure if this is the way that it works.
‫And so yeah, let's try it first the way that I did it.
‫But anyway, now with this here installed
‫let's then include another component right here.
‫So as the first child of the Query provider
‫let's do "ReactQueryDevTools."
‫Then let's say initial is open to "false".
‫And with this we get an error here.
‫So, well actually this over here,
‫well this is actually correct.
‫Or, well, maybe not.
‫So I think we just need this right here.
‫And yeah, indeed.
‫And so now here in this corner of your application
‫you should see this symbol.
‫So if you click this
‫then this will basically open up the React Query Dev Tools.
‫So for now, we don't have anything in our cache.
‫And so then this is completely empty.
‫But in the next lecture, we will start fetching some data.
‫And so then that will show up right there in the Dev Tools.
‫And this data will then be available
‫because we provided it here
‫using this,"QueryClientProvider."
‫So again, just like we did with Redux
‫and with the context API before.
‫So a similar idea of having the data in one place
‫and then providing it to the whole component tree.