본문으로 건너뛰기

쿼리 무효화

쿼리가 stale 상태가 될 때까지 기다리는 것만으로는 항상 충분하지 않습니다. 뮤테이션이 성공하면 관련 캐시 데이터가 오래되었다는 것을 알고 있는 경우가 많습니다. queryClient.invalidateQueries를 사용하여 일치하는 쿼리를 stale 상태로 표시하고 활성 옵저버가 다시 가져오도록 합니다.

queryClient.invalidateQueries()

queryClient.invalidateQueries({
  queryKey: ['todos'],
})

쿼리가 무효화되면:

  • stale 상태로 표시되며 모든 staleTime을 재정의합니다
  • 일치하는 쿼리가 controller에서 활성 상태이면 백그라운드에서 다시 가져올 수 있습니다

뮤테이션으로 인한 무효화​

private readonly addTodo = createMutationController(this, {
  mutationFn: addTodo,
  onSuccess: async () => {
    await queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})

뮤테이션 결과가 관련 캐시 데이터가 stale 상태임을 알려줄 때 이 패턴을 사용합니다. 페이지네이션 예제에서는 프로젝트 뮤테이션 후의 무효화를 보여줍니다.

쿼리 일치​

접두사로 쿼리 그룹 일치시키기:

queryClient.invalidateQueries({ queryKey: ['projects'] })

다음 두 쿼리 키가 모두 일치합니다:

const projectsListKey = ['projects']
const projectsPageKey = ['projects', 1, 250, false]

하나의 슬라이스만 무효화해야 하는 경우 더 구체적인 키를 사용합니다:

queryClient.invalidateQueries({
  queryKey: ['projects', this.page],
})

정확히 일치하는 키만 찾으려면 exact: true를 사용합니다:

queryClient.invalidateQueries({
  queryKey: ['projects'],
  exact: true,
})

수동 캐시 업데이트​

무효화는 일반적으로 정규화된 캐시 업데이트보다 간단합니다. 즉각적인 UI 업데이트가 필요한 경우에는 대상이 지정된 캐시 쓰기와 무효화를 함께 사용합니다:

queryClient.setQueryData<TodosResponse>(['todos'], (existing) => {
  if (!existing) return existing

  return {
    ...existing,
    items: [...existing.items, createdTodo],
  }
})

await queryClient.invalidateQueries({ queryKey: ['todos'] })

낙관적 업데이트를 롤백하는 방법은 뮤테이션 가이드와 페이지네이션 예제를 참조하세요.