How can I implement optimistic updates with SWR and TypeScript?

How can I implement optimistic updates with SWR and TypeScript?

To implement optimistic updates with SWR and TypeScript, you can use the mutate function to update the local data immediately.

Can you show me a code example?

Sure! Here's a simple example:

import useSWR, { mutate } from 'swr';

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

const Component = () => {
  const { data, error } = useSWR('/api/data', fetcher);

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

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

This code optimistically updates the data before the API call.

What if the API call fails?

If the API call fails, you can revert the optimistic update by using the mutate function again to restore the previous state. You can handle errors using a try-catch block.

Thanks! This is really helpful.