react-query에서 mutation을 사용한 후 queryClient.invalidateQueries() 함수에 인자로 query-key를 넣어 최적화 할 수 있지만 invalidateQueries가 초기화 하는 데이터는 현재 active상태인 쿼리들을 초기화 하기때문에 성능적으로 크게 차이가 없다고함(관련트윗 tkdodo)
그래서 queryClient의 defaultOptions의 onSuccess에서 mutation 옵션중 onSuccess에 한번에 정의해두고 invalidateQueries를 해주고 싶은데 onSuccess를 중복으로 선언했을때 어떻게 처리되는지 궁금하여 직접 테스트 해봤습니다.
onSuccess 는 세군데서 옵션으로 사용 할 수 있다.
결론
queryClient에서 defaultOptions의 mutation onSuccess에 queryClient.invalidateQueries()를 사용하도록 하고 사용단에서 onSuccess가 필요한 상황에서는 mutation의 두번째 인자로 options를 사용하면 편하게 사용 할 수 있을것 같다.
1. onSuccess 사용 위치
1.1. Query Client Default Options
const queryClient = new QueryClient({
defaultOptions: {
mutations: {
onSuccess: () => {
console.log('queryClient Options')
},
},
},
})1.2. useMutation의 options
const { mutate } = useMutation({
mutationFn: httpFn,
onSuccess() {
console.log('useMutation Option')
},
})1.3. mutation의 options
mutate(values.phoneNumber, {
onSuccess: () => console.log('mutation Function Option')
})2. 테스트
3. 결론
useMutation를 정의할때 onSuccess를 선언하면 defaultOptions.mutations.onSuccess를 오버라이드 하게되고 mutation을 사용할때 옵션으로 onSuccess를 사용하면 queryClient또는 useMutations의 onSuccess를 실행하고 mutation 옵션의 onSuccess가 실행된다.
즉, queryClient에서 defaultOptions의 mutation onSuccess에 queryClient.invalidateQueries()를 사용하도록 하고 사용단에서 onSuccess가 필요한 상황에서는 mutation의 두번째 인자로 options를 사용하면 편하게 사용 할 수 있을것 같다.
추가내용
내가 이 이야기를 하니 react-query 코드를 봐주신 분이 계신데 위 테스트결과와 코드 구현과도 일치한다고 확인 해주셨다! 동의를 얻고 해당부분을 추가합니다.
1. 디폴트 옵션을 덮어쓰는 코드
(https://github.com/TanStack/query/blob/main/packages/query-core/src/mutationObserver.ts#L74C7-L74C38)
2. return하는 mutate의 option(onSuccess 포함)을 저장하는 코드
