1
00:00:03,000 --> 00:00:05,602
We wrote some initial code to fetch

2
00:00:05,602 --> 00:00:07,981
the reviews from the Strapi API.

3
00:00:08,055 --> 00:00:10,284
But at the moment we're getting a lot

4
00:00:10,284 --> 00:00:12,151
of data we don't actually need,

5
00:00:12,211 --> 00:00:14,982
like all the different image formats.

6
00:00:14,982 --> 00:00:18,526
There is a way to select only specific fields.

7
00:00:18,526 --> 00:00:20,793
If we look at the Strapi documentation,

8
00:00:20,793 --> 00:00:24,137
it provides a feature called "Field selection".

9
00:00:24,137 --> 00:00:26,646
When calling the API we can specify

10
00:00:26,646 --> 00:00:28,080
which fields we want

11
00:00:28,152 --> 00:00:31,374
by adding some parameters with the field names

12
00:00:31,374 --> 00:00:34,300
like, in this case, "title" and "body".

13
00:00:34,300 --> 00:00:36,991
Now, this query string in the URL

14
00:00:36,991 --> 00:00:39,437
is a way of encoding an array.

15
00:00:39,518 --> 00:00:41,408
It's easier to understand if we

16
00:00:41,408 --> 00:00:43,297
look at the JavaScript example.

17
00:00:43,358 --> 00:00:46,066
We can specify an array of "fields",

18
00:00:46,066 --> 00:00:48,894
and that array is then encoded in

19
00:00:48,894 --> 00:00:51,551
the URL using the "qs" library.

20
00:00:51,637 --> 00:00:55,382
So we'll want to use that library in our project.

21
00:00:55,382 --> 00:00:57,798
Let's go and add it to our dependencies.

22
00:00:58,142 --> 00:01:01,645
In the Terminal I'll run "npm install qs"

23
00:01:01,645 --> 00:01:04,349
and this will download the right package.

24
00:01:04,518 --> 00:01:07,273
Now let's see how to use it in our code.

25
00:01:07,811 --> 00:01:10,355
First of all we want to import "qs"

26
00:01:10,355 --> 00:01:12,899
from the module with the same name.

27
00:01:12,971 --> 00:01:15,775
And then we can use it to encode the

28
00:01:15,775 --> 00:01:18,267
parameters we append to the URL.

29
00:01:18,345 --> 00:01:21,115
We want to call "qs.stringify"

30
00:01:21,115 --> 00:01:24,095
passing an object with the Strapi parameters,

31
00:01:24,095 --> 00:01:26,498
but we also need a second object

32
00:01:26,498 --> 00:01:28,376
where to specify options.

33
00:01:28,451 --> 00:01:32,505
Here we need to set "encodeValuesOnly" to "true",

34
00:01:32,505 --> 00:01:36,149
which means it will not encode the parameter names,

35
00:01:36,149 --> 00:01:37,435
only their values.

36
00:01:37,507 --> 00:01:40,164
Anyway, among the API parameters

37
00:01:40,164 --> 00:01:42,490
we can set a "fields" array,

38
00:01:42,573 --> 00:01:45,402
listing which properties we want, like

39
00:01:45,402 --> 00:01:47,710
"slug" and "title" for example.

40
00:01:47,785 --> 00:01:50,474
Let me log the "url" to the console, so

41
00:01:50,474 --> 00:01:53,163
you can see what the "qs" library does.

42
00:01:53,232 --> 00:01:55,241
If we save, and go and run our

43
00:01:55,241 --> 00:01:56,848
"strapi-request" script,

44
00:01:56,914 --> 00:02:00,223
you can see that the data in the response only

45
00:02:00,223 --> 00:02:03,028
contains "slug" and "title" attributes.

46
00:02:03,100 --> 00:02:05,698
And you can also see how the "qs"

47
00:02:05,698 --> 00:02:07,745
library encoded the array:

48
00:02:07,824 --> 00:02:10,687
the first element is written as "fields"

49
00:02:10,687 --> 00:02:13,051
with zero inside square brackets,

50
00:02:13,122 --> 00:02:17,212
and the second element is "fields" at index 1.

51
00:02:17,212 --> 00:02:20,145
This is how the "qs" library converts

52
00:02:20,145 --> 00:02:22,840
an array into multiple parameters.

53
00:02:22,920 --> 00:02:26,059
We don't need to worry too much about the details,

