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

Retrieve the formcontrolname property of a FormGroup within a FormArray

Encountering an Angular schematics issue while utilizing an external schematic ng-new, the specified version is

Can you explain how the "reduce" function can be implemented using an interface in TypeScript?

Is there a way to retrieve the date of the most recent occurrence of a specific "day" in TypeScript?

A guide to accessing a property value in Angular 6 from an object using a string key

openapi-generator is generating subpar api documentation for TypeScript

Hide react component by clicking it

Angular strictPropertyInitialization - best practices for initializing class members?

The path mappings specified in the tsconfig.json file are not resolving correctly during the

How to correct placeholder text display in the input of a Material UI text field

Angular: "btn" class vanishes when the button is toggled

Using keyof to access static properties within TypeScript classes

Object data is not being received by the defaultValue in React Hook Form

Instantiate the component array upon object instantiation

Is TypeScript to blame for the unexpected token error in Nock?

Guide: Populating an MUI Autocomplete TextField using data fetched from Axios

Exporting modules in TypeScript using "module.exports"

Encountered Typescript issue when utilizing typed forms in Angular

user interface grid element in Materia

RouterModule is a crucial external component that is essential for integrating