We have a new API route
that returns the cart items data.
Your next challenge is to call it
from the Cart page.
So you'll need to modify the code
in the CartPage.
In this file we somehow need to obtain
the "cartItems" data,
that will be an array.
But it's up to you to actually fetch the data.
We want to keep using React Query,
so you should call the "useQuery" hook here.
For now we can start by
simply logging this data to the console,
so we can check that we are getting
the expected "cartItems" array,
before we go on and display it on the page.
Once you've implemented the data fetching logic,
when you load the Cart page
you should see some messages in the console,
and these should include the "cartItems" array
you received from the API route.
This is the acceptance criteria for this challenge.
As usual, stop this video now
and go and write the code.
All right. Here's my solution.
We can call "useQuery",
passing "cartItems" as the key,
that seems a good name for describing this data.
And then we can use our "fetchJson" function
to call the "/api/cart" route.
The "data" property in the resulting "query" object
will be the "cartItems" we wanted.
This is the bare minimum
required to satisfy the challenge.
There's some other things we could do,
like check the query "isLoading" flag
and display a loading indicator
while the data is still being fetched.
And we could extract this logic
into a custom React hook.
If you did any those things, even better.
But as long as you can see the right data
logged to the browser console
you passed this challenge, so well done!