1
00:00:00,140 --> 00:00:00,560
All right.

2
00:00:00,560 --> 00:00:04,820
And now let's see how we can implement the React query in the loader.

3
00:00:04,910 --> 00:00:10,820
And as a side note, this is where things get clunky, so just bear with me.

4
00:00:10,850 --> 00:00:17,540
For starters, I want to set this object separately because we will use it in two places.

5
00:00:17,540 --> 00:00:22,190
And also remember, Axios is already returning data.

6
00:00:23,100 --> 00:00:25,650
And therefore we go here with data dot data.

7
00:00:25,920 --> 00:00:33,470
And if we want to avoid that effectively, we can set this function as async await inside of the function.

8
00:00:33,480 --> 00:00:38,010
We can wait for response data and then return that one.

9
00:00:38,040 --> 00:00:45,420
Long story short, we can just access default stats and monthly applications directly from the data.

10
00:00:45,450 --> 00:00:51,990
So let's go above the loader and in my case, I'm going to call this stats query.

11
00:00:52,840 --> 00:00:54,400
That's going to be my object.

12
00:00:54,430 --> 00:00:56,560
And as far as what do I want to add there?

13
00:00:56,560 --> 00:00:58,810
Well, I want these two properties.

14
00:00:58,810 --> 00:01:05,590
And like I said, I'll make this one a sink and then it's not going to be implicit return.

15
00:01:05,860 --> 00:01:09,130
Actually, we'll have the curlies and the return.

16
00:01:09,130 --> 00:01:15,310
And then first let's wait for response so that one is going to be equal to await.

17
00:01:15,340 --> 00:01:21,880
Then we grab here this custom fetch and then we want to return response data.

18
00:01:22,710 --> 00:01:24,660
Again, this is Axios thing.

19
00:01:25,050 --> 00:01:28,650
We get back this giant object and we're looking for the data.

20
00:01:29,220 --> 00:01:35,790
Now in here, we're actually going to pass in that stats query.

21
00:01:36,000 --> 00:01:39,180
And now, again, we don't need to do that dot data.

22
00:01:39,750 --> 00:01:46,740
Now also we're not going to use this is loading and is error because we'll have react query in the loader

23
00:01:46,740 --> 00:01:50,850
so we can nicely skip these two things over here.

24
00:01:50,880 --> 00:01:56,040
Again, at the moment there's going to be an error because we'll try to grab default stats and monthly

25
00:01:56,040 --> 00:01:57,840
applications from the data.

26
00:01:57,960 --> 00:01:59,310
Don't worry about it.

27
00:01:59,340 --> 00:02:02,100
Once we fix it, everything is going to be correct.

28
00:02:02,100 --> 00:02:05,280
So at the moment, yes, you will have an error.

29
00:02:05,430 --> 00:02:11,670
Now how we can start using a React query and as a note, I can actually remove these ones as well since

30
00:02:11,670 --> 00:02:12,690
we won't use it.

31
00:02:12,720 --> 00:02:16,290
So how we can start using React query in the loader?

32
00:02:16,920 --> 00:02:19,380
Well, we have the hook.

33
00:02:19,380 --> 00:02:20,040
Correct.

34
00:02:20,040 --> 00:02:21,300
But here's one major.

35
00:02:21,330 --> 00:02:21,990
Gotcha.

36
00:02:22,720 --> 00:02:24,400
Loader is not a hook.

37
00:02:24,610 --> 00:02:32,820
And one of the rules of the hooks is that you can only call hook in the component or in a custom hook.

38
00:02:32,830 --> 00:02:38,210
And that's why we always set up custom hooks with use and whatever the name.

39
00:02:38,230 --> 00:02:40,600
Now, loader is not a hook.

40
00:02:41,210 --> 00:02:47,870
So we cannot directly come here and say, Hey, use query and let's return a data.

41
00:02:47,900 --> 00:02:49,670
That's not going to work.

42
00:02:49,700 --> 00:02:53,960
So this is where we'll have to pass the query.

43
00:02:53,960 --> 00:03:01,380
Client Remember the one that we set up in the app directly into our loader?

44
00:03:01,400 --> 00:03:10,550
So we're looking for stats loader and I want to access this query client our instance and then this

45
00:03:10,550 --> 00:03:18,350
instance has the methods which we can also use to pretty much fetch the data with React query.

46
00:03:18,380 --> 00:03:18,980
Now.

47
00:03:19,680 --> 00:03:23,850
How we can pass the query client down to a loader.

48
00:03:23,850 --> 00:03:28,400
Well, we'll have to invoke it and we pass in the query client.

49
00:03:28,410 --> 00:03:34,020
But as things currently stand in the stats page, we'll have a massive error.

50
00:03:34,050 --> 00:03:34,550
Why?

51
00:03:34,560 --> 00:03:39,330
Well, because we invoke this stats loader right away.

52
00:03:39,950 --> 00:03:43,340
So in order to fix it, we need to go back to the stats.

53
00:03:43,340 --> 00:03:49,460
And this loader is going to become a function which returns a function.

54
00:03:50,300 --> 00:03:56,810
So we go here, we'll have access to the query client and now everything is going to be correct.

55
00:03:56,900 --> 00:03:58,730
Basically we invoke loader.

56
00:03:58,760 --> 00:03:59,300
Yep.

57
00:03:59,300 --> 00:04:06,140
We grab the query client and then from the loader we return the actual function.

58
00:04:06,500 --> 00:04:09,320
And essentially I still return the same function.

59
00:04:09,320 --> 00:04:14,990
We just have this extra step over here in order to access the query client.

60
00:04:15,050 --> 00:04:20,579
And if we want to make a request with the query client, this is going to be the syntax.

61
00:04:20,600 --> 00:04:23,660
So we start over here by setting up data.

62
00:04:23,690 --> 00:04:29,360
Then the method we're going to use is going to be asynchronous and therefore we go with Await.

63
00:04:29,390 --> 00:04:32,350
Then we go with query client.

64
00:04:32,360 --> 00:04:38,180
So again, we have access to it because we pass it from App.jsx and then the method we're looking for

65
00:04:38,210 --> 00:04:41,750
is ensure query data.

66
00:04:41,750 --> 00:04:45,980
And this method is again looking for the same object.

67
00:04:46,010 --> 00:04:48,930
That's why we set it up in two places.

68
00:04:48,950 --> 00:04:53,340
So we pass over here the stats query and then.

69
00:04:53,780 --> 00:04:55,250
From this loader.

70
00:04:55,250 --> 00:04:57,290
We just return data.

71
00:04:57,410 --> 00:05:03,830
Now, as a quick side note, technically you can return null as well, and I'll showcase that in a second.

72
00:05:03,860 --> 00:05:06,410
So let's navigate back over here.

73
00:05:06,860 --> 00:05:08,750
Again, I'll go to add Job.

74
00:05:09,800 --> 00:05:10,630
Let me refresh.

75
00:05:10,640 --> 00:05:11,750
Let me start from scratch.

76
00:05:11,750 --> 00:05:12,150
You know what?

77
00:05:12,170 --> 00:05:13,490
I'll make this one.

78
00:05:14,220 --> 00:05:17,490
Smaller then let's go to a stats.

79
00:05:17,520 --> 00:05:22,440
Notice initially we had that loading because again, we're using the loader right now.

80
00:05:22,800 --> 00:05:31,680
Let me hop back to jobs then back to stats and notice again we get this data instantly and at the very

81
00:05:31,680 --> 00:05:33,860
end, let me just showcase a few things.

82
00:05:33,870 --> 00:05:39,600
For starters, let me navigate to App.jsx and I'm going to mess with the stale time.

83
00:05:39,600 --> 00:05:45,510
So how long the query is going to be valid and I'm actually going to set it up as 10s.

84
00:05:45,510 --> 00:05:47,460
Again, it's looking for milliseconds.

85
00:05:47,460 --> 00:05:54,300
One second is 1000 milliseconds, and if I multiply 1000 by ten I'm going to get my 10s I don't think

86
00:05:54,300 --> 00:05:55,910
I need to refresh.

87
00:05:55,920 --> 00:05:59,190
Let me just go back to all jobs again.

88
00:05:59,190 --> 00:06:05,700
We make the first request, the stats one and now for 10s we can navigate back and this is going to

89
00:06:05,700 --> 00:06:06,480
be cached.

90
00:06:06,510 --> 00:06:13,530
Now after those 10s you will see that the query is not going to be valid, which means that behind the

