1
00:00:03,000 --> 00:00:06,124
We are reimplementing the "getReviews" function

2
00:00:06,124 --> 00:00:08,497
to fetch the data from Strapi.

3
00:00:08,497 --> 00:00:10,875
At the moment we are returning review

4
00:00:10,875 --> 00:00:12,931
objects with "slug" and "title".

5
00:00:12,995 --> 00:00:15,717
We'll now add the other properties as well.

6
00:00:15,717 --> 00:00:18,193
If we look at what we were returning

7
00:00:18,193 --> 00:00:19,431
from the old code,

8
00:00:19,500 --> 00:00:22,403
the next thing we need is the "date".

9
00:00:22,403 --> 00:00:24,462
So let's add that property to

10
00:00:24,462 --> 00:00:26,236
each object in the array.

11
00:00:26,307 --> 00:00:29,097
As for its value however, there is no

12
00:00:29,097 --> 00:00:31,888
"date" attribute in the CMS response.

13
00:00:31,963 --> 00:00:35,232
Instead, there is one called "publishedAt".

14
00:00:35,232 --> 00:00:37,929
So that's what we're going to use in our code:

15
00:00:37,929 --> 00:00:40,710
"attributes.publishedAt".

16
00:00:40,710 --> 00:00:43,071
Let's save, and check the values.

17
00:00:43,071 --> 00:00:46,006
Each object does have a "date" property,

18
00:00:46,006 --> 00:00:48,913
however the values also include

19
00:00:48,913 --> 00:00:50,695
time and time zone.

20
00:00:50,788 --> 00:00:54,055
While for our pages we need the date only.

21
00:00:54,055 --> 00:00:56,222
What we could do is "slice"

22
00:00:56,222 --> 00:00:58,228
the "publishedAt" string,

23
00:00:58,308 --> 00:01:01,425
and take the characters from the beginning,

24
00:01:01,425 --> 00:01:02,585
that is index 0,

25
00:01:02,657 --> 00:01:06,266
up to the "length" of year, month, and day,

26
00:01:06,465 --> 00:01:10,311
because this string is in the ISO date format.

27
00:01:10,311 --> 00:01:12,068
Let's check if this works.

28
00:01:12,068 --> 00:01:15,455
You can see that each date now only has year,

29
00:01:15,455 --> 00:01:16,584
month, and day.

30
00:01:16,659 --> 00:01:18,781
So that's the date sorted.

31
00:01:18,781 --> 00:01:21,625
The last property we need is the "image".

32
00:01:21,625 --> 00:01:23,522
Let's add that one as well.

33
00:01:23,912 --> 00:01:26,433
As for the value, you may remember that

34
00:01:26,433 --> 00:01:29,057
the image in Strapi is a relation,

35
00:01:29,057 --> 00:01:31,494
that's returned as a nested object,

36
00:01:31,494 --> 00:01:33,792
with its own data and attributes.

37
00:01:33,861 --> 00:01:37,254
But in our application all we need is the "url".

38
00:01:37,254 --> 00:01:40,045
So the value we want to set in our objects

39
00:01:40,045 --> 00:01:42,381
is "attributes.image"

40
00:01:42,460 --> 00:01:45,849
".data.attributes.url".

41
00:01:45,858 --> 00:01:48,440
This way we should get the right property.

42
00:01:48,440 --> 00:01:51,333
And in fact the "image" is set correctly.

43
00:01:51,333 --> 00:01:53,775
But you can see in the browser console

44
00:01:53,775 --> 00:01:55,447
that we have a few errors.

45
00:01:55,511 --> 00:01:58,714
That's because it's trying to load each image

46
00:01:58,714 --> 00:02:01,206
from the same website as the pages,

47
00:02:01,277 --> 00:02:04,664
that is from localhost on port 3000.

48
00:02:04,664 --> 00:02:08,144
But the images are not inside our Next.js app,

49
00:02:08,144 --> 00:02:09,505
they're in Strapi.

50
00:02:09,580 --> 00:02:12,281
So we'll need to change the image

51
00:02:12,281 --> 00:02:14,900
URLs to include the CMS address,

52
00:02:14,982 --> 00:02:17,634
otherwise the browser will think they're

53
00:02:17,634 --> 00:02:19,557
relative to the same website.

54
00:02:19,623 --> 00:02:21,612
Let's define a constant at

55
00:02:21,612 --> 00:02:23,602
the top for the "CMS_URL",

56
00:02:23,678 --> 00:02:25,494
because we'll need this same

57
00:02:25,494 --> 00:02:26,986
string in a few places.

58
00:02:27,050 --> 00:02:29,930
We use it in the "url" we pass to "fetch",

59
00:02:30,459 --> 00:02:32,983
provided that we change this string

60
00:02:32,983 --> 00:02:34,786
to be backtick-delimited.

61
00:02:34,858 --> 00:02:37,245
And then we can prepend the same

62
00:02:37,245 --> 00:02:39,334
address to each image "url".

63
00:02:39,408 --> 00:02:42,619
This way it should become an absolute URL,

64
00:02:42,619 --> 00:02:44,218
and in fact you can already

65
00:02:44,218 --> 00:02:45,818
see the images on the page.

66
00:02:45,877 --> 00:02:48,594
But let's check the server logs as well.

67
00:02:48,594 --> 00:02:50,430
Each image is now prefixed

68
00:02:50,430 --> 00:02:52,124
with the Strapi address.

69
00:02:52,195 --> 00:02:53,941
And that's why the browser

70
00:02:53,941 --> 00:02:55,554
can load them correctly.

71
00:02:55,621 --> 00:02:57,688
You can see that we have a nice

72
00:02:57,688 --> 00:02:59,156
image for each review.

73
00:02:59,222 --> 00:03:03,157
And this Reviews page is now fully working again,

74
00:03:03,157 --> 00:03:05,826
but fetching the data from the CMS.

75
00:03:05,826 --> 00:03:08,017
We can remove this comment now,

76
00:03:08,017 --> 00:03:10,620
that was just to help us make sure

77
00:03:10,620 --> 00:03:14,038
we returned the same properties as the old code.

78
00:03:14,038 --> 00:03:16,444
Note how we are converting the

79
00:03:16,444 --> 00:03:18,370
data returned by the CMS

80
00:03:18,450 --> 00:03:21,559
into objects with only the properties

81
00:03:21,559 --> 00:03:23,240
needed by our pages.

82
00:03:23,324 --> 00:03:25,494
We could just display the data

83
00:03:25,494 --> 00:03:27,086
from the CMS directly,

84
00:03:27,158 --> 00:03:30,390
but it's better to have a layer of separation,

85
00:03:30,390 --> 00:03:33,714
so that our pages don't directly depend on

86
00:03:33,714 --> 00:03:36,801
whatever data format is used by Strapi.

87
00:03:36,880 --> 00:03:39,183
But with this our "getReviews"

88
00:03:39,183 --> 00:03:41,410
reimplementation is complete.

89
00:03:41,486 --> 00:03:45,410
Of course, if we try opening an individual Review page,

90
00:03:45,410 --> 00:03:46,551
that won't work,

91
00:03:46,622 --> 00:03:48,851
because the "getReview" function

92
00:03:48,851 --> 00:03:50,732
is still using local files.

93
00:03:50,802 --> 00:03:52,866
In the next video we'll rewrite

94
00:03:52,866 --> 00:03:54,264
that function as well

95
00:03:54,331 --> 00:03:57,101
to fetch the data from the CMS instead.