T
TanStack•11mo ago
continuing-cyan

Best way to persists running mutations across mounts

Im running a mutation inside a "dialog" -, if the user closes the dialog, and then re-opens it, the mutation pending state is lost, which is to be expected. But what is best practice to handle such situations? I have experimented with various apporaches such as: - Setting a mutation key, and reading state using useMutationState in a sperate hook - Setting a mutation key, returning a different isPending boolean The two apporaches mainly differs in having one hook, or two hooks. Also. If i has a scope-id -, should the pending state persists across mounts/umounts? I would findt that intuitive, due to the its nature of not allowing more than one mutation running at a time anyways.
1 Reply
conscious-sapphire
conscious-sapphire•11mo ago
I'd have the 'useMutation' call outside the actual dialog and only pass in the 'mutate' function 
function DialogParent(){
  const [open, setOpen] = React.useState(false);
  const mutation = useMutation({
    mutationFn: whatever,
  });

  return <Dialog open={open} onClose={() => setOpen(false)} mutation={mutation.mutate}></Dialog>
}
function DialogParent(){
  const [open, setOpen] = React.useState(false);
  const mutation = useMutation({
    mutationFn: whatever,
  });

  return <Dialog open={open} onClose={() => setOpen(false)} mutation={mutation.mutate}></Dialog>
}

Did you find this page helpful?