1 00:00:01,080 --> 00:00:04,020 ‫Okay, so let's now install 2 00:00:04,020 --> 00:00:07,893 ‫and set up React Query in our application. 3 00:00:09,120 --> 00:00:13,380 ‫And so back in VS code, let's head to our terminal 4 00:00:13,380 --> 00:00:16,590 ‫and then in here NPM install. 5 00:00:16,590 --> 00:00:21,590 ‫And then "@tanstack/react-query." 6 00:00:23,760 --> 00:00:27,213 ‫And then please install version number four here. 7 00:00:28,585 --> 00:00:29,700 ‫All right, 8 00:00:29,700 --> 00:00:34,470 ‫so the library itself is actually called "tan stack query" 9 00:00:34,470 --> 00:00:37,140 ‫because it also works in other frameworks 10 00:00:37,140 --> 00:00:40,050 ‫such as Svelte or View. 11 00:00:40,050 --> 00:00:43,290 ‫So the official name is not React Query anymore, 12 00:00:43,290 --> 00:00:46,290 ‫but I will just keep calling it that way 13 00:00:46,290 --> 00:00:49,290 ‫because that's what many people do 14 00:00:49,290 --> 00:00:52,860 ‫and the name is a bit more friendly as well. 15 00:00:52,860 --> 00:00:55,290 ‫But anyway, let's now head over here 16 00:00:55,290 --> 00:01:00,243 ‫to "App.JSX" and then actually set up React Query. 17 00:01:01,170 --> 00:01:04,590 ‫So the idea behind integrating React Query 18 00:01:04,590 --> 00:01:07,410 ‫into our application is very similar 19 00:01:07,410 --> 00:01:12,410 ‫to what we did earlier with the Context API or with Redux. 20 00:01:12,840 --> 00:01:17,070 ‫So first we create a place where the data basically lives 21 00:01:17,070 --> 00:01:21,480 ‫and then second, we provide that to the application. 22 00:01:21,480 --> 00:01:25,530 ‫And in the case of React Query, we set up the cache 23 00:01:25,530 --> 00:01:30,237 ‫and the Query client using "new QueryClient." 24 00:01:32,820 --> 00:01:36,570 ‫So using this function right here, coming again 25 00:01:36,570 --> 00:01:39,177 ‫from "tanstack/react-query." 26 00:01:40,830 --> 00:01:41,880 ‫All right. 27 00:01:41,880 --> 00:01:44,850 ‫And so let's store this into a variable 28 00:01:44,850 --> 00:01:48,630 ‫called "QueryClient." 29 00:01:48,630 --> 00:01:52,203 ‫And then in here we can pass a couple of options. 30 00:01:53,580 --> 00:01:56,160 ‫So let's just do that here, even though 31 00:01:56,160 --> 00:01:58,410 ‫we are not going to need many options. 32 00:01:58,410 --> 00:02:01,140 ‫But I just want to show you how it works. 33 00:02:01,140 --> 00:02:04,833 ‫So we can specify here the default options. 34 00:02:05,940 --> 00:02:09,360 ‫And then usually what we want is to specify options 35 00:02:09,360 --> 00:02:11,493 ‫for our queries. 36 00:02:12,450 --> 00:02:16,200 ‫And so here, one that we can experiment with 37 00:02:16,200 --> 00:02:17,607 ‫is called "staleTime". 38 00:02:19,050 --> 00:02:22,620 ‫And "staleTime" is basically the amount of time 39 00:02:22,620 --> 00:02:25,740 ‫that the data in the cache will stay fresh 40 00:02:25,740 --> 00:02:27,630 ‫so that it will stay valid 41 00:02:27,630 --> 00:02:30,210 ‫until it is refetched again. 42 00:02:30,210 --> 00:02:33,810 ‫But more about that in the next lecture. 43 00:02:33,810 --> 00:02:36,000 ‫So here, let's just set it to one minute, 44 00:02:36,000 --> 00:02:40,923 ‫which is 60 seconds times 1000 milliseconds. 45 00:02:42,935 --> 00:02:46,590 ‫Okay. And this is just one of the many, many options 46 00:02:46,590 --> 00:02:48,600 ‫that we can override. 47 00:02:48,600 --> 00:02:52,500 ‫So React Query sets a few quite aggressive, 48 00:02:52,500 --> 00:02:54,300 ‫as they say, defaults. 49 00:02:54,300 --> 00:02:56,883 ‫But as always we can override them. 50 00:02:58,260 --> 00:03:01,983 ‫So let's just search for React Query here. 51 00:03:03,390 --> 00:03:07,440 ‫And so then indeed that is at tanstack.com. 52 00:03:07,440 --> 00:03:10,140 ‫And then here, let's check out the documentation 53 00:03:10,140 --> 00:03:12,840 ‫and let's actually go to the latest version 54 00:03:12,840 --> 00:03:15,000 ‫which right now is version four. 55 00:03:15,000 --> 00:03:18,453 ‫So that's why we installed version four here earlier. 56 00:03:25,470 --> 00:03:28,110 ‫Now here, I'm not really sure where we can find 57 00:03:28,110 --> 00:03:29,850 ‫all of those options, 58 00:03:29,850 --> 00:03:32,280 ‫but that's also not really the point here. 59 00:03:32,280 --> 00:03:33,780 ‫So I just wanted to show you 60 00:03:33,780 --> 00:03:36,060 ‫that these documentations exist 61 00:03:36,060 --> 00:03:39,960 ‫and we will also later probably come back to them, 62 00:03:39,960 --> 00:03:43,590 ‫just so I can show you how we can use the documentation 63 00:03:43,590 --> 00:03:45,750 ‫which is always very, very important 64 00:03:45,750 --> 00:03:49,713 ‫for all new libraries that you include in your projects. 65 00:03:50,820 --> 00:03:55,410 ‫But anyway, with this we have created our "QueryClient," 66 00:03:55,410 --> 00:03:58,800 ‫which basically sets up the cash behind the scenes. 67 00:03:58,800 --> 00:04:02,790 ‫And so now it's time to provide this to the application. 68 00:04:02,790 --> 00:04:05,910 ‫And we want to provide our Query data 69 00:04:05,910 --> 00:04:08,100 ‫to the entire application tree. 70 00:04:08,100 --> 00:04:11,400 ‫And so we make this basically a parent component 71 00:04:11,400 --> 00:04:12,993 ‫of our entire tree. 72 00:04:14,130 --> 00:04:15,510 ‫So right here, 73 00:04:15,510 --> 00:04:20,167 ‫let's then use the "QueryClientProvider" component 74 00:04:22,920 --> 00:04:26,340 ‫and then provide it with the actual client. 75 00:04:26,340 --> 00:04:29,843 ‫So we specified a client prompt, and then " QueryClient". 76 00:04:31,470 --> 00:04:34,713 ‫So just the one that we have created earlier. 77 00:04:35,580 --> 00:04:39,450 ‫So let's grab this, paste this here, 78 00:04:39,450 --> 00:04:44,070 ‫and then we actually no longer need our React fragment here. 79 00:04:44,070 --> 00:04:46,080 ‫Because now we actually do have 80 00:04:46,080 --> 00:04:49,500 ‫a single parent element here. 81 00:04:49,500 --> 00:04:52,620 ‫Now, another thing that we can immediately do here 82 00:04:52,620 --> 00:04:56,283 ‫is to install the React Query Dev Tools. 83 00:04:57,420 --> 00:04:59,880 ‫So just like Redux, React Query 84 00:04:59,880 --> 00:05:02,460 ‫also has some excellent Dev Tools. 85 00:05:02,460 --> 00:05:05,190 ‫We just set them up in a different way. 86 00:05:05,190 --> 00:05:08,100 ‫So in this case, it is simply an NPM package 87 00:05:08,100 --> 00:05:10,143 ‫and not something in the browser. 88 00:05:11,010 --> 00:05:16,010 ‫So here, let's then install "npm" install at 89 00:05:16,590 --> 00:05:21,590 ‫and then again, "tanstack/react-query-devtools." 90 00:05:25,590 --> 00:05:26,970 ‫And here, I'm not sure 91 00:05:26,970 --> 00:05:29,760 ‫if we also need to specify the version. 92 00:05:29,760 --> 00:05:32,640 ‫So in case you encounter some problem with this 93 00:05:32,640 --> 00:05:36,120 ‫then make sure to also install version four. 94 00:05:36,120 --> 00:05:39,900 ‫So basically just doing it like this, 95 00:05:39,900 --> 00:05:42,513 ‫but I'm not sure if this is the way that it works. 96 00:05:43,440 --> 00:05:47,730 ‫And so yeah, let's try it first the way that I did it. 97 00:05:47,730 --> 00:05:52,530 ‫But anyway, now with this here installed 98 00:05:52,530 --> 00:05:55,800 ‫let's then include another component right here. 99 00:05:55,800 --> 00:05:59,550 ‫So as the first child of the Query provider 100 00:05:59,550 --> 00:06:02,143 ‫let's do "ReactQueryDevTools." 101 00:06:05,130 --> 00:06:09,730 ‫Then let's say initial is open to "false". 102 00:06:10,860 --> 00:06:14,253 ‫And with this we get an error here. 103 00:06:15,300 --> 00:06:19,650 ‫So, well actually this over here, 104 00:06:21,630 --> 00:06:23,130 ‫well this is actually correct. 105 00:06:24,240 --> 00:06:25,980 ‫Or, well, maybe not. 106 00:06:25,980 --> 00:06:29,433 ‫So I think we just need this right here. 107 00:06:30,540 --> 00:06:32,160 ‫And yeah, indeed. 108 00:06:32,160 --> 00:06:35,250 ‫And so now here in this corner of your application 109 00:06:35,250 --> 00:06:37,260 ‫you should see this symbol. 110 00:06:37,260 --> 00:06:38,520 ‫So if you click this 111 00:06:38,520 --> 00:06:43,520 ‫then this will basically open up the React Query Dev Tools. 112 00:06:44,340 --> 00:06:46,950 ‫So for now, we don't have anything in our cache. 113 00:06:46,950 --> 00:06:49,440 ‫And so then this is completely empty. 114 00:06:49,440 --> 00:06:53,280 ‫But in the next lecture, we will start fetching some data. 115 00:06:53,280 --> 00:06:57,180 ‫And so then that will show up right there in the Dev Tools. 116 00:06:57,180 --> 00:06:59,940 ‫And this data will then be available 117 00:06:59,940 --> 00:07:01,620 ‫because we provided it here 118 00:07:01,620 --> 00:07:03,990 ‫using this,"QueryClientProvider." 119 00:07:03,990 --> 00:07:06,510 ‫So again, just like we did with Redux 120 00:07:06,510 --> 00:07:09,540 ‫and with the context API before. 121 00:07:09,540 --> 00:07:12,930 ‫So a similar idea of having the data in one place 122 00:07:12,930 --> 00:07:16,083 ‫and then providing it to the whole component tree.