TypeScript error with context in useMutation optimistic update (Property 'snapshot' does not exist on type '{}')

[amscu-dev]

Description:

I'm trying to implement an optimistic update using react-query's useMutation, where I temporarily update the userSession data and rollback on error. The mutation itself works, but TypeScript complains when I try to access context.snapshot inside onError.

Code:

VerifySetup: {
  useMutation: (options?: UseMutationOptions<MfaVerifyMutationFnResult, AxiosErrorRes, MfaVerifyMutationFnBody>) => {
    const queryClient = useQueryClient();
    return useMutation<MfaVerifyMutationFnResult, AxiosErrorRes, MfaVerifyMutationFnBody>({
      ...options,
      mutationKey: ["mfa-verify"],
      mutationFn: (data: MfaVerifyMutationFnBody) => mfaVerifyMutationFn(data),
      onMutate: async () => {
        await queryClient.cancelQueries({ queryKey: ["userSession"] });
        const snapshot = queryClient.getQueryData(["userSession"]);

        queryClient.setQueryData(["userSession"], (oldData: any) => {
          if (!oldData) return oldData;
          return {
            ...oldData,
            data: {
              ...oldData.data,
              user: {
                ...oldData.data.user,
                userPreferences: {
                  ...oldData.data.user.userPreferences,
                  enable2FA: true,
                },
              },
            },
          };
        });

        return { snapshot };
      },
      onError: (error, variable, context) => {
        if (context?.snapshot) { // TS Error here: Property 'snapshot' does not exist on type '{}'
          queryClient.setQueryData(["userSession"], context.snapshot);
        }
      },
      onSettled() {
        return queryClient.invalidateQueries({ queryKey: ["userSession"] });
      },
    });
  },
},

Error:

Property 'snapshot' does not exist on type '{}'.ts(2339)

Notes:

I've tried typing the return of onMutate, but the TypeScript error persists.

The expected behavior is that context.snapshot is available in onError to rollback the optimistic update.

Using React Query v5 and TypeScript.

[TkDodo]

It’s because UseMutationOptions has 4 type parameters, and since you specify options like this:

UseMutationOptions<MfaVerifyMutationFnResult, AxiosErrorRes, MfaVerifyMutationFnBody>

the 4th type parameter falls back to its default value. Take a look at mutationOptions instead of rolling your own.

also please put that in a typescript playground so it’s easier to help.