useMutation의 mutationFn 함수 파라미터가 없을 때, mutation 콜백 함수의 첫 번째 파라미터 void 대응하기

 

 

이슈 내용

useMutation함수를 호출해서 정의된 mutation함수를 사용할 수 있는데요.
mutation함수의 콜백에 두번째 파라미터에 옵션에 onSuccess, onError 등을 이용해서
비동기함수의 성공, 실패를 처리할 수 있습니다.

 

 

useMutation함수를 정의할 때, mutationFn함수를 전달할 수 있는데요.
그런데, mutationFn함수의 파라미터가 없을 수도 있습니다.

 

 

 

예제 코드

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

// mutationFn의 파라미터 없음!
const m = useMutation({
    mutationFn: () => Promise.resolve(5)
})

// 첫번째 파라미터에 어떤 값을 전달해야?
m.mutate(null, {
    onSuccess() {
        console.log('onSuccess');
    }, 
    onError() {
        console.log('onError');
    }
});

 

 

 

타입에러 스크린샷

mutationFn의 파라미터가 없기 때문에,

mutate 함수에 두번째 파라미터에 옵션을 사용할 때, 첫번째 파라미터는 void 형태로 표시됩니다.

 

 

 

 

 

대응방법

타입스크립트에서의 void 타입은 "아무 값도 없다"는 것을 의미하며, undefined와 호환됩니다.
따라서, mutationFn함수의 첫번째 파라미터에 undefined를 전달하면 됩니다.

 

 

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


const m = useMutation({
    mutationFn: () => Promise.resolve(5)
})


m.mutate(undefined, {
    onSuccess() {
        console.log('onSuccess');
    }, 
    onError() {
        console.log('onError');
    }
});

 

 

 

 

참고

TypeScript 플레이그라운드 - 코드예제

TanStack/query - useMutation where no variables are required 이슈