Type error for api function in react-query

Question

import {useMutation, useQueryClient} from 'react-query';
import axios from 'axios';

interface userInterface {
 email: string;
 password: string;
}


const loginUser = (user:userInterface) => {
   return axios.post('http://127.0.0.0/login',user);
};

export const useLoginApi = () => {
  interface BodyInterface {
     email: string;
     password: string;
  }

  interface ErrorInterface {
    status: string;
  }

  const {
    mutate: loginUserMutator,
    isError,
    error,
  } = useMutation<BodyInterface, ErrorInterface>(loginUser);

  return {
    loginUserMutator,
    isError,
    error,
  };
};

In here loginUser function showing as an error saying,

No overload matches this call.The last overload gave the following error.Argument of type '() => Promise<AxiosResponse<any, any>>' is not assignable to parameter of type 'MutationKey'.ts(2769).useMutation.d.ts(6, 25): The last overload is declared here.

TkDodo · Accepted Answer · 2023-01-03 18:40:42Z

useMutation has 4 generics. If you only provide two, the other 2 will fall-back to the default generic. The 3rd one is for the variables, that explains the error. The first generic is for the return type of the mutation. You're not showing that it returns, and BodyInterface and userInterface are pretty much the same type ...

What you'd want is at least:

useMutation<User, ErrorInterface, BodyInterface >(loginUser);

User - being what loginUser returns. Not sure what that is ...
BodyInterface - being what you pass as variables to the mutation

but then again, the preferred way is to type the loginUser function and let the rest be inferred:

const loginUser = (user:userInterface): Promise<User> => {
   return axios.post('http://127.0.0.0/login',user);
};

useMutation(loginUser);

this will automatically infer input and output depending on loginUser. No, you cannot infer the Error type because there is no guarantee that this is really the error being returned, and rejected Promises cannot be typed. If you really want that, you need to pass the generics as shown above.

Collectives™ on Stack Overflow

Type error for api function in react-query

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related