낙관적 업데이트

• 서버에 데이터를 패칭해 수정하고자 할 때, 서버에 데이터가 반영되기 전에 먼저 사용자 ui에 적용할 수 있다면, 더 좋은 사용자 경험을 제공할 수 있다.
• react-query에서 제공하는 useMutation 훅을 사용하면 onMutate 속성을 정의해 낙관적 업데이트를 간편하게 구현할 수 있다.
• 데이터가 패칭될 때 우선 반영해주는 onMutate, 패칭이 실패했을 때 롤백을 시켜줄 onError, 패칭 이후 데이터를 재검증해줄 onSettled 속성을 정의함으로써 낙관적 업데이트 함수를 구현해줄 수 있다.
• 공식 문서의 예제를 통해 사용법을 확인해보자.

const queryClient = useQueryClient()

// 훅을 통해 가져온 mutate함수를 호출하면 낙관적 업데이트가 수행한다.
const { mutate } = useMutation({
  // 데이터를 패칭해줄 임의의 함수
  mutationFn: updateTodo,
  
  // mutate함수를 호출했을 때 클라이언트에서 낙관적 업데이트를 해줄 함수
  // 입력값으로는 mutationFn의 반환값이 들어가면 된다.
  onMutate: async (newTodo) => {
    // 기존의 쿼리요청을 취소해줘야 낙관적 업데이트 이후 데이터가 덮어써지는 일을 막아줄 수 있다.
    await queryClient.cancelQueries({ queryKey: ['todos'] })

    // 기존값 스냅샷
    const previousTodos = queryClient.getQueryData(['todos'])

    // 쿼리 데이터를 새로운 값을 반영해 클라이언트에서 변경해준다.
    queryClient.setQueryData(['todos'], (old) => [...old, newTodo])

    // 변형전 값을 context로 반환
    return { previousTodos }
  },
  
  // muataion이 실패했을 때 발동할 함수로 데이터를 롤백하는 역할을 수행
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(['todos'], context.previousTodos)
  },
  
  // 패칭 성공, 실패 여부에 상관없이 발동되는 함수로 서버의 데이터를 다시 가져온다.
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})

출처:
https://tanstack.com/query/v4/docs/react/guides/optimistic-updates