TypeScript error in mutate function from useMutation hook for variables param #2134

Activity

1. TkDodo commented on Apr 16, 2021

   

   TkDodo

   on Apr 16, 2021

   Last edited by TkDodo

   Collaborator

   More actions

   you very likely need to type the input to the muateFn, otherwise, typescript has no way of knowing what it is:

   type Variables = { password: string, email:string }
   const { mutate } = useMutation((values: Variables) =>
       axios.post('/test', values),
   );
    const onSubmit = () => {
       mutate({ password: 'test', email: 'test' });
    };
   

   👍React with 👍2Reacted by Richard George and fidenz-sanka
2. TkDodo

   closed this as completedon Apr 18, 2021
3. YizhiHong commented on May 12, 2021

   

   YizhiHong

   on May 12, 2021

   More actions

   ^ it doesn’t work at all. if you checkout the error above. it's saying
   { password: string, email:string } is not assignable to void. it means the mutate function should not have param at all.
4. TkDodo commented on May 12, 2021

   

   TkDodo

   on May 12, 2021

   Last edited by TkDodo

   Collaborator

   More actions

   that is just because if you write:

     const { mutate } = useMutation((values) =>
       axios.post('/test', values),
     );
   

   it is not defined what values should have for a type. The generic TVariables defaults to void and that's the error you are getting. If you write a function in typescript:

   const myFunction = (variables) => console.log(variables)
   

   the compiler needs to know what variables will be, otherwise, it will be implicitly any.

   if you take my example where values has a type of values: Variables, you will see that it works.
5. SevenOutman commented on Mar 5, 2022

   

   SevenOutman

   on Mar 5, 2022

   Last edited by SevenOutman

   More actions

   What should I pass as the first argument to mutate if the mutation doesn't take any variables?

   function useLogout() {
     return useMutation(() => api.logout());
   }
   
   const logout = useLogout();
   
   logout.mutate(
     null, // neither null or {} is not assignable to parameter of type 'void'.
     {
       // ...options
     }
   )

   Update

   Found that void 0 does the trick.

   logout.mutate(
     void 0,
     {
       // ...options
     }
   )