1
00:00:03,000 --> 00:00:06,374
Our "getReviews" function now calls Strapi,

2
00:00:06,374 --> 00:00:08,283
fetching the 6 reviews that

3
00:00:08,283 --> 00:00:09,980
we can see on this page,

4
00:00:10,050 --> 00:00:13,117
each one with its own title and image.

5
00:00:13,117 --> 00:00:16,372
If we try opening an individual review however,

6
00:00:16,372 --> 00:00:17,942
we'll now get an error,

7
00:00:17,942 --> 00:00:20,062
because it's still trying to

8
00:00:20,062 --> 00:00:22,107
load a local Markdown file,

9
00:00:22,183 --> 00:00:24,415
instead of calling the CMS.

10
00:00:24,415 --> 00:00:26,975
Let's go and open the ReviewPage.

11
00:00:27,495 --> 00:00:30,007
In this component we call "getReview"

12
00:00:30,007 --> 00:00:31,162
to load the data,

13
00:00:31,229 --> 00:00:34,094
and in that function we call "readFile".

14
00:00:34,094 --> 00:00:36,674
But, in the "content/reviews" folder,

15
00:00:36,674 --> 00:00:41,299
there is no file called "hades-2018.md",

16
00:00:41,299 --> 00:00:44,710
because that review is only available in the CMS.

17
00:00:44,710 --> 00:00:48,490
So, we'll need to rewrite the "getReview" function

18
00:00:48,490 --> 00:00:51,106
to fetch the data from Strapi as well.

19
00:00:51,106 --> 00:00:54,612
Let's start by testing the API call separately,

20
00:00:54,612 --> 00:00:57,293
using this "strapi-request" script.

21
00:00:57,472 --> 00:01:00,195
Let me put the response file on the side,

22
00:01:00,264 --> 00:01:02,489
and we can run the script in the Terminal

23
00:01:02,489 --> 00:01:05,507
by executing it directly with "node".

24
00:01:05,865 --> 00:01:08,748
Now, instead of fetching a list of reviews

25
00:01:08,748 --> 00:01:10,669
we want to get a single one,

26
00:01:10,738 --> 00:01:13,841
and each entry in the CMS has an "id".

27
00:01:13,841 --> 00:01:16,597
We can use that "id" in the URL,

28
00:01:16,597 --> 00:01:20,227
by requesting "/reviews/8" for example.

29
00:01:20,227 --> 00:01:23,360
Let me comment out all these parameters for now,

30
00:01:23,360 --> 00:01:25,657
and if we go and send the request.

31
00:01:26,380 --> 00:01:28,503
You can see that the "data" in the

32
00:01:28,503 --> 00:01:30,437
response is no longer an array,

33
00:01:30,500 --> 00:01:32,678
but a single review object.

34
00:01:32,678 --> 00:01:34,308
Now, the problem is that

35
00:01:34,308 --> 00:01:36,608
in our pages we don't actually

36
00:01:36,608 --> 00:01:38,218
know the review "id".

37
00:01:38,294 --> 00:01:42,305
We only have the "slug", like "hades-2018",

38
00:01:42,305 --> 00:01:45,077
that's what we get as the dynamic

39
00:01:45,077 --> 00:01:47,009
route param in Next.js.

40
00:01:47,093 --> 00:01:50,801
So, we cannot get a single review by "id".

41
00:01:50,801 --> 00:01:54,112
We'll need to keep requesting a list of entries,

42
00:01:54,112 --> 00:01:55,972
but then use "filters"

43
00:01:55,991 --> 00:01:59,213
to select only the entry with the right "slug".

44
00:01:59,213 --> 00:02:02,325
The way filters work in Strapi is that

45
00:02:02,325 --> 00:02:04,936
we can pass an object with conditions

46
00:02:04,936 --> 00:02:06,560
to apply to this field.

47
00:02:06,630 --> 00:02:11,002
One condition is "$eq", which means "equals".

48
00:02:11,002 --> 00:02:15,250
So we can say "slug" equals "hades-2018".

49
00:02:15,250 --> 00:02:18,877
And this should return only that specific review.

50
00:02:18,877 --> 00:02:21,858
You can see that "data" is again an array,

51
00:02:21,858 --> 00:02:24,207
because we requested an endpoint that

52
00:02:24,207 --> 00:02:25,986
can return multiple entries,

