Challenges

Add Optimistic UI Support

Add a Fake Comment

To add Optimistic UI support, we need to add a fake comment to the client-side cache while the comment is saving. Before we discuss further, let's add this fake comment.

To do that, open the components/Comments.js file & add the following import:

import { useSession } from 'next-auth/client'

Then get the session on the top of the Comments React component with:

const [session] = useSession()

Finally, replace the function handleAddComment with the following:

const handleAddComment = async (content) => {
    const fakeComment = {
        id: Math.random(),
        userId: session.user.id,
        name: session.user.profile.name,
        avatar: session.user.profile.avatar,
        content,
        createdAt: Date.now(),
        clientOnly: true
    }

    mutate([...comments, fakeComment], false)
}

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

Now load a blog post and try to add a comment.

Q: What's your experience?
authenticating...

Here's another question for you:

Q: What's the functionality of `clientOnly: true` in the `fakeComment`?
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: