1
00:00:00,080 --> 00:00:00,440
All right.

2
00:00:00,440 --> 00:00:07,520
And once we're familiar how we can pass the query client down to a loader, let's also cache our current

3
00:00:07,520 --> 00:00:08,810
user request.

4
00:00:08,960 --> 00:00:14,690
Remember, since it's sitting in a dashboard layout, pretty much every time we're navigating around

5
00:00:14,690 --> 00:00:16,730
our dashboard, we make that request.

6
00:00:16,760 --> 00:00:21,110
So this is a good use case where we can cache this request.

7
00:00:21,140 --> 00:00:28,640
Now, I can tell you right away that with this request, we actually want to invalidate it in few cases.

8
00:00:28,640 --> 00:00:31,190
So please wait for the next video.

9
00:00:31,370 --> 00:00:34,040
There is a bug that we'll need to fix.

10
00:00:34,070 --> 00:00:38,690
So essentially in this video I just want to set up the request and I'm fully aware that there's going

11
00:00:38,690 --> 00:00:43,340
to be one bug which we're going to work on in the following video.

12
00:00:43,370 --> 00:00:46,850
For starters, we want to set up the user query.

13
00:00:46,880 --> 00:00:49,850
Basically, I just want to set up the object again.

14
00:00:49,970 --> 00:00:51,650
I'm going to call this user.

15
00:00:51,800 --> 00:00:54,140
The functionality is going to be exactly the same again.

16
00:00:54,140 --> 00:01:00,540
I'm looking for my data and then I want to right away pass in the query client in the loader.

17
00:01:00,540 --> 00:01:07,570
And this is the case where remember in the dashboard we're actually accessing the user in the component.

18
00:01:07,590 --> 00:01:13,350
So not only we want to pass it into a loader, but also in the component.

19
00:01:13,530 --> 00:01:14,760
And I guess, you know what?

20
00:01:14,760 --> 00:01:16,220
Let's start from that.

21
00:01:16,230 --> 00:01:18,810
So I'm just going to navigate to app.

22
00:01:18,810 --> 00:01:21,540
JS I'm looking for my dashboard.

23
00:01:22,050 --> 00:01:28,680
So for starters, I can just pass here this query client That's going to be my prop.

24
00:01:29,370 --> 00:01:34,560
Then we want to invoke this one also passing the query client.

25
00:01:34,560 --> 00:01:41,820
And now let's quickly navigate back to the dashboard since at the moment we have a bug and basically

26
00:01:41,820 --> 00:01:43,350
where we have the loader.

27
00:01:43,900 --> 00:01:49,460
We want to turn it into a function which returns a function.

28
00:01:49,480 --> 00:01:52,420
Let me just add here the proper syntax.

29
00:01:52,420 --> 00:01:55,060
And once we have this functionality in place.

30
00:01:56,010 --> 00:02:00,600
Let's again set up this user query with a query key.

31
00:02:00,630 --> 00:02:02,070
With a query function.

32
00:02:02,070 --> 00:02:06,900
And basically this function again is going to return our data.

33
00:02:07,020 --> 00:02:10,830
So let's go to Dashboard layout.

34
00:02:11,250 --> 00:02:13,320
Let's set up the user query.

35
00:02:13,320 --> 00:02:14,550
So user.

36
00:02:15,310 --> 00:02:15,850
Query.

37
00:02:15,850 --> 00:02:17,620
That's going to be my object.

38
00:02:18,120 --> 00:02:20,340
In the object I have query key.

39
00:02:21,190 --> 00:02:22,870
I'll set it equal to my user.

40
00:02:22,870 --> 00:02:26,830
And then also I want to have the query function.

41
00:02:27,830 --> 00:02:32,090
And essentially, we can just set up here a sink.

42
00:02:33,270 --> 00:02:39,810
Then as far as the function body, I think I'm just going to grab this.

43
00:02:39,840 --> 00:02:47,760
Now, I will still place this in a try and catch though in the loader since if we get some kind of error,

44
00:02:47,760 --> 00:02:50,820
I want to redirect back to the dashboard.

45
00:02:50,820 --> 00:02:54,300
So that is not going to change basically the landing page.

46
00:02:54,300 --> 00:02:55,020
My apologies.

47
00:02:55,020 --> 00:02:56,660
I believe I said dashboard.

48
00:02:56,670 --> 00:02:59,700
So let's go back right now to a loader.

49
00:02:59,700 --> 00:03:04,650
We're looking for the query client, so that won't change.

50
00:03:04,800 --> 00:03:11,520
And then in the try and catch, we can also just directly return the query client.

51
00:03:11,550 --> 00:03:17,220
The only reason why I wasn't doing that in the stats page, I just wanted to demonstrate that of course

52
00:03:17,220 --> 00:03:22,140
we are not relying on this data over here, so let's go here with the return.

53
00:03:23,560 --> 00:03:29,260
Await then same method query client, then ensure.

54
00:03:30,290 --> 00:03:31,280
Query.

55
00:03:32,460 --> 00:03:37,410
And then theta, and then here we want to pass in the user query.

56
00:03:37,590 --> 00:03:40,110
And of course I want to access the user.

57
00:03:40,700 --> 00:03:47,960
Not from the loader, but actually I want to grab the query client and then remember we need to use

58
00:03:47,960 --> 00:03:48,770
use query.

59
00:03:48,770 --> 00:03:50,990
So hopefully my auto imports work.

60
00:03:50,990 --> 00:03:55,640
So use query and then we'll pass in the user query.

61
00:03:55,820 --> 00:03:59,870
And more specifically, the user is located in the data.

62
00:04:00,050 --> 00:04:04,370
So let me save, let me navigate back to my browser.

63
00:04:04,370 --> 00:04:11,420
If everything is correct, not only I'm going to have the stats one, but I'll also have the user one.

64
00:04:11,540 --> 00:04:18,230
So as I'm navigating around my project, actually we won't trigger that request again.

65
00:04:18,230 --> 00:04:20,269
Let me close this one.

66
00:04:20,450 --> 00:04:26,180
Let's inspect and we'll see that essentially we make that request, we grab the current user.

67
00:04:26,180 --> 00:04:34,250
But as I'm navigating around my project now, only the jobs request is the one that we keep making.

68
00:04:34,250 --> 00:04:40,040
The current user and stats are both cached and therefore we get the results immediately.