blog-with-comment issue mapping comments if `undefined` about next.js

[icyJoseph]

Hi,

The problem starts here:

• https://github.com/vercel/next.js/blob/canary/examples/blog-with-comment/lib/fetchComment.ts#L29
• For completeness sake that code is invoked in this API handler, https://github.com/vercel/next.js/blob/canary/examples/blog-with-comment/pages/api/comment.ts

We are hitting that line in the API route. Notably that returns a 400 with JSON payload.

Then when we SWR is used here:

• https://github.com/vercel/next.js/blob/canary/examples/blog-with-comment/hooks/useComment.ts#L6

We hit the second issue. fetch doesn't throw for 4xx range requests. A library such as axios does throw/error out for non 2xx status codes (let's not think of 3xx for now).

So when the fetcher does:

const fetcher = (url) => fetch(url).then((res) => res.json());

It'll simply decode the error message with error 400 we sent from the API route, and then pass that SWR, which puts it in the data state.

So comments is no longer an Array, but an Object, and you can see that if you debug the application:

And we can confirm our assumptions by looking at the network tab, where we see a 400 Bad Request, from
https://blog-with-comment.vercel.app/api/comment?url=%2Fapi%2Fcomment

I'll make a PR to fix this, so that it throws when 400 comes in.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.