We're now using the page number when
fetching data from the CMS,
which means that, if we click next,
we see different reviews on each page.
But we still have a small problem,
in that the user can navigate past the last page,
and we want to prevent that from happening.
We need to disable the Next link
if the user is already on the last page.
But to do that we first need to know
how many pages there are in total.
In fact, we could also display that information,
showing "Page 1 of" whatever the total number is.
The problem is, at the moment we just don't know.
We'll need to get that information from Strapi.
Let's reuse this standalone script,
that we wrote to test API requests.
But we want to use the same parameters
we're now passing in the "getReviews" function,
and see what response we get in this case.
We'll need to set the "pageSize" value,
and also the "page" number,
although it defaults to 1 anyway.
If we run the script in the terminal
this will save the Strapi response to a JSON file,
where we can easily see its full contents.
In addition to the "data" array,
the response also contains a "meta" object,
with some "pagination" values.
We can see that the total number of entries is 25,
and we could use that number to calculate
how many pages we need to display
all those entries.
But Strapi already returns a "pageCount" as well,
based on the "pageSize" parameter we passed,
so we can simply use that "pageCount" value.
We need our "getReviews" function to return
not just the array with all the reviews,
but also an additional value.
So let's change it to return an object,
containing a "reviews" array,
with the same data as before.
But then we can add a "pageCount" property.
Now, that value is returned in the
"meta" object in the response,
and we can access it as "meta.pagination.pageCount",
because in the response it's inside
the "pagination" object.
So that's how in "getReviews" we can return
both the "reviews" array and
the "pageCount" number.
Now, let me restart the dev server
so we can test this change.
Right now our page will probably be broken,
because it still assumes that "getReviews"
returns an array.
But we now get an object instead,
containing the "reviews" as a property.
So that was easy to fix.
But we'll need to do the same
in the HomePage as well,
because we also call "getReviews" in that page.
Let's update this code to destructure
the returned object,
and define the "reviews" array that way.
Ok, the Home page is working again.
Let's go back to Reviews now,
and finish what we started.
Our goal was to know how many
pages there are in total,
and we can now get that information
as the "pageCount" property.
Let's display that number in the pagination bar.
If we save,
it now shows that we're on "Page 1 of 5".
So we know that there are 5 pages in total,
and we'llÂ also be able to use that information
to disable the next link
once we reach the last page,
stopping the user from going too far.
But we'll do that part in the next video.
The important thing is that
we now have the "pageCount" information available.
In fact, we could test this a bit
more by changing the "PAGE_SIZE".
If we set it to "10" for example,
then there are 3 pages in total.
Because we have 25 entries in the CMS.
If we show 3 reviews per page,
then we'll need 9 pages to display all 25 entries.
So you can see that
Strapi returns the right "pageCount",
based on the "pageSize" parameter we pass.
All we had to do was
change "getReviews" to return an object,
containing both the "reviews" array
and the "pageCount" number.
And that's how we can receive that
information in the ReviewsPage.