53
00:02:26,049 --> 00:02:27,790
but in this case the array

54
00:02:27,790 --> 00:02:29,530
contains a single element,

55
00:02:29,597 --> 00:02:32,659
that is the review with the "slug" we specified.

56
00:02:32,659 --> 00:02:36,159
In fact, the "pagination" values also show that

57
00:02:36,159 --> 00:02:38,523
there's just one entry in total

58
00:02:38,523 --> 00:02:40,430
that matches our filters.

59
00:02:40,506 --> 00:02:42,502
So this is how we can fetch

60
00:02:42,502 --> 00:02:44,424
a review given its "slug".

61
00:02:44,498 --> 00:02:46,505
Now, we'll still want to select

62
00:02:46,505 --> 00:02:48,058
only the fields we need.

63
00:02:48,123 --> 00:02:51,529
But for the ReviewPage we'll also need the "body",

64
00:02:51,529 --> 00:02:53,738
and we'll still want to populate

65
00:02:53,738 --> 00:02:55,187
the "image" relation.

66
00:02:55,256 --> 00:02:57,503
We don't need to sort, because

67
00:02:57,503 --> 00:02:59,450
we expect a single result.

68
00:02:59,525 --> 00:03:01,687
As for the "pagination" settings,

69
00:03:01,898 --> 00:03:05,381
by default the response includes a "total" count,

70
00:03:05,381 --> 00:03:09,474
but we know there will always be 1 entry at most

71
00:03:09,474 --> 00:03:11,504
that matches any given slug.

72
00:03:11,504 --> 00:03:14,544
So we could pass "pageSize: 1"

73
00:03:14,544 --> 00:03:17,290
and also set "withCount: false",

74
00:03:17,380 --> 00:03:20,166
that disables the "total" count.

75
00:03:20,166 --> 00:03:22,765
This is just a small optimization,

76
00:03:22,765 --> 00:03:25,773
because calculating the total probably requires

77
00:03:25,773 --> 00:03:27,886
a separate query to the database.

78
00:03:27,950 --> 00:03:30,508
Anyway, if we test our script again

79
00:03:30,508 --> 00:03:33,223
we now get only the fields we selected,

80
00:03:33,223 --> 00:03:35,283
and, in the pagination, there

81
00:03:35,283 --> 00:03:36,916
is no "total" any more.

82
00:03:36,987 --> 00:03:40,188
Ok, this is the API response we need.

83
00:03:40,188 --> 00:03:42,760
We can now use the same fetch request

84
00:03:42,760 --> 00:03:44,707
in the "getReview" function.

85
00:03:44,777 --> 00:03:47,347
Let's go and restart the dev server,

86
00:03:47,637 --> 00:03:49,794
by running "npm run dev".

87
00:03:50,659 --> 00:03:52,726
And I'll show the browser again.

88
00:03:53,619 --> 00:03:55,397
We're now ready to rewrite

89
00:03:55,397 --> 00:03:57,175
this "getReview" function.

90
00:03:57,244 --> 00:03:59,122
Actually, before we do that,

91
00:03:59,744 --> 00:04:02,508
the ReviewPage also uses "getSlugs",

92
00:04:02,508 --> 00:04:04,581
in addition to "getReview".

93
00:04:04,657 --> 00:04:07,390
If you remember, "getSlugs" is used

94
00:04:07,390 --> 00:04:09,420
by "generateStaticParams",

95
00:04:09,499 --> 00:04:12,258
to make Next.js generate static pages

96
00:04:12,258 --> 00:04:14,495
for all the available reviews.

97
00:04:14,570 --> 00:04:17,935
Let's comment out this "generateStaticParams"

98
00:04:17,935 --> 00:04:18,535
for now.

99
00:04:18,608 --> 00:04:22,053
This page will still work fine in the dev server;

100
00:04:22,053 --> 00:04:24,510
it's only when building for production

101
00:04:24,510 --> 00:04:26,967
that we want to generate static pages.

102
00:04:27,031 --> 00:04:29,259
This way we don't need to worry

103
00:04:29,259 --> 00:04:31,056
about "getSlugs" for now,

104
00:04:31,128 --> 00:04:34,328
we can reimplement only "getReview" first.

105
00:04:34,328 --> 00:04:37,043
And we'll continue with that in the next video.