1
00:00:03,000 --> 00:00:04,895
We modified the ProductPage

2
00:00:04,895 --> 00:00:07,632
to return "notFound" if an error occurs

3
00:00:07,632 --> 00:00:09,878
while fetching the product data.

4
00:00:10,519 --> 00:00:13,339
But we've also seen that this can have

5
00:00:13,339 --> 00:00:15,046
unintended consequences

6
00:00:15,046 --> 00:00:17,496
if we're not careful in our code.

7
00:00:17,496 --> 00:00:20,762
By returning a 404 whenever any error occurs

8
00:00:20,762 --> 00:00:23,731
we may end up returning a page not found

9
00:00:23,731 --> 00:00:25,586
even for a valid product,

10
00:00:26,457 --> 00:00:28,490
simply because the Next.js app

11
00:00:28,490 --> 00:00:30,251
cannot connect to the CMS.

12
00:00:30,818 --> 00:00:32,680
Now, let me restart Strapi

13
00:00:32,680 --> 00:00:35,402
and see how we can avoid this problem.

14
00:00:35,402 --> 00:00:37,550
In the ProductPage, instead of

15
00:00:37,550 --> 00:00:40,128
returning "notFound" for all errors,

16
00:00:40,128 --> 00:00:41,919
we'll need a way to check

17
00:00:41,919 --> 00:00:43,995
which kind of error occurred.

18
00:00:44,853 --> 00:00:46,861
And this means we'll need to modify

19
00:00:46,861 --> 00:00:49,041
our "getProduct" function accordingly.

20
00:00:49,598 --> 00:00:51,138
Now, I'm currently running

21
00:00:51,138 --> 00:00:52,915
the production Next.js server.

22
00:00:53,474 --> 00:00:54,670
Let me stop that,

23
00:00:54,670 --> 00:00:56,992
and start the dev server instead.

24
00:00:56,992 --> 00:00:59,595
Before we improve our error handling,

25
00:00:59,595 --> 00:01:01,776
I'd like to do some refactoring

26
00:01:01,776 --> 00:01:03,675
We have two functions here,

27
00:01:03,675 --> 00:01:05,786
"getProduct" and "getProducts"

28
00:01:05,786 --> 00:01:07,967
that both make an HTTP request,

29
00:01:07,967 --> 00:01:10,429
but repeat the same code each time.

30
00:01:11,421 --> 00:01:13,222
So, for a start, I'll actually

31
00:01:13,222 --> 00:01:16,104
move this "stripProduct" function at the bottom,

32
00:01:16,104 --> 00:01:17,484
so it's out of the way.

33
00:01:18,688 --> 00:01:21,562
And at the top I want to add a new function

34
00:01:21,562 --> 00:01:24,570
with the common code to make an HTTP request.

35
00:01:25,137 --> 00:01:26,717
Let's call it "fetchJson",

36
00:01:26,717 --> 00:01:29,087
since we always expect a JSON response.

37
00:01:29,647 --> 00:01:32,021
And we'll pass the "url" as argument.

38
00:01:32,521 --> 00:01:34,267
The body of this function will be

39
00:01:34,267 --> 00:01:36,279
similar to what we do in "getProduct",

40
00:01:36,921 --> 00:01:38,588
Except that we want to pass

41
00:01:38,588 --> 00:01:40,502
the "url" parameter to "fetch",

42
00:01:42,187 --> 00:01:45,195
and also we want to return the parsed JSON.

43
00:01:46,720 --> 00:01:49,393
Ok. At this point we can call "fetchJson"

44
00:01:49,393 --> 00:01:50,566
from "getProduct",

45
00:01:52,420 --> 00:01:54,486
and "fetchJson" already returns

46
00:01:54,486 --> 00:01:56,086
the parsed product data,

47
00:01:56,086 --> 00:01:58,419
so we can remove these other lines.

48
00:01:59,053 --> 00:02:02,091
Now we can do the same thing in "getProducts":

49
00:02:02,091 --> 00:02:03,214
call "fetchJson",

50
00:02:03,214 --> 00:02:05,921
that will return the "products" directly.

51
00:02:05,921 --> 00:02:08,828
Note that "getProducts" wasn't even checking

52
00:02:08,828 --> 00:02:10,479
if the response was "ok",

53
00:02:10,479 --> 00:02:12,526
but now it will get it for free

54
00:02:12,526 --> 00:02:15,234
by using the common "fetchJson" function.

55
00:02:16,131 --> 00:02:18,067
Let's save, and quickly check that

56
00:02:18,067 --> 00:02:20,687
we didn't break anything with our refactoring.

57
00:02:22,830 --> 00:02:23,900
The HomePage is fine.

58
00:02:24,896 --> 00:02:26,066
And the ProductPage as well.

59
00:02:27,629 --> 00:02:29,701
The next thing I'd like to do

60
00:02:29,701 --> 00:02:31,915
is extract that common function

61
00:02:31,915 --> 00:02:33,558
into a separate module,

62
00:02:33,558 --> 00:02:36,272
because it's not specific to products.

63
00:02:36,986 --> 00:02:39,195
Let's create an "api" module,

64
00:02:39,195 --> 00:02:42,392
with functions useful for calling any API.

65
00:02:42,968 --> 00:02:46,153
And we can simply move the "fetchJson" function

66
00:02:46,153 --> 00:02:47,847
from "products" to "api".

67
00:02:49,102 --> 00:02:50,896
Now, if it's in its own module

68
00:02:50,896 --> 00:02:52,152
we need to export it,

69
00:02:53,068 --> 00:02:54,709
so that we can then import it

70
00:02:54,709 --> 00:02:56,237
into the "products" module.

71
00:02:57,701 --> 00:02:58,314
There you go.

72
00:02:58,314 --> 00:03:00,060
Let's check that the app still works.

73
00:03:01,634 --> 00:03:02,470
That's fine.

74
00:03:02,970 --> 00:03:05,218
Another improvement we can make

75
00:03:05,218 --> 00:03:07,176
is extract this common URL,

76
00:03:07,176 --> 00:03:09,642
that's the same for all API calls.

77
00:03:10,288 --> 00:03:12,361
Let's call it the "CMS_URL".

78
00:03:14,388 --> 00:03:16,975
And then we can insert it as a placeholder

79
00:03:16,975 --> 00:03:18,638
into the "getProduct" call.

80
00:03:19,588 --> 00:03:22,143
Same for "getProducts", but first we need

81
00:03:22,143 --> 00:03:25,073
to change this string to be backtick-delimited,

82
00:03:25,921 --> 00:03:28,562
otherwise the placeholder won't be replaced.

83
00:03:30,087 --> 00:03:31,873
Ok. Let's make sure once more that

84
00:03:31,873 --> 00:03:33,344
everything is still working.

85
00:03:35,120 --> 00:03:36,106
Which is certainly is.

86
00:03:37,586 --> 00:03:39,401
So we haven't actually changed

87
00:03:39,401 --> 00:03:41,822
the behaviour of our code in this video,

88
00:03:41,822 --> 00:03:44,001
but from time to time it's necessary

89
00:03:44,001 --> 00:03:46,846
to do some refactoring, to keep the code clean.

90
00:03:47,528 --> 00:03:49,951
And it's good that we have extracted

91
00:03:49,951 --> 00:03:52,172
the logic to make an HTTP request

92
00:03:52,172 --> 00:03:54,124
into its own separate module,

93
00:03:54,124 --> 00:03:55,941
because this way we can add

94
00:03:55,941 --> 00:03:58,836
all the right error handling in this place,

95
00:03:58,836 --> 00:04:01,528
which is what we'll do in the next step.