1
00:00:03,000 --> 00:00:04,738
In our application so far

2
00:00:04,738 --> 00:00:08,077
we have some basic authentication functionality.

3
00:00:08,647 --> 00:00:12,190
And it's working fine, but it has a few limitations.

4
00:00:12,690 --> 00:00:14,897
Let's monitor the API requests.

5
00:00:15,756 --> 00:00:17,269
When we load the page

6
00:00:17,269 --> 00:00:19,933
we make a request to the "user" route

7
00:00:19,933 --> 00:00:23,533
which returns 401 because we're not authenticated.

8
00:00:24,177 --> 00:00:26,177
If we then open a product page,

9
00:00:26,177 --> 00:00:29,661
this will make another request to the "user" resource.

10
00:00:30,225 --> 00:00:32,438
And if we go back to the HomePage,

11
00:00:32,438 --> 00:00:35,106
again this will make yet another request.

12
00:00:35,671 --> 00:00:38,459
We could reduce the number of requests

13
00:00:38,459 --> 00:00:41,614
we send to the API by caching the response.

14
00:00:42,187 --> 00:00:45,195
So this is one possible improvement we could make.

15
00:00:45,695 --> 00:00:47,028
Another thing is that,

16
00:00:47,028 --> 00:00:48,907
if we look at the Sign In page,

17
00:00:48,907 --> 00:00:50,421
in the code for this page

18
00:00:51,295 --> 00:00:53,613
we had to create a "status" variable

19
00:00:53,613 --> 00:00:56,445
to keep track of the sign in request status.

20
00:00:57,009 --> 00:00:59,851
And then when we send the API request

21
00:00:59,851 --> 00:01:02,001
we had to update that status

22
00:01:02,001 --> 00:01:06,148
setting the "loading" and "error" flags appropriately.

23
00:01:06,801 --> 00:01:08,793
This is something we need to do

24
00:01:08,793 --> 00:01:11,683
pretty much whenever we make an HTTP request.

25
00:01:12,247 --> 00:01:15,079
For example in our website we'll want to add

26
00:01:15,079 --> 00:01:16,880
a registration page as well.

27
00:01:16,880 --> 00:01:19,840
Now, I'm not actually going to write that page

28
00:01:19,840 --> 00:01:23,315
because it would be very similar to this Sign In page.

29
00:01:23,315 --> 00:01:26,596
But you can do that if you want to, as an exercise.

30
00:01:27,353 --> 00:01:29,698
In any case, in a registration page

31
00:01:29,698 --> 00:01:33,249
we would also need to handle loading and error states

32
00:01:33,249 --> 00:01:34,656
just like we do here.

33
00:01:34,656 --> 00:01:37,470
And it would be good to be able to do that

34
00:01:37,470 --> 00:01:40,753
without having to repeat all the same code again.

35
00:01:41,521 --> 00:01:42,892
So that's a second point.

36
00:01:43,621 --> 00:01:46,427
Another limitation of using "useState"

37
00:01:46,427 --> 00:01:49,380
and "useEffect" to make requests is that

38
00:01:49,953 --> 00:01:53,645
this way this "user" data that we fetch from the API

39
00:01:53,645 --> 00:01:56,201
is only available in this component.

40
00:01:56,201 --> 00:01:59,396
What if we wanted to display the user details

41
00:01:59,396 --> 00:02:01,455
in another component as well?

42
00:02:02,167 --> 00:02:05,016
Suppose we wanted to show the user name

43
00:02:05,016 --> 00:02:08,009
in the ProductPage component for example.

44
00:02:08,583 --> 00:02:10,170
If we go to a product page,

45
00:02:12,149 --> 00:02:13,782
maybe next to the price

46
00:02:13,782 --> 00:02:16,692
we could say that this is a special offer

47
00:02:16,692 --> 00:02:18,041
just for this user!

48
00:02:18,682 --> 00:02:21,996
Now, this is a bit of a silly example of course,

49
00:02:21,996 --> 00:02:24,412
but it is a very common requirement

50
00:02:24,412 --> 00:02:26,689
to be able to share the same data

51
00:02:26,689 --> 00:02:29,381
across multiple components in your app.

52
00:02:29,381 --> 00:02:32,073
And there are in fact various solutions

