React Query mutation encountered a TS2554 error: Type argument was not valid

Question

React Query mutation encountered a TS2554 error: Type argument was not valid

I'm a beginner when it comes to TypeScript and I am using react-query. I tried using mutate, but it is causing an error.

TS2554: Expected 1-2 arguments, but got 3.

interface:

interface ChangePassword{
    email: string;
    password: string;
    confirmPassword: string
}

function:

 const changePasswordOnClick = useMutation<Record<string, string>, unknown, ChangePassword>(
        () => axios.post(
            url,
            { email, password, new_password}, // all fine
        ),
        {
            onSuccess: (req) => {
                console.log('Request', req)

            },

            onError: (newLogin) => {
                console.log('onError', newLogin);
            },
        },
    );

Problem (just a snippet):

onSubmit={async (data,
{setSubmitting, resetForm})=>{setSubmitting(true)                                 
                  changePasswordOnClick.mutate(
                     data.email, 
                    data.password, 
                    data.confirmPassword)} // TS2554: Expected 1-2 arguments, but got 3.

Why am I encountering this error? How can I resolve it?

typescript react-query

Answer 1

Answer №1

When working with the mutate type, the function signature is as follows:

(variables: TVariables, options?: MutateOptions) => Promise<TData>

You will need to update the mutationFn like this:

const changePasswordOnClick = useMutation<Record<string, string>, unknown, ChangePassword>(
  (params: ChangePassword) => axios.post(url, params),
  {
    onSuccess: (req) => {
      console.log("Request", req)
    },

    onError: (newLogin) => {
      console.log("onError", newLogin)
    },
  }
)

Then you can call mutate like so:

changePasswordOnClick.mutate({
   confirmPassword: data.confirmPassword,
   email: data.email,
   password: data.password,
})

This ensures that your code matches the required type.

Answer 2

When working with the mutate type, the function signature is as follows:

(variables: TVariables, options?: MutateOptions) => Promise<TData>

You will need to update the mutationFn like this:

const changePasswordOnClick = useMutation<Record<string, string>, unknown, ChangePassword>(
  (params: ChangePassword) => axios.post(url, params),
  {
    onSuccess: (req) => {
      console.log("Request", req)
    },

    onError: (newLogin) => {
      console.log("onError", newLogin)
    },
  }
)

Then you can call mutate like so:

changePasswordOnClick.mutate({
   confirmPassword: data.confirmPassword,
   email: data.email,
   password: data.password,
})

This ensures that your code matches the required type.

React Query mutation encountered a TS2554 error: Type argument was not valid

Answer №1

Similar questions

Issue [ERR_MODULE_NOT_FOUND]: The module 'buildapp' could not be located within buildserver.js

I am retrieving data from a service and passing it to a component using Angular and receiving '[object Object]'

Arrange the array based on the order of the enumeration rather than its values

Linking typescript error messages with their respective compiler configurations (tsconfig.json)

Methods for assigning values to a formControl using an array

Capturing Input Data Dynamically with Angular Forms

Utilizing Next.js to Import a Function from a Path Stored within an Environment Variable

Having trouble retrieving an Enum within an Angular template?

Typescript issues arise when a library lacks any available types for download

PhpStorm 2019.2 introduces Material UI components that have optional props instead of being mandatory

React development: How to define functional components with props as an array but have them recognized as an object

What is the best way to implement Infinite scroll alongside Virtual scroll in Ionic 3?

Creating two number-like types in TypeScript that are incompatible with each other can be achieved by defining two

What is the best way to make cypress.io swipe an ionic ion-item-sliding component to the left?

Having Trouble with Ionic 2's Loading Controller

In the latest version of Angular, accessing document.getelementbyid consistently returns null

Using Promise<void> instead of Promise<any> is the preferred approach

The element is implicitly assigned an 'any' type as the expression of type 'any' cannot be used to index a type with createStyles

Is there something I'm overlooking, or is this behavior unusual for an "if statement"?

Issue Error: NG0201: NgControl provider not found within NodeInjector