Implementing optimistic updates with SWR

[frankdilo]

I have got this API that allows me to edit and list snippets:

• (a) GET /snippets/ gives me a list of snippets
• (b) PATCH /snippets/<id>/ allows me to edit a snippet

Based on snippet.include (a property), the snippet is included or not in the list of request (a). I can update snippet.include with request (b).

Let's suppose I am showing the snippets returned by (a) in a list:

const {data: snippets} = useSWR("/snippets/");

// show snippets in list

And that each snippet has a button to edit snippet.include with request (b):

const handleClickExclude = async (snippetId) => {
    await axios.patch(`/snippets/${snippetId}/`, {include: false})
    mutate("/snippets/", cached => cached.filter(snippet => snippet.id != snippetId) ); // (1)
};

<Snippet onClick={() => handleClickExclude(snippet.id)}/>

If I mutate on (1) also updating the cache, the snippets list gets updated, but only after the patch is finished and this does not feel instantaneous like optimistic updates should be. On the other end, if I move (1) one line up, the revalidation of /snippets/ happens before the patch of the individual snippet is completed and old data is fetched and rendered.

How I fixed this

I guess we need a way to mutate the cache without triggering the revalidation immediately for these optimistic update cases.

I came up with an hook for these situations.

export default function useMutableSWR(key) {
  const swr = useSWR(key);

  const [data, setData] = useState(swr.data);

  useEffect(() => {
    setData(swr.data);
  }, [swr.data]);

  return { ...swr, data, setData };
}

It works exactly as useSWR, but exposes a setData in the returned object. This allows me to update the displayed value immediately and decouple that from revalidation, like so:

const {data: snippets, setData: setSnippets} = useSWR("/snippets/");

// ...

const handleClickExclude = async (snippetId) => {
    setSnippets(snippets.filter(snippet => snippet.id !== snippedId));
    await axios.patch(`/snippets/${snippetId}/`, {include: false});
    mutate("/snippets/");
};

My Question

Is there a better way to handle this with the library itself?

[promer94]

I hope this example could help
https://github.com/vercel/swr/tree/master/examples/optimistic-ui-immer

[frankdilo]

It helped, thanks. For anyone stumbling into this, the solution is to do use one of the parameters of mutate, the last one, which defines wether to revalidate or not. mutate(key, value, false), changes the value in the cache, without triggering a revalidation with the server, so avoiding all problems I outlined above.