Challenges

Add Optimistic UI Support

Error Handling

Try to add a comment without any content. You will get an error message like this:

This is an unhandled error. We need to handle it from our code. To do that, replace the createComment function call inside the handleAddComment function like this:

createComment(fakeComment)
    .catch(err => {
        mutate(currentComments => {
            const newComments = []
            for (const c of currentComments) {
                if (c.id === fakeComment.id) {
                    newComments.push({
                        ...fakeComment,
                        error: err.message
                    })
                } else {
                    newComments.push(c)
                }
            }

            return newComments
        }, false)
    })

(Here's the final version of the file after all these changes.)

As you can see, just like in the previous step, we iterate over the currently cached comments and add the error message to the comment.

After this change, when you a comment it will show something like this:

Q: Wow. How does it show a message like that?
authenticating...

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: