Error: Promise<any>' has no properties in common with type 'UseMutationOptions<unknown, Error, void, unknown>'

Question

I am using useMutation hook from tanstack/react-query to add departments to my database.

Here is the addDepartment function:

import { useQuery, useMutation } from '@tanstack/react-query';


  async function addDepartment(deptData: deptFormSchemaType): Promise<any> {
    const response = await fetch('/api/department', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(deptData),
    });
  
    if (!response.ok) {
      throw new Error('Failed to add department');
    }
  
    return response.json(); 
  }
  

Here is the useMutation hook:

  const {mutate} = useMutation(addDepartment, {
    onSuccess: () => {toast.success('Department added successfully');
    form.reset();
    updateSelectedEmployees();
    setIsLoading(false);},
    onError: () => {toast.error('Error adding department');}
  })

The error is on useMutation(addDepartment part:

Type '(deptData: { name: string; description: string; dept_head: string; max_teams: number; members?: string[] | undefined; }) => Promise<any>' has no properties in common with type 'UseMutationOptions<unknown, Error, void, unknown>'.ts(2559)
(local function) addDepartment(deptData: deptFormSchemaType): Promise<any>

Answer 1

Your addDepartment function need to be added as a mutationFn. Like this

mutationFn: addDepartment,