낙관적 업데이트: 먼저 바꾼 캐시는 실패할 때 어떻게 복구하는가

import {
  QueryClient,
  QueryClientProvider,
  useMutation,
  useQuery,
  useQueryClient,
} from '@tanstack/react-query'
 
const queryClient = new QueryClient()
const productKey = ['product', 'coffee']
const SHOULD_FAIL = true
let serverProduct = { id: 'coffee', name: '원두 정기 배송', favorite: false }
 
async function fetchProduct() {
  return { ...serverProduct }
}
 
async function saveFavorite({ favorite, shouldFail }) {
  await new Promise((resolve) => setTimeout(resolve, 800))
 
  if (shouldFail) {
    throw new Error('관심상품 저장 거절')
  }
 
  serverProduct = { ...serverProduct, favorite }
  return { ...serverProduct }
}
 
function ProductDetails() {
  const client = useQueryClient()
  const productQuery = useQuery({
    queryKey: productKey,
    queryFn: fetchProduct,
    staleTime: Infinity,
  })
 
  const favoriteChange = useMutation({
    mutationFn: saveFavorite,
    onMutate: ({ favorite }) => {
      client.setQueryData(productKey, (current) => ({
        ...current,
        favorite,
      }))
    },
  })
 
  if (productQuery.isPending) return <p>상품을 읽는 중…</p>
  if (productQuery.isError) return <p>상품을 읽지 못했습니다.</p>
 
  return (
    <main>
      <h1>{productQuery.data.name}</h1>
      <button
        disabled={favoriteChange.isPending}
        onClick={() => favoriteChange.mutate({
          favorite: true,
          shouldFail: SHOULD_FAIL,
        })}
      >
        {SHOULD_FAIL
          ? '관심상품 추가 실패 재현'
          : '관심상품 추가 성공 확인'}
      </button>
      <p>화면 캐시: {productQuery.data.favorite ? '추가됨' : '추가 안 됨'}</p>
      <p>가짜 서버: {serverProduct.favorite ? '추가됨' : '추가 안 됨'}</p>
      {favoriteChange.isError ? <p>{favoriteChange.error.message}</p> : null}
    </main>
  )
}
 
export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ProductDetails />
    </QueryClientProvider>
  )
}

const favoriteChange = useMutation({
  mutationFn: saveFavorite,
  onMutate: async ({ favorite }, context) => {
    await context.client.cancelQueries({ queryKey: productKey })
 
    const previousProduct = context.client.getQueryData(productKey)
 
    context.client.setQueryData(productKey, (current) => ({
      ...current,
      favorite,
    }))
 
    return { previousProduct }
  },
  onError: (_error, _variables, onMutateResult, context) => {
    if (onMutateResult?.previousProduct !== undefined) {
      context.client.setQueryData(
        productKey,
        onMutateResult.previousProduct,
      )
    }
  },
  onSettled: (_data, _error, _variables, _onMutateResult, context) => {
    return context.client.invalidateQueries({ queryKey: productKey })
  },
})

function FavoriteUiOnly({ confirmedFavorite }) {
  const favoriteChange = useMutation({
    mutationFn: saveFavorite,
    onSettled: (_data, _error, _variables, _onMutateResult, context) => {
      return context.client.invalidateQueries({ queryKey: productKey })
    },
  })
 
  const visibleFavorite = favoriteChange.isPending
    ? favoriteChange.variables.favorite
    : confirmedFavorite
 
  return (
    <section>
      <button
        disabled={favoriteChange.isPending}
        onClick={() => favoriteChange.mutate({
          favorite: true,
          shouldFail: SHOULD_FAIL,
        })}
      >
        {SHOULD_FAIL ? 'UI-only 실패 재현' : 'UI-only 성공 확인'}
      </button>
      <p>현재 표시: {visibleFavorite ? '추가됨' : '추가 안 됨'}</p>
      {favoriteChange.isError ? (
        <>
          <p>{favoriteChange.error.message}</p>
          <button
            onClick={() => favoriteChange.mutate(favoriteChange.variables)}
          >
            같은 변경 다시 시도
          </button>
        </>
      ) : null}
    </section>
  )
}
 
function ProductDetails() {
  const productQuery = useQuery({
    queryKey: productKey,
    queryFn: fetchProduct,
    staleTime: Infinity,
  })
 
  if (productQuery.isPending) return <p>상품을 읽는 중…</p>
  if (productQuery.isError) return <p>상품을 읽지 못했습니다.</p>
 
  return (
    <FavoriteUiOnly confirmedFavorite={productQuery.data.favorite} />
  )
}

문제       서버가 관심상품 추가를 거절했는데 화면 캐시는 추가됨으로 남음
잘못된 판단 먼저 바꾼 캐시는 서버 성공과 같은 확정값임
관찰       오류 뒤에도 임시값이 남고 서버 원본과 화면이 갈라짐
원인       요청 전 사본과 실패 복구·서버 재확인 계약이 없음
행동       읽기 취소 → 이전 사본 보관 → 임시 반영 → 실패 복구 → 재확인
검증       실패는 이전값 복구, 성공은 새 값 유지, 둘 다 서버 재조회로 최종값 확인