We wrote some code to fetch the
reviews from the CMS API,
and we manually tested it as a standalone script,
so that we could more easily see
the data returned by Strapi.
It's now time to go and modify
the code called by our pages.
First of all, let me restart the dev server,
by running "npm run dev" as usual.
Then I'm going to show the browser on one side,
and make sure it reloaded the app.
Now, we want the ReviewsPage to
display the data from the CMS.
Let's add a log statement here,
showing when this component is rendered,
and the "reviews" it received.
At the moment it's loading
the data from local files,
and this is what each review object looks like.
We'll want these same properties when
fetching the data from the CMS.
We can leave the "body" out since it's
not actually used in this page.
Let me copy these properties,
and paste them in a comment before this function.
We want to rewrite "getReviews" to call the CMS,
but still return the same kind of data,
so the page will keep working as it is.
Let's start by returning an empty array,
and the page temporarily shows no reviews.
But now we can use the code
we tested in this script.
Let's start by importing the "qs"
library into "reviews.js".
Then, back to the "getReviews" function,
we want to make a fetch call to the CMS url,
so I'll copy all the code that
gets the response body.
Let me change the log statement
to say "getReviews".
And maybe I can simplify this code a little bit,
by putting the question mark in the same string,
without appending it separately.
Anyway, what we want to do now in this function
is return an array with all the right elements.
Let's take another look at the
response we get from the CMS.
It's a JSON object that contains a "data" array,
and each element in that array is an object
that has "id" and "attributes" properties.
We're not actually interested in the "id".
We want the properties that are inside "attributes",
like the "slug".
So, how do we extract the right
properties in our code?
For a start, we could destructure the "body",
that's the top-level response object,
and take the "data" array.
Then we can call the "map" method on the array,
because we want to transform each
item returned by the CMS
into an object with the properties
used by our page component.
For example, we need a "slug" property,
and we can get it from the "item.attributes".
If we save, and look at the server logs,
you can see that the "reviews" array
contains objects with a "slug" property.
So we are adapting the data returned by the CMS
into simpler objects containing only
the properties we need in our page.
In fact, since all the CMS fields
are inside "attributes"
we could destructure each "item"
and only keep that property,
which simplifies the code a little.
Now, let's repeat the same
process for the "title".
And if we save at this point,
you can see that we return "slug"
and "title" for each review.
In fact, in the browser each card
is now showing the right title,
as returned by the CMS.
So we are displaying the items
fetched from Strapi.
You may also have noticed that there's
an error in the browser console.
That's because it tried to prefetch a ReviewPage,
but that won't work, because there
is no local Markdown file
that matches the "slug" returned by the CMS.
We still need to update the "getReview" function
to fetch the data from Strapi rather
than from a local file.
We'll take care of that later in this section.
For now, we got the Reviews page to display
the titles fetched from the CMS.
We'll continue in the next video
and make it display the images as well.