본문으로 건너뛰기

useMutation()에서 추론에 민감한 속성의 순서가 올바른지 확인합니다

다음 함수에서는 타입 추론으로 인해 전달된 객체의 속성 순서가 중요합니다:

  • useMutation()

올바른 속성 순서는 다음과 같습니다:

  • onMutate
  • onError
  • onSettled

다른 모든 속성은 타입 추론에 의존하지 않으므로 순서의 영향을 받지 않습니다.

규칙 세부 정보​

이 규칙에 맞지 않는 잘못된 코드의 예:

/* eslint "@tanstack/query/mutation-property-order": "warn" */
import { useMutation } from '@tanstack/react-query'

const mutation = useMutation({
  mutationFn: () => Promise.resolve('success'),
  onSettled: () => {
    results.push('onSettled-promise')
    return Promise.resolve('also-ignored') // Promise<string> (should be ignored)
  },
  onMutate: async () => {
    results.push('onMutate-async')
    await sleep(1)
    return { backup: 'async-data' }
  },
  onError: async () => {
    results.push('onError-async-start')
    await sleep(1)
    results.push('onError-async-end')
  },
})

이 규칙에 맞는 올바른 코드의 예:

/* eslint "@tanstack/query/mutation-property-order": "warn" */
import { useMutation } from '@tanstack/react-query'

const mutation = useMutation({
  mutationFn: () => Promise.resolve('success'),
  onMutate: async () => {
    results.push('onMutate-async')
    await sleep(1)
    return { backup: 'async-data' }
  },
  onError: async () => {
    results.push('onError-async-start')
    await sleep(1)
    results.push('onError-async-end')
  },
  onSettled: () => {
    results.push('onSettled-promise')
    return Promise.resolve('also-ignored') // Promise<string> (should be ignored)
  },
})

속성​

  • ✅ 권장
  • 🔧 수정 가능