1 00:00:01,398 --> 00:00:05,070 ‫[Jonas] So, one of the big focal points of this project 2 00:00:05,070 --> 00:00:09,090 ‫is gonna be the integration of React Query 3 00:00:09,090 --> 00:00:13,440 ‫for all data fetching and remote state management. 4 00:00:13,440 --> 00:00:16,980 ‫And so in this lecture, let's start by understanding 5 00:00:16,980 --> 00:00:19,893 ‫what React Query is all about. 6 00:00:21,390 --> 00:00:25,320 ‫So, as I've mentioned multiple times in the course already, 7 00:00:25,320 --> 00:00:29,610 ‫React Query is essentially a very powerful library 8 00:00:29,610 --> 00:00:32,160 ‫for managing remote state. 9 00:00:32,160 --> 00:00:35,670 ‫So, state that is basically stored on a server 10 00:00:35,670 --> 00:00:39,270 ‫and that we need to load into our application. 11 00:00:39,270 --> 00:00:42,870 ‫And many developers even describe React Query 12 00:00:42,870 --> 00:00:45,480 ‫as being the data fetching library 13 00:00:45,480 --> 00:00:48,120 ‫that React itself is missing. 14 00:00:48,120 --> 00:00:50,430 ‫Because it's so easy to use 15 00:00:50,430 --> 00:00:53,031 ‫and contains so many useful features 16 00:00:53,031 --> 00:00:56,640 ‫that are gonna allow us to write a lot less code 17 00:00:56,640 --> 00:00:59,610 ‫in order to fetch data from an API 18 00:00:59,610 --> 00:01:02,220 ‫and to manage all that data, 19 00:01:02,220 --> 00:01:04,620 ‫all while at the same time, 20 00:01:04,620 --> 00:01:06,630 ‫even making the user experience 21 00:01:06,630 --> 00:01:09,930 ‫of our apps a lot better too. 22 00:01:09,930 --> 00:01:11,400 ‫And so, let's now talk 23 00:01:11,400 --> 00:01:14,430 ‫about some of the most useful features 24 00:01:14,430 --> 00:01:17,673 ‫and understand how React Query works. 25 00:01:18,660 --> 00:01:22,380 ‫So, the most fundamental thing about React Query 26 00:01:22,380 --> 00:01:25,590 ‫is that all remote state is cached, 27 00:01:25,590 --> 00:01:28,325 ‫which means that the fetched data will be stored 28 00:01:28,325 --> 00:01:30,175 ‫in order to be reused 29 00:01:30,175 --> 00:01:34,020 ‫in different points of the application. 30 00:01:34,020 --> 00:01:36,780 ‫So, for example, if we fetch data 31 00:01:36,780 --> 00:01:39,480 ‫about cabins in Component A, 32 00:01:39,480 --> 00:01:43,290 ‫React Query will fetch the data from the API. 33 00:01:43,290 --> 00:01:46,890 ‫It will then store the received data in the cache, 34 00:01:46,890 --> 00:01:50,220 ‫so that Component A can use it. 35 00:01:50,220 --> 00:01:52,740 ‫And then if at a later point, 36 00:01:52,740 --> 00:01:56,400 ‫Component B also wants to fetch the cabin data, 37 00:01:56,400 --> 00:02:01,080 ‫then no additional API request will be necessary. 38 00:02:01,080 --> 00:02:04,290 ‫Instead, React Query will simply provide 39 00:02:04,290 --> 00:02:08,760 ‫this same data to Component B from the cache. 40 00:02:08,760 --> 00:02:12,000 ‫And this has two huge advantages. 41 00:02:12,000 --> 00:02:15,900 ‫First, it wastes a bit less data to be downloaded 42 00:02:15,900 --> 00:02:20,130 ‫but more importantly, once the data is in the cache 43 00:02:20,130 --> 00:02:23,400 ‫all other components like Component B here, 44 00:02:23,400 --> 00:02:25,710 ‫can receive it instantly. 45 00:02:25,710 --> 00:02:30,270 ‫So without having to show the user another loading spinner. 46 00:02:30,270 --> 00:02:32,940 ‫And this creates a super responsive 47 00:02:32,940 --> 00:02:36,180 ‫and fast experience for our users, 48 00:02:36,180 --> 00:02:39,090 ‫as you're gonna see throughout this section. 49 00:02:39,090 --> 00:02:41,280 ‫And while doing all this, 50 00:02:41,280 --> 00:02:44,280 ‫React Query also automatically gives us 51 00:02:44,280 --> 00:02:46,980 ‫all loading and error states, 52 00:02:46,980 --> 00:02:51,150 ‫so that we can actually focus on what matters. 53 00:02:51,150 --> 00:02:53,310 ‫But that's not even all, 54 00:02:53,310 --> 00:02:56,700 ‫React Query also automatically refetches 55 00:02:56,700 --> 00:02:59,280 ‫the data in certain situations. 56 00:02:59,280 --> 00:03:02,070 ‫For example, after a certain timeout 57 00:03:02,070 --> 00:03:04,680 ‫or after we leave the browser window 58 00:03:04,680 --> 00:03:07,050 ‫and then come back to it. 59 00:03:07,050 --> 00:03:09,750 ‫And this is super important-- 60 00:03:09,750 --> 00:03:12,540 ‫in order to make sure that a remote state 61 00:03:12,540 --> 00:03:16,140 ‫always stays in sync with the application. 62 00:03:16,140 --> 00:03:19,350 ‫For example, if some other user of the app 63 00:03:19,350 --> 00:03:22,590 ‫changes the remote state at some point, 64 00:03:22,590 --> 00:03:25,170 ‫for example, by updating a cabin, 65 00:03:25,170 --> 00:03:29,130 ‫then the application running on all other computers 66 00:03:29,130 --> 00:03:32,370 ‫will have this cabin state out of sync 67 00:03:32,370 --> 00:03:34,830 ‫with the newly updated state. 68 00:03:34,830 --> 00:03:39,030 ‫And so, React Query can help with this as well. 69 00:03:39,030 --> 00:03:41,130 ‫So, keeping everything in sync 70 00:03:41,130 --> 00:03:44,043 ‫by automatically refetching data. 71 00:03:45,060 --> 00:03:49,530 ‫Now, besides refetching, we can also prefetch data, 72 00:03:49,530 --> 00:03:52,083 ‫which basically means to fetch data 73 00:03:52,083 --> 00:03:55,350 ‫that we know will become necessary later, 74 00:03:55,350 --> 00:03:59,670 ‫but before it is actually displayed on the screen. 75 00:03:59,670 --> 00:04:03,570 ‫And a classic example of this is pagination, 76 00:04:03,570 --> 00:04:05,460 ‫where with prefetching, 77 00:04:05,460 --> 00:04:07,440 ‫we can fetch data not only 78 00:04:07,440 --> 00:04:11,640 ‫for the current page, but also for the next page. 79 00:04:11,640 --> 00:04:15,420 ‫This way, when the user then moves to the next page, 80 00:04:15,420 --> 00:04:19,560 ‫the data will always already be there in the cache. 81 00:04:19,560 --> 00:04:23,820 ‫So, without needing to display an annoying loading spinner. 82 00:04:23,820 --> 00:04:26,760 ‫It's also very easy to mutate. 83 00:04:26,760 --> 00:04:30,600 ‫So, to update remote state using the many tools 84 00:04:30,600 --> 00:04:34,170 ‫that are built into React Query. 85 00:04:34,170 --> 00:04:37,860 ‫Now, besides all this, there are many other features 86 00:04:37,860 --> 00:04:39,780 ‫that we could talk about here, 87 00:04:39,780 --> 00:04:43,200 ‫but one that I find really useful is support 88 00:04:43,200 --> 00:04:46,230 ‫for when the user becomes offline. 89 00:04:46,230 --> 00:04:47,910 ‫So, in this situation, 90 00:04:47,910 --> 00:04:50,640 ‫since the data is already cached 91 00:04:50,640 --> 00:04:54,990 ‫as the user moves around in the app while being offline, 92 00:04:54,990 --> 00:04:58,530 ‫Components A and B can still be displayed 93 00:04:58,530 --> 00:05:01,113 ‫using this cached cabin data. 94 00:05:02,010 --> 00:05:03,000 ‫Okay. 95 00:05:03,000 --> 00:05:06,180 ‫Now, remember that as we learned earlier, 96 00:05:06,180 --> 00:05:09,000 ‫we need a library with all these features 97 00:05:09,000 --> 00:05:12,630 ‫because remote state is fundamentally different 98 00:05:12,630 --> 00:05:14,460 ‫from UI state. 99 00:05:14,460 --> 00:05:17,280 ‫It's asynchronous and usually shared 100 00:05:17,280 --> 00:05:19,770 ‫by many users of the app, 101 00:05:19,770 --> 00:05:23,010 ‫which makes it so that applications running 102 00:05:23,010 --> 00:05:27,090 ‫in different browsers can very easily get out of sync 103 00:05:27,090 --> 00:05:31,200 ‫with the remote data that is stored on a server. 104 00:05:31,200 --> 00:05:34,800 ‫So, remote state has many special needs, 105 00:05:34,800 --> 00:05:36,300 ‫and so that's the reason why 106 00:05:36,300 --> 00:05:39,123 ‫we use something like React Query. 107 00:05:40,140 --> 00:05:44,040 ‫Now, there are actually other libraries that do many 108 00:05:44,040 --> 00:05:46,650 ‫of the things that React Query does. 109 00:05:46,650 --> 00:05:51,210 ‫For example, SWR or Redux Toolkit Query, 110 00:05:51,210 --> 00:05:52,950 ‫which as the name says 111 00:05:52,950 --> 00:05:57,950 ‫is the remote state solution integrated into Redux Toolkit. 112 00:05:58,350 --> 00:06:02,370 ‫However, from what I've seen, none of them works as well 113 00:06:02,370 --> 00:06:05,610 ‫and is as popular as React Query. 114 00:06:05,610 --> 00:06:09,420 ‫Which is why I really wanted to share this amazing 115 00:06:09,420 --> 00:06:12,570 ‫and super popular tool with you. 116 00:06:12,570 --> 00:06:16,953 ‫And so, let's actually start using React Query now.