useMutation & TypeScript

[jaworek]

I'm using useMutation hook with TypeScript. I took example from documentation:
https://react-query.tanstack.com/docs/guides/optimistic-updates

I noticed that when typing it return value expects to be Promise<TSnapshot> | TSnapshot.
Example that is provided returns void, which throws error when typechecking.

What is the best approach to fix it?
Should I just move setQueryData to onError like it is done in examples page?
https://react-query.tanstack.com/docs/examples/optimistic-updates
Or provide custom return type instead of using the one defined in type?
Or maybe it is a bug that should be fixed by updating types?

Also is there an easier way to get correct typing in getQueryData and setQueryData without need to specify type on every call?

const [mutatePostTodo] = useMutation<Response, unknown, string>(
    (text) => axios.post("/api/data", { text }),
    {
      onMutate: (text) => {
        setText("");
        cache.cancelQueries("todos");

        const previousValue = cache.getQueryData<Response>("todos");

        cache.setQueryData<Response>("todos", (old) => ({
          ...old,
          items: [...old.items, text]
        }));

        // returning like this causes error with typescript
        // if you return just previous value and use cache.setQueryData in onError it will work correctly
        return () => cache.setQueryData<Response>("todos", previousValue);
      },
      // this works in JS, but TS does not like it, because rollback type is expected to be Promise<TSnapshot> | TSnapshot
      onError: (err, variables, rollback) => rollback()
        ,
      // After success or failure, refetch the todos query
      onSettled: () => {
        cache.invalidateQueries("todos");
      }
    }
  );

[jaworek]

Working version:
https://codesandbox.io/s/crimson-leaf-210ju?file=/pages/index.tsx

Version with type error:
https://codesandbox.io/s/eager-bell-r5ovm?file=/pages/index.tsx

[TkDodo]

I think you are just providing the wrong types to useMutation. The 4th generic is the "context". Anything can be returned from onMutate and it will just be injected into onError. If you change your generics so that the 4th one confirms to your return type (a function), it works:

- useMutation<Response, AxiosError, Response>
+ useMutation<Response, AxiosError, string, () => void>

Also is there an easier way to get correct typing in getQueryData and setQueryData without need to specify type on every call?

not that I know of. There is no correlation on type level what is in a queryCache, as you can put anything in there. I was once working on a typesafe factory function that takes care of this, but never went very far because adding the generics to getQueryData / setQueryData is not much of an issue for us (if you keep all usages scoped to a custom hook for example).