1 00:00:03,000 --> 00:00:05,279 We wrote some code to fetch the 2 00:00:05,279 --> 00:00:07,118 reviews from the CMS API, 3 00:00:07,191 --> 00:00:10,936 and we manually tested it as a standalone script, 4 00:00:10,936 --> 00:00:13,317 so that we could more easily see 5 00:00:13,317 --> 00:00:15,401 the data returned by Strapi. 6 00:00:15,475 --> 00:00:17,683 It's now time to go and modify 7 00:00:17,683 --> 00:00:19,818 the code called by our pages. 8 00:00:19,892 --> 00:00:23,141 First of all, let me restart the dev server, 9 00:00:23,141 --> 00:00:26,193 by running "npm run dev" as usual. 10 00:00:26,781 --> 00:00:30,068 Then I'm going to show the browser on one side, 11 00:00:30,068 --> 00:00:32,711 and make sure it reloaded the app. 12 00:00:33,068 --> 00:00:35,560 Now, we want the ReviewsPage to 13 00:00:35,560 --> 00:00:37,972 display the data from the CMS. 14 00:00:38,052 --> 00:00:40,224 Let's add a log statement here, 15 00:00:40,224 --> 00:00:42,829 showing when this component is rendered, 16 00:00:43,384 --> 00:00:45,502 and the "reviews" it received. 17 00:00:46,342 --> 00:00:48,103 At the moment it's loading 18 00:00:48,103 --> 00:00:49,865 the data from local files, 19 00:00:49,933 --> 00:00:53,269 and this is what each review object looks like. 20 00:00:53,269 --> 00:00:55,805 We'll want these same properties when 21 00:00:55,805 --> 00:00:57,929 fetching the data from the CMS. 22 00:00:57,998 --> 00:01:00,428 We can leave the "body" out since it's 23 00:01:00,428 --> 00:01:02,411 not actually used in this page. 24 00:01:02,475 --> 00:01:04,446 Let me copy these properties, 25 00:01:04,837 --> 00:01:08,070 and paste them in a comment before this function. 26 00:01:08,906 --> 00:01:12,658 We want to rewrite "getReviews" to call the CMS, 27 00:01:12,658 --> 00:01:15,584 but still return the same kind of data, 28 00:01:15,584 --> 00:01:18,574 so the page will keep working as it is. 29 00:01:18,574 --> 00:01:21,140 Let's start by returning an empty array, 30 00:01:21,603 --> 00:01:24,701 and the page temporarily shows no reviews. 31 00:01:24,701 --> 00:01:26,566 But now we can use the code 32 00:01:26,566 --> 00:01:28,292 we tested in this script. 33 00:01:28,361 --> 00:01:31,293 Let's start by importing the "qs" 34 00:01:31,293 --> 00:01:33,602 library into "reviews.js". 35 00:01:33,691 --> 00:01:36,397 Then, back to the "getReviews" function, 36 00:01:36,397 --> 00:01:39,946 we want to make a fetch call to the CMS url, 37 00:01:39,946 --> 00:01:42,258 so I'll copy all the code that 38 00:01:42,258 --> 00:01:44,031 gets the response body. 39 00:01:44,108 --> 00:01:46,394 Let me change the log statement 40 00:01:46,394 --> 00:01:47,870 to say "getReviews". 41 00:01:47,944 --> 00:01:51,049 And maybe I can simplify this code a little bit, 42 00:01:51,049 --> 00:01:53,855 by putting the question mark in the same string, 43 00:01:53,855 --> 00:01:55,726 without appending it separately. 44 00:01:55,785 --> 00:01:58,742 Anyway, what we want to do now in this function 45 00:01:58,742 --> 00:02:01,791 is return an array with all the right elements. 46 00:02:01,791 --> 00:02:03,729 Let's take another look at the 47 00:02:03,729 --> 00:02:05,603 response we get from the CMS. 48 00:02:05,667 --> 00:02:09,640 It's a JSON object that contains a "data" array, 49 00:02:09,640 --> 00:02:12,525 and each element in that array is an object 50 00:02:12,525 --> 00:02:16,209 that has "id" and "attributes" properties. 51 00:02:16,209 --> 00:02:18,936 We're not actually interested in the "id". 52 00:02:18,936 --> 00:02:22,537 We want the properties that are inside "attributes", 53 00:02:22,537 --> 00:02:23,645 like the "slug". 54 00:02:23,714 --> 00:02:25,976 So, how do we extract the right 55 00:02:25,976 --> 00:02:27,654 properties in our code? 56 00:02:27,727 --> 00:02:30,615 For a start, we could destructure the "body", 57 00:02:30,615 --> 00:02:32,990 that's the top-level response object, 58 00:02:33,054 --> 00:02:35,353 and take the "data" array. 59 00:02:35,353 --> 00:02:38,823 Then we can call the "map" method on the array, 60 00:02:38,823 --> 00:02:41,294 because we want to transform each 61 00:02:41,294 --> 00:02:43,090 item returned by the CMS 62 00:02:43,165 --> 00:02:45,748 into an object with the properties 63 00:02:45,748 --> 00:02:47,799 used by our page component. 64 00:02:47,875 --> 00:02:50,748 For example, we need a "slug" property, 65 00:02:50,748 --> 00:02:54,113 and we can get it from the "item.attributes". 66 00:02:54,113 --> 00:02:56,753 If we save, and look at the server logs, 67 00:02:56,753 --> 00:02:59,042 you can see that the "reviews" array 68 00:02:59,042 --> 00:03:02,053 contains objects with a "slug" property. 69 00:03:02,053 --> 00:03:05,987 So we are adapting the data returned by the CMS 70 00:03:05,987 --> 00:03:08,386 into simpler objects containing only 71 00:03:08,386 --> 00:03:10,718 the properties we need in our page. 72 00:03:10,784 --> 00:03:13,151 In fact, since all the CMS fields 73 00:03:13,151 --> 00:03:14,800 are inside "attributes" 74 00:03:14,872 --> 00:03:16,957 we could destructure each "item" 75 00:03:16,957 --> 00:03:18,781 and only keep that property, 76 00:03:18,846 --> 00:03:21,251 which simplifies the code a little. 77 00:03:21,534 --> 00:03:23,427 Now, let's repeat the same 78 00:03:23,427 --> 00:03:25,175 process for the "title". 79 00:03:25,248 --> 00:03:26,900 And if we save at this point, 80 00:03:27,788 --> 00:03:29,924 you can see that we return "slug" 81 00:03:29,924 --> 00:03:31,736 and "title" for each review. 82 00:03:31,801 --> 00:03:34,076 In fact, in the browser each card 83 00:03:34,076 --> 00:03:36,214 is now showing the right title, 84 00:03:36,283 --> 00:03:38,416 as returned by the CMS. 85 00:03:38,416 --> 00:03:40,558 So we are displaying the items 86 00:03:40,558 --> 00:03:41,986 fetched from Strapi. 87 00:03:42,057 --> 00:03:44,493 You may also have noticed that there's 88 00:03:44,493 --> 00:03:46,545 an error in the browser console. 89 00:03:46,609 --> 00:03:50,209 That's because it tried to prefetch a ReviewPage, 90 00:03:50,209 --> 00:03:52,852 but that won't work, because there 91 00:03:52,852 --> 00:03:54,795 is no local Markdown file 92 00:03:54,873 --> 00:03:58,467 that matches the "slug" returned by the CMS. 93 00:03:58,467 --> 00:04:01,778 We still need to update the "getReview" function 94 00:04:01,778 --> 00:04:04,060 to fetch the data from Strapi rather 95 00:04:04,060 --> 00:04:05,517 than from a local file. 96 00:04:05,581 --> 00:04:08,562 We'll take care of that later in this section. 97 00:04:08,801 --> 00:04:12,166 For now, we got the Reviews page to display 98 00:04:12,166 --> 00:04:14,670 the titles fetched from the CMS. 99 00:04:14,748 --> 00:04:16,700 We'll continue in the next video 100 00:04:16,700 --> 00:04:19,314 and make it display the images as well.