We modified the ProductPage
to return "notFound" if an error occurs
while fetching the product data.
But we've also seen that this can have
unintended consequences
if we're not careful in our code.
By returning a 404 whenever any error occurs
we may end up returning a page not found
even for a valid product,
simply because the Next.js app
cannot connect to the CMS.
Now, let me restart Strapi
and see how we can avoid this problem.
In the ProductPage, instead of
returning "notFound" for all errors,
we'll need a way to check
which kind of error occurred.
And this means we'll need to modify
our "getProduct" function accordingly.
Now, I'm currently running
the production Next.js server.
Let me stop that,
and start the dev server instead.
Before we improve our error handling,
I'd like to do some refactoring
We have two functions here,
"getProduct" and "getProducts"
that both make an HTTP request,
but repeat the same code each time.
So, for a start, I'll actually
move this "stripProduct" function at the bottom,
so it's out of the way.
And at the top I want to add a new function
with the common code to make an HTTP request.
Let's call it "fetchJson",
since we always expect a JSON response.
And we'll pass the "url" as argument.
The body of this function will be
similar to what we do in "getProduct",
Except that we want to pass
the "url" parameter to "fetch",
and also we want to return the parsed JSON.
Ok. At this point we can call "fetchJson"
from "getProduct",
and "fetchJson" already returns
the parsed product data,
so we can remove these other lines.
Now we can do the same thing in "getProducts":
call "fetchJson",
that will return the "products" directly.
Note that "getProducts" wasn't even checking
if the response was "ok",
but now it will get it for free
by using the common "fetchJson" function.
Let's save, and quickly check that
we didn't break anything with our refactoring.
The HomePage is fine.
And the ProductPage as well.
The next thing I'd like to do
is extract that common function
into a separate module,
because it's not specific to products.
Let's create an "api" module,
with functions useful for calling any API.
And we can simply move the "fetchJson" function
from "products" to "api".
Now, if it's in its own module
we need to export it,
so that we can then import it
into the "products" module.
There you go.
Let's check that the app still works.
That's fine.
Another improvement we can make
is extract this common URL,
that's the same for all API calls.
Let's call it the "CMS_URL".
And then we can insert it as a placeholder
into the "getProduct" call.
Same for "getProducts", but first we need
to change this string to be backtick-delimited,
otherwise the placeholder won't be replaced.
Ok. Let's make sure once more that
everything is still working.
Which is certainly is.
So we haven't actually changed
the behaviour of our code in this video,
but from time to time it's necessary
to do some refactoring, to keep the code clean.
And it's good that we have extracted
the logic to make an HTTP request
into its own separate module,
because this way we can add
all the right error handling in this place,
which is what we'll do in the next step.