54
00:02:26,059 --> 00:02:28,698
we can just set the options in JavaScript,

55
00:02:28,698 --> 00:02:30,925
and the "qs" library will take

56
00:02:30,925 --> 00:02:32,559
care of encoding them.

57
00:02:32,633 --> 00:02:35,373
Now, let me request all the fields again,

58
00:02:35,373 --> 00:02:37,712
including populating the relations,

59
00:02:37,779 --> 00:02:39,805
so we can see all the available

60
00:02:39,805 --> 00:02:41,308
fields in the response.

61
00:02:41,373 --> 00:02:44,339
And we can then decide which ones to select,

62
00:02:44,339 --> 00:02:47,468
based on how we're going to use the data.

63
00:02:47,468 --> 00:02:49,706
When reading local files we were

64
00:02:49,706 --> 00:02:51,594
returning these properties.

65
00:02:51,664 --> 00:02:53,813
We don't actually need the "body"

66
00:02:53,813 --> 00:02:55,440
when listing the reviews,

67
00:02:55,505 --> 00:02:59,094
it's only used when displaying a specific review.

68
00:02:59,094 --> 00:03:01,749
So when calling the API we certainly

69
00:03:01,749 --> 00:03:03,519
want "slug" and "title".

70
00:03:03,593 --> 00:03:07,678
Now, the CMS data also includes a "subtitle";

71
00:03:07,678 --> 00:03:10,136
let's add that field as well, even though

72
00:03:10,136 --> 00:03:11,875
we're not currently using it.

73
00:03:11,935 --> 00:03:14,042
It will be useful later on.

74
00:03:14,042 --> 00:03:16,124
Next, we need a "date".

75
00:03:16,124 --> 00:03:18,605
But there isn't a "date" property

76
00:03:18,605 --> 00:03:20,108
in the CMS response.

77
00:03:20,183 --> 00:03:23,542
There is however a field called "publishedAt",

78
00:03:23,542 --> 00:03:26,130
that is the date and time of when

79
00:03:26,130 --> 00:03:28,013
the entry was published.

80
00:03:28,091 --> 00:03:31,651
So we can use that field as the review date.

81
00:03:31,651 --> 00:03:33,458
And then we need the "image",

82
00:03:33,458 --> 00:03:35,866
which is a bit more complex because

83
00:03:35,866 --> 00:03:37,311
it's a nested object.

84
00:03:37,380 --> 00:03:39,397
All we need in our application

85
00:03:39,397 --> 00:03:41,280
is actually the image "url".

86
00:03:41,347 --> 00:03:44,003
So we want to select only that field.

87
00:03:44,003 --> 00:03:46,647
We can do that by changing the "populate"

88
00:03:46,647 --> 00:03:48,325
parameter to be an object,

89
00:03:48,389 --> 00:03:51,390
where we can include the "image" relation.

90
00:03:51,390 --> 00:03:54,630
And here we can pass options for this relation,

91
00:03:54,630 --> 00:03:56,966
like which "fields" to select.

92
00:03:56,966 --> 00:03:59,264
If we put "url" in this array, it

93
00:03:59,264 --> 00:04:01,563
should only return that property.

94
00:04:01,633 --> 00:04:04,254
Let's save, and test if it works.

95
00:04:04,254 --> 00:04:06,449
You can see that, for each element

96
00:04:06,449 --> 00:04:07,740
in the "data" array,

97
00:04:07,804 --> 00:04:11,384
it only returned the "attributes" we requested.

98
00:04:11,384 --> 00:04:14,034
And the "image" data only includes

99
00:04:14,034 --> 00:04:15,592
the "url" attribute.

100
00:04:15,670 --> 00:04:18,687
So this makes the response a lot smaller,

101
00:04:18,687 --> 00:04:20,808
which means the API request

102
00:04:20,808 --> 00:04:22,771
should be faster as well.

103
00:04:22,850 --> 00:04:25,520
Now, in addition to the "data" array,

104
00:04:25,520 --> 00:04:28,599
the response also contains a "meta" object,

105
00:04:28,599 --> 00:04:31,387
with some "pagination" values.

106
00:04:31,387 --> 00:04:36,321
By default, Strapi uses 25 as the "pageSize".

107
00:04:36,321 --> 00:04:40,373
This means it will return at most 25 entries.

108
00:04:40,373 --> 00:04:43,009
As it happens, there are exactly

109
00:04:43,009 --> 00:04:44,656
25 entries in total,