91
00:06:13,530 --> 00:06:18,390
scenes React query is going to make a request in order to showcase that.

92
00:06:18,390 --> 00:06:21,390
Again, let's navigate to a network.

93
00:06:21,750 --> 00:06:26,970
I mean, now we have a bunch of things open over here, so let me close this one for now.

94
00:06:27,180 --> 00:06:28,920
Again, let's start from scratch.

95
00:06:28,920 --> 00:06:30,150
We refresh.

96
00:06:30,180 --> 00:06:35,640
This is the page you navigate to the stats one now for pretty much 10s.

97
00:06:35,640 --> 00:06:36,840
We can keep coming back.

98
00:06:36,840 --> 00:06:41,370
We're not going to be making a request then in those 10s.

99
00:06:42,190 --> 00:06:44,820
Query is going to turn stale.

100
00:06:44,830 --> 00:06:54,520
So now if let's say I navigate again to all jobs and back to the stats, we will make the request.

101
00:06:54,550 --> 00:06:55,990
Hopefully that is clear.

102
00:06:55,990 --> 00:07:04,000
So now let me navigate back over here and I'll still multiply this by 60 and then back to five.

103
00:07:04,420 --> 00:07:11,770
And I also want to discuss something students have been asking essentially, why do we even want to

104
00:07:11,770 --> 00:07:13,300
call here this use query?

105
00:07:13,300 --> 00:07:16,390
So why do we need to call this twice?

106
00:07:16,420 --> 00:07:21,670
Can't we just access data using use loaded data and then call it a day?

107
00:07:21,680 --> 00:07:23,080
And technically we can do that.

108
00:07:23,080 --> 00:07:24,040
Let's try it out.

109
00:07:24,040 --> 00:07:25,620
So I'm going to go over here.

110
00:07:25,630 --> 00:07:32,680
Remember, we're returning a data, so now I can just access it here and you'll see that essentially

111
00:07:32,680 --> 00:07:36,130
our functionality works, but we're losing some benefits.

112
00:07:36,130 --> 00:07:41,440
You see, React Query is more than just caching, for example.

113
00:07:41,440 --> 00:07:45,710
We also know Refetch on the autofocus.

114
00:07:46,040 --> 00:07:53,510
So therefore, yes, you can technically skip it, but in my case I'll keep it in two places.

115
00:07:53,510 --> 00:07:58,760
So I'll actually remove this and I'll comment these ones out.

116
00:07:58,790 --> 00:08:06,740
Now lastly, I can go here with Null and everything is going to work because again, we're not really.

117
00:08:07,200 --> 00:08:13,050
Using the data back from the loader is actually available over here.

118
00:08:13,170 --> 00:08:21,330
So we invoke ensure query data, which effectively either grabs the data from the cache if it's still

119
00:08:21,330 --> 00:08:21,900
valid.

120
00:08:22,080 --> 00:08:24,790
If not, then it refreshes.

121
00:08:24,840 --> 00:08:31,050
And if we have the data, then of course it's already right away available over here in this use query.

122
00:08:31,080 --> 00:08:32,750
So now let's navigate back again.

123
00:08:32,760 --> 00:08:36,690
I know probably some people find it annoying, but I do want to showcase this.

124
00:08:36,720 --> 00:08:43,980
We go here and notice our query is still valid and we're good to go even though technically I'm returning

125
00:08:43,980 --> 00:08:44,700
a null.

126
00:08:44,730 --> 00:08:48,270
So we're not accessing this data from the loader.

127
00:08:48,270 --> 00:08:51,450
Technically, we set up over here this query.

128
00:08:51,680 --> 00:08:57,660
And since it's available in the query, in the stats query, since there is a data, of course I'll

129
00:08:57,660 --> 00:09:01,020
have access to it over here as well.

130
00:09:01,050 --> 00:09:06,540
And lastly, I just want to showcase that if we have some kind of error and I'm going to demonstrate

131
00:09:06,540 --> 00:09:09,190
that by messing with the URL.

132
00:09:09,220 --> 00:09:16,490
Of course, now we are displaying the error element so we can clearly see that we got back 400.

133
00:09:16,510 --> 00:09:23,680
So there was some kind of issue with the request and therefore we trigger the error and as a result

134
00:09:23,710 --> 00:09:27,700
we display heading four with our error text on the screen.