Local data mutate and React state

[swand0g]

Hello SWR gurus,

Anybody have ideas about how to handle this scenario? Say I have some arbitrary text post component

function PostComponent() {
  const router = useRouter()
  const id = router?.query?.slug
  const { data } = useSWR(`/api/post/${id}`)
  const [isEditing, setIsEditing] = useState(false)

  return (
    <div>
      {isEditing ?
        <p> {data} </p> :
        <EditPostComponent />
      }
    </div>
  )
}

which uses SWR to display the post data and conditionally renders an edit component (controlled by isEditing) for that text:

function EditPostComponent({ setIsEditing }) {
  const router = useRouter()
  const id = router?.query?.slug
  const { data, mutate } = useSWR(`/api/post/${id}`)

  const onSubmit = () => {
    mutate({ ...data, ...someNewData }, false)
    setIsEditing(false)
  }

  return (
    <some-input-for-data onSubmit={onSubmit}>
      ...
    </some-input-for-data>
  )
}

Upon submission of the user's input, we call mutate with local data (and revalidation disabled), then set isEditing to false, and expect the "post" to display that new data sent to mutate. The issue is that mutate does update the cache, but changing isEditing causes a re-render, which then causes the original SWR call to revalidate. If the API has not yet updated with the new data (maybe it's a slow server), then it will revalidate with the old data, undoing the local data mutate.

Any ideas about how you might approach this scenario? Am I missing something about the shouldRevalidate option in mutate?

[GustavoStraub]

Try using this way, so you can make sure the swr will get from the cache instead

const { data, mutate } = useSWR(/api/post/${id}, { revalidateIfStale: false,
revalidateOnFocus: false,
revalidateOnReconnect: false })