Access onMutate context inside of mutationFn

[crutchcorn]

BLUF: I'd like to change mutationFn from:

mutationFn: (variables: TVariables) => Promise<TData>

To:

mutationFn: (variables: TVariables, context: TContext) => Promise<TData>

I am willing to make this change and PR it

---

I'm writing code for an offline app that I'd like to look a bit like this:

export function getDefaultMutations(queryClient: QueryClient) {
  queryClient.setMutationDefaults(customerKeys.details().key, {
    // Context isn't a real thing yet
    mutationFn: async (person: PersonDetailsInfo, context) => {
      const {status} = context;
      await queryClient.cancelQueries({
        queryKey: customerKeys.detail(person.id).key,
      });
      if (status === "conflict") {
        throw new Error("Person has been updated on the server since you last fetched it");
      }
      return updatePerson({person});
    },
    onMutate: async (person: PersonDetailsInfo) => {
      clearPreviousMutations({queryClient, mutationKey: customerKeys.detail(person.id).key})
      const serverPersonData = await getPerson({id: person.id});
      const status = serverPersonData.lastUpdated > person.lastUpdated ? "conflict" : "success";
      return {serverPersonData, status};
    }
  });
}

Which would allow me to preserve the context from onMutate while also showing an error message to my user from mutationFn. In addition, the context would allow me to show a sync screen with conflicting data above other successful mutations like so:

  const allMutations = useMutationState({
    select: mutation => mutation
  });

  const sortedMutations = useMemo(() => {
    return [...allMutations].sort((a, b) => {
      const baseSort = b.state.submittedAt > a.state.submittedAt ? 1 : -1
      const aContext = (a.state.context as {status: "conflict"} | undefined)?.status;
      const bContext = (b.state.context as {status: "conflict"} | undefined)?.status;
      if (aContext && bContext === "conflict") {
        return baseSort
      }
      if (aContext === "conflict") {
        return -1
      }
      if (bContext === "conflict") {
        return 1
      }
      return baseSort
    })
  }, [allMutations])

[TkDodo]

you could just reject the promise in onMutate and the mutationFn would never run.

Or, you could move the whole logic inside the mutationFn.

[crutchcorn]

I don't think either of these solutions is viable for the problem I'm using it for 😅

Moving the logic inside of mutationFn or rejecting from onMutate would break the ability to query the mutation cache from useMutationState and display mutations above the other elements. It would also make showing an error to the user more challenging

[TkDodo]

hm why, the flow is pretty much:

try {
  dispatch('pending')
  const context = await onMutate()
  dispatch('pending', context)
  const data = await muatationFn()
  dispatch('success', data)
} catch (e) {
  dispatch('error', e)
}

so there's no real difference if we pass the context into mutationFn or if you reject directly from there. What am I missing ?