Mutating Data
It is possible to use the useSwr mutate function to mutate data on the client. The data-fetching hooks expose the "bound mutate" function from swr. Below is an example of optimistically updating the UI to like a post.
const LikePost = () => {
const { data, mutate } = usePost();
if (loading) {
return <Placeholder />
}
function like() {
if (!data) {
return;
}
// run an async function `makeRequestToLikePost`
// but update UI immediately with `optimisticData`
// once the async function resolves,
// it will revalidate the data from the server
// this assumes the next request to fetch the same post will
// return the updated count
mutate(() => makeRequestToLikePost(data.post.id), {
optimisticData: {
...data.post,
meta: {
...data.post.meta,
like_count: data.post.meta.like_count + 1
}
}
});
}
return <Heart count={data.post.meta.like_count} onClick={() => {like()}} />
}
In the example above we're assuming a post has a meta field called like_count
that holds the total number of likes the post has. When clicking the like button,
it will issue a remote fetch call to run the mutation on the server but update the UI immediately with `optimisticData``.
Once the remote mutation finishes running, another request will be issued by the framework to re-fetch the post, which we assume, will already have the updated like_count
.
If for some reason, anything fails with the remote mutation, when revalidating the data will roll back to the previous value.