53
00:02:32,073 --> 00:02:33,454
to do what in React.

54
00:02:33,454 --> 00:02:35,732
Using just the core React library

55
00:02:35,732 --> 00:02:38,493
you can share some data using a Context,

56
00:02:38,493 --> 00:02:40,978
or you could install one of the many

57
00:02:40,978 --> 00:02:44,015
"state management" libraries, such as Redux.

58
00:02:44,015 --> 00:02:46,914
But in this case the data we want to share

59
00:02:46,914 --> 00:02:48,570
comes from a remote API,

60
00:02:49,829 --> 00:02:52,445
and there are libraries that can help

61
00:02:52,445 --> 00:02:54,990
with these very common requirements.

62
00:02:54,990 --> 00:02:58,453
One of them is "SWR", which is written by Vercel,

63
00:02:58,453 --> 00:03:00,715
the same company behind Next.js.

64
00:03:01,427 --> 00:03:04,905
"SWR" stands for "stale-while-revalidate",

65
00:03:05,405 --> 00:03:08,069
which is a reference to the fact that

66
00:03:08,069 --> 00:03:09,796
when you cache some data

67
00:03:09,796 --> 00:03:12,531
it will return the old or "stale" data

68
00:03:12,531 --> 00:03:15,050
while it refreshes or "revalidates"

69
00:03:15,050 --> 00:03:16,850
the data from the server.

70
00:03:17,637 --> 00:03:20,368
Another library, that's grown massively

71
00:03:20,368 --> 00:03:23,099
in popularity recently, is React Query.

72
00:03:23,669 --> 00:03:28,067
Both SWR and React Query take a very similar approach,

73
00:03:28,567 --> 00:03:31,126
but React Query offers a few more features,

74
00:03:31,126 --> 00:03:33,505
so this is the one I'm going to show you

75
00:03:33,505 --> 00:03:34,398
in our example.

76
00:03:35,016 --> 00:03:36,228
So let's go and see

77
00:03:36,228 --> 00:03:39,098
how to set up React Query in our application.

78
00:03:39,662 --> 00:03:42,864
As usual, we'll need to install an npm package,

79
00:03:42,864 --> 00:03:44,772
so I stopped the dev server,

80
00:03:44,772 --> 00:03:48,247
and let me show the "dependencies" in package.json.

81
00:03:48,884 --> 00:03:52,363
Now we can run "npm install react-query".

82
00:03:55,050 --> 00:03:57,067
It's been installed successfully.

83
00:03:57,067 --> 00:03:58,900
Let's re-launch "npm run dev".

84
00:04:01,050 --> 00:04:03,852
And to use React Query we first need to

85
00:04:03,852 --> 00:04:06,583
set it up globally in our application.

86
00:04:06,583 --> 00:04:09,098
Something that in Next.js we can do

87
00:04:09,098 --> 00:04:11,110
in the custom App component.

88
00:04:11,826 --> 00:04:13,898
So here we first want to create

89
00:04:13,898 --> 00:04:15,837
an instance of "QueryClient",

90
00:04:18,125 --> 00:04:21,869
that is a class exported by the "react-query" module,

91
00:04:21,869 --> 00:04:24,906
and provides functionality such as caching.

92
00:04:25,477 --> 00:04:28,226
Then we want to make this instance available

93
00:04:28,226 --> 00:04:30,163
to any component inside our App

94
00:04:30,726 --> 00:04:32,899
by wrapping everything inside

95
00:04:32,899 --> 00:04:34,997
a "QueryClientProvider" tag,

96
00:04:35,572 --> 00:04:37,277
that I'll have to import manually.

97
00:04:38,972 --> 00:04:42,450
So QueryClientProvider expects a "client" prop,

98
00:04:42,450 --> 00:04:45,336
that will be the "queryClient" instance

99
00:04:45,336 --> 00:04:46,594
we created above.

100
00:04:47,243 --> 00:04:49,009
This way we'll be able to use

101
00:04:49,009 --> 00:04:50,776
the React Query functionality

102
00:04:50,776 --> 00:04:52,665
from any one of our components.

103
00:04:52,665 --> 00:04:55,833
We'll see a first example of that in the next video.