리액트 쿼리 useMutation의 mutationFn은 하나의 argument만 받는다.

에러

리액트쿼리의 useMutation 사용 중 mutationFn 관련 에러

 

문제의 코드 ⬇️

mutationFn: (requestId: number, newStatus: RequestStatus) => putRequest(requestId, newStatus),

 

 

에러 메세지

Type '(requestId: number, newStatus: RequestStatus) => Promise<void>' 
is not assignable to type 'MutationFunction<void, number>'.
Target signature provides too few arguments. Expected 2 or more, but got 1.ts(2322)
queryClient-Iu1tSaKE.d.ts(631, 5): 
The expected type comes from property 'mutationFn' 
which is declared here on type 'UseMutationOptions<void, Error, number, unknown>'

 

 

해결

https://stackoverflow.com/questions/77623407/react-query-cant-pass-proper-arguments-to-mutationfn
https://github.com/TanStack/query/discussions/1216#discussioncomment-162825

 

 

A MutationFunction only accepts one argument

 

TanStack Query 의 공식 문서에 따르면,

• mutationFn: (variables: TVariables) => Promise<\TData>
  • Required, but only if no default mutation function has been defined
  • A function that performs an asynchronous task and returns a promise.
  • variables is an object that mutate will pass to your mutationFn

 

 

문제는 useMutation은 1개의 argument 밖에 받지 못하는데 내가 두 개를 넘겨서 일어난 것이었다.!
-> 여러 argument를 넘기고 싶다면 object로 넘겨야 한다.

 

 

완성한 코드

 

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

import { putRequest } from '@/apis/post/request';
import { RequestStatus } from '@/types/request';

export const useChangeRequestStatusMutation = (postId: number) => {
  const queryClient = useQueryClient();

  const handleRequestChange = ({ requestId, newStatus }: { requestId: number; newStatus: RequestStatus }) => {
    return putRequest(requestId, newStatus);
  };

  return useMutation({
    mutationFn: handleRequestChange,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['request', postId] });
    },
    onError: () => {
      console.log('error!');
    },
  });
};

 

 

object로 만들고 타입까지 달고 나니 코드가 좀 길어져서 handleRequestChange라는 함수로 감싸주고,

mutationFn에는 깔끔하게 handleRequestChange를 전달해주었다.