Typescript error with useMutation in vscode

[rieger-jared]

Hi,

I'm having issues with using the code example of useMutation in the docs. The following code snippet generates the type error

No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ mutationFn: (authToken: string, placeId: string, listIds: string[]) => Promise<any>; onSuccess: () => Promise<void>; onSettled: () => Promise<void>; }' is not assignable to parameter of type 'MutationKey'.
      Object literal may only specify known properties, and 'mutationFn' does not exist in type 'readonly unknown[]'.

My mutation function and mutate query look like this.

const addPlaceToLists = async (
    authToken: string,
    placeId: string,
    listIds: string[],
): Promise<any> => {
    const baseUrl = `${Constants.expoConfig?.extra?.apiUrl}/v1/users/-/lists?`;
    const res = await fetch(`${baseUrl}`, {
        method: "PUT",
        headers: {
            Authorization: `Bearer ${authToken}`,
        },
        body: JSON.stringify({
            placeId,
            listIds,
        }),
    });
    return res.json();
};

    const mutation = useMutation({
        mutationFn: addPlaceToLists,
        onSuccess: async () => {
            console.log("I'm first!");
        },
        onSettled: async () => {
            console.log("I'm second!");
        },
    });
     

Don't know why it's complaining about the mutationFn key prop not existing. I took mutation function from this doc.

https://tanstack.com/query/v4/docs/react/guides/invalidations-from-mutations

Also what's weird, in another file I have this mutation

const mutation = useMutation({
        mutationFn: postList,
        onSuccess: () => {
            // Invalidate and refetch
            queryClient.invalidateQueries({ queryKey: [QueryKeys.lists] });
        },
    });

And vscode doesn't complain at all about this...

thanks for your help.

[TkDodo]

your mutationFunction takes in 3 arguments, but it can only take one argument:

https://tkdodo.eu/blog/mastering-mutations-in-react-query#mutations-only-take-one-argument-for-variables