How can I implement optimistic UI updates with SWR in Next.js?

How can I implement optimistic UI updates with SWR in Next.js?

To implement optimistic UI updates with SWR in Next.js, you can use the mutate function to update the local data immediately.

Can you show me a code example of how to do that?

Sure! Here's a simple example:

import useSWR, { mutate } from 'swr';

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

function MyComponent() {
  const { data, error } = useSWR('/api/data', fetcher);

  const handleUpdate = async (newData) => {
    // Optimistically update the local data
    mutate('/api/data', { ...data, ...newData }, false);
    // Send the update to the server
    await fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify(newData),
    });
    // Revalidate the data
    mutate('/api/data');
  };

  return <button onClick={() => handleUpdate({ newField: 'value' })}>Update</button>;
}

What happens if the server request fails?

If the server request fails, you can handle the error by rolling back the optimistic update. You can do this by using the mutate function again to revert to the previous state.