Is there a way to stop useMutation from setting data to undefined before updating it to a new value?

[saadq]

I have more context in a StackOverflow question: https://stackoverflow.com/q/70224567/3533365

---

I have a mock mutation like so:

interface Person {
  firstName: string;
  lastName: string;
}

async function sendPersonApi({ firstName, lastName }: Person) {
  await new Promise((res) => setTimeout(res, 1000));
  return {
    firstName,
    lastName,
    status: "success"
  };
}

I have two components: <Form /> and <Output />. I basically want the mutation to run on form submit of the <Form />, and then show the result of that mutation in the <Output />.

I have a CodeSandbox with this behavior mostly working: https://codesandbox.io/s/long-worker-k350q?file=/src/App.tsx

Form

const personAtom = atom<Person>({
  firstName: "",
  lastName: ""
});

function Form() {
  const [formState, setFormState] = useAtom(personAtom);

  const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(
    (event) => {
      event.preventDefault();
      const formElement = event.currentTarget;
      const formData = new FormData(formElement);
      const firstName = formData.get("firstName") as string;
      const lastName = formData.get("lastName") as string;
      setFormState({ firstName, lastName }); // This does not update the `data`/`isLoading`/`isError` in the <Output /> component
    },
    [setFormState]
  );

  return (
    <form id="name-form" onSubmit={handleSubmit}>
      <input name="firstName" /> <br />
      <input name="lastName" /> <br />
      <button>Submit</button>
    </form>
  );
}

Output

function Output() {
  const [person] = useAtom(personAtom);
  const { mutate, data,  isLoading, isError } = useMutation(sendPersonApi, {
    mutationKey: "sendPerson"
  });

  useEffect(() => {
    mutate(person);
  }, [person]);

  return (
    <output name="name-output" form="name-form">
      <p>data: {JSON.stringify(data)}</p>
      <p>isLoading: {JSON.stringify(isLoading)}</p>
      <p>isError: {JSON.stringify(isError)}</p>
    </output>
  );
}

Initially, I had wanted to implement this by doing the mutation itself inside the <Form /> submit handler, but it seems like I was not be able to access the data/isLoading/isError in a different component even if I used the same mutationKey in useMutation.

So I ended up changing the implementation so that the submit handler just updates some global state (using jotai atoms), and then in the Output I have an effect that listens for changes to this global state and then calls mutate().

The problem now though is that the data always gets reset to undefined in every subsequent submit before getting a new value. Is there a way to stop useMutation from setting data to undefined before updating it to a new value?

Also, is there a cleaner way of using the result of a mutation in another component? I'd prefer to have the mutate() done inside the Form and then somehow use the data/isLoading/isError in a different component without having to rely on useEffect.

[TkDodo]

but it seems like I was not be able to access the data/isLoading/isError in a different component even if I used the same mutationKey in useMutation.

results of mutations are currently not shared across components like the results of queries are. To access loading states of a mutation globally, you can use useIsMutating and filter it by mutation key.

usually, a mutation is somehow tied to a query. For example, in your case, you update the user entity, so usually, there is a useUserQuery that tries to query the user data from the server. So instead of trying to use the response of the mutation and access this globally, what you can also do is:

• have output listen to the userQuery instead of the mutation
• perform the mutation in the Form
• when the mutation is successful, either refetch the query to get the latest data, or update the query from the mutation response. either way, the output component will pick it up.

[saadq]

Thanks for the quick response! Unfortunately, the example here was a bit contrived, in my real app (a resume generator), there's essentially just one API which is a POST request to generate a PDF. The client sends some JSON to the server, and then the server returns a PDF in the response, so there isn't really a separate query I can use to get the PDF later.

I didn't know about the useIsMutating hook, that sounds interesting although I do need the error state as well.

So I'm not sure if there's any other way to handle this other than keeping the mutation state in another global atom or something similar for this use case...

[TkDodo]

yeah, mutations don't really have a concept of keepPreviousData like queries do, so I'm afraid the transition to idle state when calling mutate again is not avoidable. You'd have to store data somewhere else and keep it in-sync with the result from useMutation.