1
00:00:00,200 --> 00:00:00,650
Okay.

2
00:00:00,650 --> 00:00:05,900
And up next, let's add React query to our application, which is a library that provides a bunch of

3
00:00:05,900 --> 00:00:08,990
features when working with remote data.

4
00:00:09,080 --> 00:00:13,790
Now, in our case, we'll mostly use it to cache our requests.

5
00:00:13,790 --> 00:00:19,420
But in the Readme you will find more benefits, which by the way, you get by default.

6
00:00:19,430 --> 00:00:26,390
So of course once we set up React Query in our app, we'll also immediately have those features.

7
00:00:26,510 --> 00:00:34,280
Now it has quite a few versions and in this project we're going to use version four, which at the time

8
00:00:34,310 --> 00:00:36,910
of the recording is the latest version.

9
00:00:36,920 --> 00:00:42,380
And also since we cannot use hooks in React router loaders.

10
00:00:43,020 --> 00:00:49,620
The setup might seem a little bit clunky, but in my opinion it's well worth it.

11
00:00:49,650 --> 00:00:55,350
Now, if you want to explore the docks, basically, maybe you're looking for more features, just follow

12
00:00:55,350 --> 00:01:00,280
this link and remember that we want to install this library in the client.

13
00:01:00,300 --> 00:01:05,860
So take a look at the package Json in the client, whether you have installed both of the libraries.

14
00:01:05,880 --> 00:01:09,010
If not, then of course navigate there and install.

15
00:01:09,030 --> 00:01:13,670
And before I show you the setup, first, let's take a look at the problem.

16
00:01:13,680 --> 00:01:19,620
Now, when I say problem, what I mean by it is that we can make some improvements to our application.

17
00:01:19,620 --> 00:01:26,070
So if I navigate to the browser and if I inspect my network tab and all that, of course we'll see that

18
00:01:26,100 --> 00:01:28,410
we're making quite a few requests.

19
00:01:28,410 --> 00:01:29,960
But now let's think about it.

20
00:01:29,970 --> 00:01:36,600
So let's say I navigate to all jobs and at the moment these are the values that I have in the search

21
00:01:36,600 --> 00:01:37,140
form.

22
00:01:37,140 --> 00:01:40,170
So essentially I get back 100 jobs, correct?

23
00:01:40,200 --> 00:01:43,660
Now, if I go to stats and if I come back.

24
00:01:44,200 --> 00:01:47,950
Notice how again, we're making pretty much the same request.

25
00:01:48,420 --> 00:01:49,440
But here's the thing.

26
00:01:49,440 --> 00:01:51,930
We already received this data.

27
00:01:52,200 --> 00:01:58,440
And in that short span, let's say one second or so, the data didn't really change on the server.

28
00:01:58,440 --> 00:02:05,310
And this is where React Query comes into play, where effectively we'll have some kind of stale time.

29
00:02:05,310 --> 00:02:08,190
Basically we'll have some kind of time.

30
00:02:08,430 --> 00:02:14,640
How long the query is valid, how long our request is valid, and in our case we're going to go with

31
00:02:14,640 --> 00:02:15,360
five minutes.

32
00:02:15,360 --> 00:02:17,520
But of course you'll be able to change that.

33
00:02:17,790 --> 00:02:19,020
And if.

34
00:02:19,760 --> 00:02:24,010
We make the same request in those five minutes.

35
00:02:24,080 --> 00:02:28,080
Essentially, it's going to be cached and we'll right away get that data.

36
00:02:28,100 --> 00:02:32,390
So as a side note, we'll also have that loading spinner.

37
00:02:32,480 --> 00:02:34,040
So we'll compare.

38
00:02:34,040 --> 00:02:36,620
Hey, listen, do we already have this data?

39
00:02:36,890 --> 00:02:39,920
If yes, well then we don't need to make that request.

40
00:02:39,920 --> 00:02:44,900
And of course, if some of this sounds iffy, once we set up the functionality, you'll see what I'm

41
00:02:44,900 --> 00:02:45,620
talking about.

42
00:02:45,650 --> 00:02:52,220
So for starters, let me navigate to a client, I guess, and let me just make sure that it's over there.

43
00:02:52,460 --> 00:02:55,550
Let me find where is my package Json here.

44
00:02:56,730 --> 00:02:57,840
Let's just double check.

45
00:02:57,840 --> 00:03:00,840
So in this case I only have the React query one.

46
00:03:01,080 --> 00:03:02,700
So let me go here.

47
00:03:02,940 --> 00:03:04,230
Grab this command.

48
00:03:04,980 --> 00:03:07,380
We want to go to a client.

49
00:03:08,530 --> 00:03:10,330
Then let's install both of them.

50
00:03:12,090 --> 00:03:16,800
Then we're going to navigate back to the server and we'll set up some imports.

51
00:03:16,800 --> 00:03:26,190
So CD back over here and now we want to go npm run, not def, we want to go with npm run and then dev.

52
00:03:26,550 --> 00:03:27,420
Okay, good.

