TypeScript types error with useMutation custom hook

[avalladaresm]

Describe the bug
Hello, I'm just getting started in migrating a project I'm building from Redux to React Query 😃.
So I'm trying to replicate the custom hook you did here.

export const useCreateLog = () => {
	return useMutation((values) => {
		console.log(values)
		return axios.post('http://localhost:8080/docs/logs', { data: values })
	}, {	
		onSuccess: (data, variables) => {
			console.log('success, yey', data, variables)
			queryCache.invalidateQueries('Logs')
		},
		onError: () => {
			console.log('what happened?')
		}
	})
}

Then, I'm using the hook in a .tsx file, I'm importing it as import { useCreateLog } from '../../services/logs', then I'm creating the state variables, const [createLog, createLogInfo] = useCreateLog() and then using createLog inside a function the submits the data,

  const onFinish = values => {
		const log = {
			userName: values.username,
                        date: 'something here',
                        type: 'something here',
                        description: 'something here',
                        data: JSON.stringify('something here')
		}
		createLog(log)
  }

However, vscode is complaining about an error on createLog(log) that says Argument of type '{ userName: any; date: moment.Moment; type: LogTypes; description: string; data: string; }' is not assignable to parameter of type 'undefined'.ts(2345), but even so, still does the axios.post operation, I just that to be able to remove that error.

Any tips would be greatly appreciated! 😄

[amen-souissi]

hello, the default type of the mutation variables is undefined. Try to specify the type of your variables => useMutation<TResult, TError, TVariables>(...) , TVariables == type of log...

[danielrwolff]

If you create a ILog interface

export interface ILog {
  userName: string;
  date: string;
  type: string;
  description: string;
  data: string;
}

and then specify that interface in your mutate function (third line)

export const useCreateLog = () => {
  return useMutation(
    (values: ILog) => {
      console.log(values);
      return Axios.post("http://localhost:8080/docs/logs", { data: values });
    },
    {
      onSuccess: (data, variables) => {
        console.log("success, yey", data, variables);
        queryCache.invalidateQueries("Logs");
      },
      onError: () => {
        console.log("what happened?");
      },
    }
  );
};

then your error should go away :)

[amen-souissi]

Hello, This solution type only the mutation function... We need to use the dynamic typing for more efficiency...

[avalladaresm]

Hey @danielrwolff, thanks for your solution! I think I'm treating the tsx file as a jsx file, as I'm finding myself using interfaces not so often tbh, but I'll try to fix that behavior as well. @amen-souissi thanks for your tip!