We are reimplementing the "getReviews" function
to fetch the data from Strapi.
At the moment we are returning review
objects with "slug" and "title".
We'll now add the other properties as well.
If we look at what we were returning
from the old code,
the next thing we need is the "date".
So let's add that property to
each object in the array.
As for its value however, there is no
"date" attribute in the CMS response.
Instead, there is one called "publishedAt".
So that's what we're going to use in our code:
"attributes.publishedAt".
Let's save, and check the values.
Each object does have a "date" property,
however the values also include
time and time zone.
While for our pages we need the date only.
What we could do is "slice"
the "publishedAt" string,
and take the characters from the beginning,
that is index 0,
up to the "length" of year, month, and day,
because this string is in the ISO date format.
Let's check if this works.
You can see that each date now only has year,
month, and day.
So that's the date sorted.
The last property we need is the "image".
Let's add that one as well.
As for the value, you may remember that
the image in Strapi is a relation,
that's returned as a nested object,
with its own data and attributes.
But in our application all we need is the "url".
So the value we want to set in our objects
is "attributes.image"
".data.attributes.url".
This way we should get the right property.
And in fact the "image" is set correctly.
But you can see in the browser console
that we have a few errors.
That's because it's trying to load each image
from the same website as the pages,
that is from localhost on port 3000.
But the images are not inside our Next.js app,
they're in Strapi.
So we'll need to change the image
URLs to include the CMS address,
otherwise the browser will think they're
relative to the same website.
Let's define a constant at
the top for the "CMS_URL",
because we'll need this same
string in a few places.
We use it in the "url" we pass to "fetch",
provided that we change this string
to be backtick-delimited.
And then we can prepend the same
address to each image "url".
This way it should become an absolute URL,
and in fact you can already
see the images on the page.
But let's check the server logs as well.
Each image is now prefixed
with the Strapi address.
And that's why the browser
can load them correctly.
You can see that we have a nice
image for each review.
And this Reviews page is now fully working again,
but fetching the data from the CMS.
We can remove this comment now,
that was just to help us make sure
we returned the same properties as the old code.
Note how we are converting the
data returned by the CMS
into objects with only the properties
needed by our pages.
We could just display the data
from the CMS directly,
but it's better to have a layer of separation,
so that our pages don't directly depend on
whatever data format is used by Strapi.
But with this our "getReviews"
reimplementation is complete.
Of course, if we try opening an individual Review page,
that won't work,
because the "getReview" function
is still using local files.
In the next video we'll rewrite
that function as well
to fetch the data from the CMS instead.