[Types] onError's context is unknown when inferring TVariables in useMutation if using a mutation function with parameters (but works without parameters)

[bennettdams]

• React Query v3.34.16
• TypeScript v4.4.2

There's a functionality for inferring the return value type of the onMutate function that I don't understand:

I think inferring works for mutation functions without parameters, but does not work for mutation functions with parameters.

For optimistic updates, that return value can be used via context in the onError function to reset the query state to the version before the mutation. Something like this:

  // mock mutation function without parameter
  async function fetchWithoutParam() {
    return { userId: "1" };
  }

  const updateUserMutation1 = useMutation(fetchWithoutParam, {
    onMutate: async () => {
      await queryClient.cancelQueries(queryKey);
      const userBeforeMutation = queryClient.getQueryData<QueryData>(queryKey);
      ...
      // returned value here is part of the `onError`'s `context` variable
      return { userBeforeMutation };
    },
    onError: (err, _, context) => {
      // getting `userBeforeMutation` from `onMutate`'s return
      // ✅ here, `context` is typed correctly
      const userBeforeMutation = context?.userBeforeMutation;
      if (userBeforeMutation) {
        queryClient.setQueryData<QueryData>(queryKey, userBeforeMutation);
      }
      console.error("Error while updating user:", err);
    },
    ...

This works great and everything is inferred.

But there is a variant where something does not work: When the mutation function uses parameters. When using such a mutation function, context will be unknown. Here's the same code, the only difference is that mutation function now accepts a parameter:

  // mock mutation function with parameter
  async function fetchWithParam({ userToUpdate }: { userToUpdate: User }) {
    return { userId: "1" };
  }

  // `fetchWithParam` instead of `fetchWithoutParam`
  const updateUserMutation2 = useMutation(fetchWithParam, {
    onMutate: async ({ userToUpdate }) => {
      ...
    },
    onError: (err, _, context) => {
      // ❌ here, `context` is unknown
      const userBeforeMutation = context?.userBeforeMutation;
      ...
    },
    ...

For this example, context is unknown, so you can't use it type-safely.

One can easily circumvent this problem by setting the type definition of the mutation function parameter for the onMutate parameter:

    onMutate: async ({ userToUpdate }: { userToUpdate: User }) => {

With this type defintion in place, context has the correct type again.

Is this expected?
If yes, you just have to know that you need to set the type definition at onMutate yourself. Maybe this should be added to the docs?

---

For reference, here is a CodeSandbox with the three variants:

  // Variant 1:
  // - mutation fn without params
  // - not setting type definition
  // Result: ✅ `context` is correctly typed

  // Variant 2:
  // - mutation fn with params
  // - not setting type definition
  // Result: ❌ `context` is `unknown`

  // Variant 3:
  // - mutation fn with params
  // - with setting the type definition
  // Result: ✅ `context` is correctly typed

[TkDodo]

It's a somewhat known TS limitation, yes: https://tkdodo.eu/blog/react-query-and-type-script#optimistic-updates