110
00:04:44,738 --> 00:04:46,689
but that's just a coincidence.

111
00:04:46,689 --> 00:04:49,450
We should really specify the "pageSize"

112
00:04:49,450 --> 00:04:51,928
explicitly when making the request,

113
00:04:51,999 --> 00:04:55,265
rather than relying on whatever the default is.

114
00:04:55,265 --> 00:04:57,883
So we can add a "pagination" parameter,

115
00:04:57,883 --> 00:05:00,226
setting the "pageSize" to

116
00:05:00,226 --> 00:05:03,576
let's say we only want 6 reviews initially.

117
00:05:03,576 --> 00:05:06,453
That's enough to display on the Reviews page.

118
00:05:06,453 --> 00:05:08,902
We can also pass a "page" number,

119
00:05:08,902 --> 00:05:11,094
but we'll implement full pagination

120
00:05:11,094 --> 00:05:12,284
in another section.

121
00:05:12,347 --> 00:05:14,234
For now we can just fetch a

122
00:05:14,234 --> 00:05:15,912
fixed number of reviews.

123
00:05:15,982 --> 00:05:18,950
You can see that "pageSize" is now 6,

124
00:05:18,950 --> 00:05:22,710
so, even though there are 25 entries in total,

125
00:05:22,710 --> 00:05:26,178
this response will only contain the first 6.

126
00:05:26,178 --> 00:05:28,118
Now, the last thing we want

127
00:05:28,118 --> 00:05:29,987
to do is sort the reviews.

128
00:05:30,058 --> 00:05:32,901
If you remember, in our existing pages

129
00:05:32,901 --> 00:05:35,594
we sorted them by most recent first.

130
00:05:35,669 --> 00:05:38,070
While this data is currently

131
00:05:38,070 --> 00:05:40,043
sorted by "id" I think.

132
00:05:40,129 --> 00:05:41,832
Certainly not by date,

133
00:05:41,832 --> 00:05:45,839
because the first entry was published on May 16th,

134
00:05:45,839 --> 00:05:48,415
while, if we scroll to the second entry,

135
00:05:48,415 --> 00:05:50,567
this one has May 9th,

136
00:05:50,567 --> 00:05:52,166
which is actually older,

137
00:05:52,166 --> 00:05:55,113
but the third one is May 18th,

138
00:05:55,113 --> 00:05:57,894
that's more recent than the first two.

139
00:05:57,894 --> 00:06:00,635
And the next one is somewhere in the middle.

140
00:06:00,635 --> 00:06:03,535
I set the dates when preparing this data

141
00:06:03,535 --> 00:06:06,225
making sure every review is published

142
00:06:06,225 --> 00:06:07,607
on a different day.

143
00:06:07,680 --> 00:06:10,239
Anyway, in our request parameters

144
00:06:10,239 --> 00:06:12,333
we can set a "sort" option,

145
00:06:12,410 --> 00:06:15,190
that must be an array listing which

146
00:06:15,190 --> 00:06:17,254
fields to use for sorting,

147
00:06:17,334 --> 00:06:19,734
so here we want "publishedAt".

148
00:06:19,734 --> 00:06:22,593
But we also want to append ":desc",

149
00:06:22,593 --> 00:06:24,849
that's short for "descending",

150
00:06:24,849 --> 00:06:27,144
which in this case means reverse

151
00:06:27,144 --> 00:06:28,578
chronological order.

152
00:06:28,649 --> 00:06:31,206
Let's see if this works as expected.

153
00:06:31,206 --> 00:06:33,350
The first review is now the

154
00:06:33,350 --> 00:06:35,415
one published on May 28th.

155
00:06:35,494 --> 00:06:37,268
Let's check the second one.

156
00:06:37,934 --> 00:06:40,026
This says May 27th,

157
00:06:40,026 --> 00:06:41,696
that is the day before.

158
00:06:41,696 --> 00:06:43,941
Then we have May 26th,

159
00:06:43,941 --> 00:06:45,982
that is again a day earlier,

160
00:06:45,982 --> 00:06:48,707
so looks like they're in the right order.

161
00:06:48,707 --> 00:06:51,670
And with this, we now have all the data we need

162
00:06:51,670 --> 00:06:54,804
to display the ReviewsPage in our website.

163
00:06:54,804 --> 00:06:57,496
In the next video we'll update our main

164
00:06:57,496 --> 00:06:59,982
application code to do exactly that.