1
00:00:03,000 --> 00:00:04,834
We have a new API route

2
00:00:04,834 --> 00:00:07,467
that returns the cart items data.

3
00:00:08,047 --> 00:00:10,222
Your next challenge is to call it

4
00:00:10,222 --> 00:00:11,475
from the Cart page.

5
00:00:12,041 --> 00:00:14,445
So you'll need to modify the code

6
00:00:14,445 --> 00:00:15,611
in the CartPage.

7
00:00:16,184 --> 00:00:19,158
In this file we somehow need to obtain

8
00:00:19,158 --> 00:00:20,802
the "cartItems" data,

9
00:00:21,381 --> 00:00:22,387
that will be an array.

10
00:00:22,887 --> 00:00:25,980
But it's up to you to actually fetch the data.

11
00:00:26,480 --> 00:00:28,695
We want to keep using React Query,

12
00:00:28,695 --> 00:00:31,561
so you should call the "useQuery" hook here.

13
00:00:32,127 --> 00:00:33,568
For now we can start by

14
00:00:33,568 --> 00:00:36,075
simply logging this data to the console,

15
00:00:37,493 --> 00:00:39,588
so we can check that we are getting

16
00:00:39,588 --> 00:00:41,444
the expected "cartItems" array,

17
00:00:42,004 --> 00:00:44,662
before we go on and display it on the page.

18
00:00:45,162 --> 00:00:48,004
Once you've implemented the data fetching logic,

19
00:00:48,504 --> 00:00:49,945
when you load the Cart page

20
00:00:49,945 --> 00:00:52,294
you should see some messages in the console,

21
00:00:52,848 --> 00:00:55,835
and these should include the "cartItems" array

22
00:00:55,835 --> 00:00:57,913
you received from the API route.

23
00:00:58,478 --> 00:01:01,654
This is the acceptance criteria for this challenge.

24
00:01:02,154 --> 00:01:05,542
As usual, stop this video now

25
00:01:05,542 --> 00:01:08,580
and go and write the code.

26
00:01:09,197 --> 00:01:10,969
All right. Here's my solution.

27
00:01:11,469 --> 00:01:13,147
We can call "useQuery",

28
00:01:13,147 --> 00:01:15,409
passing "cartItems" as the key,

29
00:01:15,409 --> 00:01:18,912
that seems a good name for describing this data.

30
00:01:18,912 --> 00:01:22,123
And then we can use our "fetchJson" function

31
00:01:22,123 --> 00:01:24,313
to call the "/api/cart" route.

32
00:01:24,313 --> 00:01:28,034
The "data" property in the resulting "query" object

33
00:01:28,034 --> 00:01:30,516
will be the "cartItems" we wanted.

34
00:01:31,454 --> 00:01:32,963
This is the bare minimum

35
00:01:32,963 --> 00:01:35,102
required to satisfy the challenge.

36
00:01:35,665 --> 00:01:38,227
There's some other things we could do,

37
00:01:38,227 --> 00:01:40,723
like check the query "isLoading" flag

38
00:01:40,723 --> 00:01:42,814
and display a loading indicator

39
00:01:42,814 --> 00:01:45,377
while the data is still being fetched.

40
00:01:45,377 --> 00:01:47,467
And we could extract this logic

41
00:01:47,467 --> 00:01:49,153
into a custom React hook.

42
00:01:49,153 --> 00:01:51,919
If you did any those things, even better.

43
00:01:51,919 --> 00:01:54,684
But as long as you can see the right data

44
00:01:54,684 --> 00:01:56,640
logged to the browser console

45
00:01:56,640 --> 00:01:59,338
you passed this challenge, so well done!