Using React Query's useMutation hook may result in an error message of "No overload matches this call"

Question

Using React Query's useMutation hook may result in an error message of "No overload matches this call"

When incorporating react-query into my typescript project, I encountered a perplexing type error while attempting to utilize the useMutation() hook with a graphql query.

Here is an example of the code:

useMutation(
    async (
      parameter1: string,
      parameter2: string
    ) => {
      const response = await sdk.myMutation({
        parameter1: parameter1,
        parameter2: parameter2,
      });
      return response;
    },
    {
      onSettled: () => queryClient.invalidateQueries([CACHE_KEY]),
    }
);

The specific type error message reads as follows:

  No overload matches this call.
  Overload 1 of 4, '(mutationFn: MutationFunction<{ __typename: "IdResponse"; id: string; }, string>, options?: Omit<UseMutationOptions<{ __typename: "IdResponse"; id: string; }, unknown, string, unknown>, "mutationFn"> | undefined): UseMutationResult<...>', gave the following error.
    Argument of type '(parameter1: string, parameter2: string) => Promise<{ __typename: "IdResponse"; id: string; }>' is not assignable to parameter of type 'MutationFunction<{ __typename: "IdResponse"; id: string; }, string>'.
  Overload 2 of 4, '(mutationKey: MutationKey, options?: Omit<UseMutationOptions<unknown, unknown, void, unknown>, "mutationKey"> | undefined): UseMutationResult<unknown, unknown, void, unknown>', gave the following error.
    Argument of type '(parameter1: string, parameter2: string) => Promise<{ __typename: "IdResponse"; id: string; }>' is not assignable to parameter of type 'MutationKey'.
  Overload 3 of 4, '(mutationKey: MutationKey, mutationFn?: MutationFunction<unknown, void> | undefined, options?: Omit<UseMutationOptions<unknown, unknown, void, unknown>, "mutationFn" | "mutationKey"> | undefined): UseMutationResult<...>', gave the following error.
    Argument of type '(parameter1: string, parameter2: string) => Promise<{ __typename: "IdResponse"; id: string; }>' is not assignable to parameter of type 'MutationKey'.

typescript graphql react-query

Answer 1

Answer №1

It wasn't immediately clear to me, but the issue stemmed from my attempt to pass multiple parameters to the function used in useMutation.

The MutationFunction type only allows for a single parameter (referred to as variables in a confusing manner).

To resolve the issue, I passed an object containing my parameters to the function like this:

useMutation(
    async ({
      parameter1,
      parameter2
    }:{
      parameter1: string,
      parameter2: string
      }
    ) => {
      const response = await sdk.myMutation({
        parameter1: parameter1,
        parameter2: parameter2,
      });
      return response;
    },
    {
      onSettled: () => queryClient.invalidateQueries([CACHE_KEY]),
    }
);

A more organized approach would involve creating a type to store these parameters, something similar to this:

type myMutationParams ={
  parameter1: string;
  parameter2: string;
}

Subsequently, the useMutation hook would appear as follows:

useMutation(
    async ({
      parameter1,
      parameter2
    }: myMutationParams
    ) => {
      const response = await sdk.myMutation({
        parameter1: parameter1,
        parameter2: parameter2,
      });
      return response;
    },
    {
      onSettled: () => queryClient.invalidateQueries([CACHE_KEY]),
    }
);

Answer 2

It wasn't immediately clear to me, but the issue stemmed from my attempt to pass multiple parameters to the function used in useMutation.

The MutationFunction type only allows for a single parameter (referred to as variables in a confusing manner).

To resolve the issue, I passed an object containing my parameters to the function like this:

useMutation(
    async ({
      parameter1,
      parameter2
    }:{
      parameter1: string,
      parameter2: string
      }
    ) => {
      const response = await sdk.myMutation({
        parameter1: parameter1,
        parameter2: parameter2,
      });
      return response;
    },
    {
      onSettled: () => queryClient.invalidateQueries([CACHE_KEY]),
    }
);

A more organized approach would involve creating a type to store these parameters, something similar to this:

type myMutationParams ={
  parameter1: string;
  parameter2: string;
}

Subsequently, the useMutation hook would appear as follows:

useMutation(
    async ({
      parameter1,
      parameter2
    }: myMutationParams
    ) => {
      const response = await sdk.myMutation({
        parameter1: parameter1,
        parameter2: parameter2,
      });
      return response;
    },
    {
      onSettled: () => queryClient.invalidateQueries([CACHE_KEY]),
    }
);

Answer 3

Answer №2

It seems to be a common issue for me when working with callback functions such as onError, onSuccess, or onSettled.

Check for any unnecessary type assignments in parameters and fix any typing errors.

For instance:

// Incorrect usage
onSettled: (_, err: CustomError) => {
 
},

// Correct approach
onSettled: (_, err) => {
  const newErr = err as CustomError;
  // Now you can utilize the newErr
},

Validate types within mutationFn:

For example:

// Incorrect implementation
mutationFn: (accountId: string, accountDetails: Account) => {

},

// Correct method
type MutationParams = {
  accountId: string;
  accountDetails: Account;
};
mutationFn: (requestBody: MutationParams) => {
  // Destructure the param as needed.
},

Ensure that only one parameter is used by combining multiple parameters into an object.

Answer 4

It seems to be a common issue for me when working with callback functions such as onError, onSuccess, or onSettled.

Check for any unnecessary type assignments in parameters and fix any typing errors.

For instance:

// Incorrect usage
onSettled: (_, err: CustomError) => {
 
},

// Correct approach
onSettled: (_, err) => {
  const newErr = err as CustomError;
  // Now you can utilize the newErr
},

Validate types within mutationFn:

For example:

// Incorrect implementation
mutationFn: (accountId: string, accountDetails: Account) => {

},

// Correct method
type MutationParams = {
  accountId: string;
  accountDetails: Account;
};
mutationFn: (requestBody: MutationParams) => {
  // Destructure the param as needed.
},

Ensure that only one parameter is used by combining multiple parameters into an object.

Using React Query's useMutation hook may result in an error message of "No overload matches this call"

Answer №1

Answer №2

It seems to be a common issue for me when working with callback functions such as onError, onSuccess, or onSettled.

For instance:

Validate types within mutationFn:

For example:

Similar questions

Experience the mesmerizing motion of a D3.js Bar Chart as it ascends from the bottom to the top. Feel free to

What could be the reason behind Typescript's unexpected behavior when handling the severity prop in Material UI Alerts?

Accept an empty string as the defaultValue, but disallow it during validation using Zod, react-hook-form, and Material UI

The button event listener in React fails to trigger without a page refresh

Passing a method from a component to a service in Angular 9

How to modify a specific property of an array object in JavaScript

Guide on implementing a cordova plugin in a TypeScript cordova application

Utilize a personalized useFetch hook in React.js to transmit a POST request and obtain a response

Retrieve the array from within the string

What is the procedure for cancelling a file upload in the FileUpload component of PrimeNG?

Position components in Angular 2 based on an array's values

The combination of Object.keys() and the find function

It seems like the recent upgrade to yarn 2 has caused issues with typescript types, whereas the installation of the same project with yarn 1 was

An automatic conversion cannot handle spaces and prohibited characters in Object keys

Error in hook order occurs when rendering various components

Validator returns undefined when expressing invalid data

Can TypeScript be set up to include undefined as a potential type in optional chains?

Assign a predetermined value to a dropdown list within a FormGroup

The object is classified as 'undetermined' (2571) upon implementation of map() function

Using import statement is mandatory when loading ES Module in TS Node: server/src/index.ts