🔥 낙관적 업데이트

const addTodoMutation = useMutation({
  mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }),
  // 쿼리 무효화에서 Promise를 반드시 반환해야 합니다.
  // 이렇게 하면 리패치가 완료될 때까지 뮤테이션이 '대기' 상태를 유지합니다.
  onSettled: async () => {
    return await queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})
 
const { isPending, submittedAt, variables, mutate, isError } = addTodoMutation
 
typescript복사

<ul>
  {todoQuery.items.map((todo) => (
    <li key={todo.id}>{todo.text}</li>
  ))}
  {isPending && <li style={{ opacity: 0.5 }}>{variables}</li>}
</ul>
 
typescript복사

{
  isError && (
    <li style={{ color: 'red' }}>
      {variables}
      <button onClick={() => mutate(variables)}>재시도</button>
    </li>
  )
}
 
typescript복사

// 앱의 어딘가에서
const { mutate } = useMutation({
  mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }),
  onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
  mutationKey: ['addTodo'],
})
 
// 다른 곳에서 변수에 접근
const variables = useMutationState<string>({
  filters: { mutationKey: ['addTodo'], status: 'pending' },
  select: (mutation) => mutation.state.variables,
})
 
typescript복사

const queryClient = useQueryClient()
 
useMutation({
  mutationFn: updateTodo,
  // mutate가 호출될 때:
  onMutate: async (newTodo) => {
    // 진행 중인 리패치를 취소합니다
    // (낙관적 업데이트를 덮어쓰지 않도록)
    await queryClient.cancelQueries({ queryKey: ['todos'] })
 
    // 이전 값의 스냅샷을 만듭니다
    const previousTodos = queryClient.getQueryData(['todos'])
 
    // 새로운 값으로 낙관적으로 업데이트합니다
    queryClient.setQueryData(['todos'], (old) => [...old, newTodo])
 
    // 스냅샷된 값을 포함한 컨텍스트 객체를 반환합니다
    return { previousTodos }
  },
  // 뮤테이션이 실패하면,
  // onMutate에서 반환된 컨텍스트를 사용하여 롤백합니다
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(['todos'], context.previousTodos)
  },
  // 오류나 성공 후 항상 리패치합니다:
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})
 
typescript복사

useMutation({
  mutationFn: updateTodo,
  // mutate가 호출될 때:
  onMutate: async (newTodo) => {
    // 진행 중인 리패치를 취소합니다
    // (낙관적 업데이트를 덮어쓰지 않도록)
    await queryClient.cancelQueries({ queryKey: ['todos', newTodo.id] })
 
    // 이전 값의 스냅샷을 만듭니다
    const previousTodo = queryClient.getQueryData(['todos', newTodo.id])
 
    // 새로운 값으로 낙관적으로 업데이트합니다
    queryClient.setQueryData(['todos', newTodo.id], newTodo)
 
    // 이전 할 일과 새로운 할 일을 포함한 컨텍스트를 반환합니다
    return { previousTodo, newTodo }
  },
  // 뮤테이션이 실패하면, 위에서 반환한 컨텍스트를 사용합니다
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(
      ['todos', context.newTodo.id],
      context.previousTodo,
    )
  },
  // 오류나 성공 후 항상 리패치합니다:
  onSettled: (newTodo) => {
    queryClient.invalidateQueries({ queryKey: ['todos', newTodo.id] })
  },
})
 
typescript복사

useMutation({
  mutationFn: updateTodo,
  // ...
  onSettled: (newTodo, error, variables, context) => {
    if (error) {
      // 무언가를 수행합니다
    }
  },
})
 
typescript복사