53
00:03:27,630 --> 00:03:31,200
I think for now I can close the integrated terminal.

54
00:03:32,170 --> 00:03:36,010
And if you take a look, we're also installing dev tools.

55
00:03:36,040 --> 00:03:43,660
Now, please keep in mind that dev tools are only going to be active while in development, so automatically

56
00:03:43,660 --> 00:03:47,230
they will be removed once we push this up to production.

57
00:03:47,350 --> 00:03:49,490
So we don't really need to do anything.

58
00:03:49,510 --> 00:03:55,660
Now why I want to install dev tools because it's going to be very useful to see what queries are cached.

59
00:03:55,690 --> 00:03:57,490
Now what do we want to import?

60
00:03:57,490 --> 00:04:02,200
Query client and query client provider from React Query.

61
00:04:02,350 --> 00:04:07,450
And then as far as the dev tools is a separate component from separate package.

62
00:04:07,450 --> 00:04:08,440
And you know what?

63
00:04:09,070 --> 00:04:10,630
In order to avoid some typos.

64
00:04:10,630 --> 00:04:13,210
I'm just going to take the stuff from the Readme.

65
00:04:13,240 --> 00:04:14,620
So again, let me close everything.

66
00:04:14,620 --> 00:04:16,350
I'm going to start from scratch.

67
00:04:16,360 --> 00:04:20,890
We're looking for App.js and this is super, super, super important.

68
00:04:20,920 --> 00:04:27,520
And you'll see why once we start setting up the loaders functionality, we want to go, of course,

69
00:04:27,520 --> 00:04:28,510
where we have the imports.

70
00:04:28,510 --> 00:04:35,140
Again, two components query client, query client provider and React query dev tools.

71
00:04:35,170 --> 00:04:38,620
Then we want to set up the client.

72
00:04:38,620 --> 00:04:45,160
And again, location is important because we'll utilize it here in the Create browser router and we're

73
00:04:45,160 --> 00:04:48,880
going to go with const, then query client.

74
00:04:48,880 --> 00:04:50,680
So this is a instance.

75
00:04:50,680 --> 00:04:57,100
Query client is equal to then we want to go with new then query client.

76
00:04:57,490 --> 00:05:03,910
And in here essentially we want to pass in the object and we want to go with default options.

77
00:05:03,910 --> 00:05:09,800
And in this object we want to set up queries and we will go with some kind of stale time.

78
00:05:09,800 --> 00:05:15,320
So essentially we're setting up how long the query is going to be valid.

79
00:05:15,320 --> 00:05:20,210
Again, you can provide different values, but in my case I want to show you with five minutes.

80
00:05:20,240 --> 00:05:22,790
Now, we do need to provide this in milliseconds.

81
00:05:22,790 --> 00:05:30,020
Therefore, I'm going to go with 1000 times 160 and then times five.

82
00:05:30,050 --> 00:05:31,130
Let me save it.

83
00:05:31,130 --> 00:05:35,150
I have my instance, something we're going to use a little bit later.

84
00:05:35,150 --> 00:05:44,030
For now, we want to navigate to app and effectively I want to wrap my entire application in query client

85
00:05:44,030 --> 00:05:48,650
provider and also I want to set up those DevTools.

86
00:05:48,650 --> 00:05:50,330
So how's that going to look like?

87
00:05:50,330 --> 00:05:53,720
For now, let me move the router provider.

88
00:05:54,220 --> 00:05:58,620
Below we're going to go with query client provider.

89
00:05:58,630 --> 00:06:01,660
It's looking for prop called client.

90
00:06:01,660 --> 00:06:02,800
And guess what?

91
00:06:02,830 --> 00:06:04,780
We'll pass in the query client.

92
00:06:04,900 --> 00:06:12,940
Then inside of it we want to set up our router provider and also we're going to go with those dev tools.

93
00:06:13,240 --> 00:06:21,580
So dev tools and essentially it has this prop initial is open and we'll set it equal to false.

94
00:06:21,790 --> 00:06:23,230
Let me close it.

95
00:06:23,230 --> 00:06:26,530
And now let me make sure that the return is correct.

96
00:06:26,560 --> 00:06:27,810
Let's save it.

97
00:06:27,820 --> 00:06:30,040
I'm going to take a look at the console.

98
00:06:30,070 --> 00:06:31,870
There are no issues.

99
00:06:32,260 --> 00:06:37,630
Once we refresh, we should see the button to open up the dev tools again.

100
00:06:37,660 --> 00:06:39,560
Our requests are not going to change at the moment.

101
00:06:39,580 --> 00:06:41,380
Of course we do need to set up the functionality.

102
00:06:41,380 --> 00:06:47,560
But notice over here in the bottom we have the dev tools and once we open of course we have nothing

103
00:06:47,560 --> 00:06:51,580
in the dev tools since we haven't set up any functionality yet.

104
00:06:51,580 --> 00:06:56,570
And again, don't worry, once you push this up to production, React query dev tools are going to be

105
00:06:56,570 --> 00:07:01,910
removed by default and with this in place now we can move on to the next step.