본문으로 건너뛰기

QueryCache

QueryCache는 TanStack Query의 저장소 메커니즘입니다. 포함된 쿼리의 모든 데이터, 메타 정보 및 상태를 저장합니다.

일반적으로 QueryCache와 직접 상호작용하지 않고, 대신 특정 캐시에 QueryClient를 사용합니다.

import { QueryCache } from '@tanstack/react-query'

const queryCache = new QueryCache({
  onError: (error) => {
    console.log(error)
  },
  onSuccess: (data) => {
    console.log(data)
  },
  onSettled: (data, error) => {
    console.log(data, error)
  },
})

const query = queryCache.find({ queryKey: ['posts'] })

사용 가능한 메서드는 다음과 같습니다:

옵션

  • onError?: (error: unknown, query: Query) => void
    • 선택 사항
    • 일부 쿼리에서 오류가 발생하면 이 함수가 호출됩니다.
  • onSuccess?: (data: unknown, query: Query) => void
    • 선택 사항
    • 일부 쿼리가 성공하면 이 함수가 호출됩니다.
  • onSettled?: (data: unknown | undefined, error: unknown | null, query: Query) => void
    • 선택 사항
    • 이 함수는 어떤 쿼리가 완료되면(성공하거나 오류가 발생한 경우) 호출됩니다.

queryCache.find​

find는 캐시에서 기존 쿼리 인스턴스를 가져오는 데 사용할 수 있는 조금 더 고급인 동기식 메서드입니다. 이 인스턴스에는 쿼리의 모든 상태뿐 아니라 모든 인스턴스와 쿼리의 내부 구조도 포함됩니다. 쿼리가 존재하지 않으면 undefined가 반환됩니다.

참고: 대부분의 애플리케이션에는 일반적으로 필요하지 않지만, 드문 상황에서 쿼리에 관한 추가 정보가 필요할 때 유용할 수 있습니다(예: query.state.dataUpdatedAt 타임스탬프를 확인하여 쿼리가 초기 값으로 사용하기에 충분히 최신인지 판단하는 경우).

const query = queryCache.find({ queryKey })

옵션

반환값

  • Query
    • 캐시의 Query 인스턴스

queryCache.findAll​

findAll은 쿼리 키와 부분적으로 일치하는 기존 쿼리 인스턴스를 캐시에서 가져오는 데 사용할 수 있는 훨씬 더 고급인 동기식 메서드입니다. 쿼리가 존재하지 않으면 빈 배열이 반환됩니다.

참고: 일반적으로 대부분의 애플리케이션에는 필요하지 않지만, 드문 상황에서 쿼리에 관한 추가 정보가 필요할 때 유용할 수 있습니다

const queries = queryCache.findAll({ queryKey })

옵션

반환값

  • Query[]
    • 캐시의 쿼리 인스턴스

queryCache.subscribe​

subscribe 메서드를 사용하면 쿼리 캐시 전체를 구독하고, 쿼리 상태가 변경되거나 쿼리가 업데이트, 추가 또는 제거되는 것과 같이 안전하고 알려진 캐시 업데이트에 관한 알림을 받을 수 있습니다

const callback = (event) => {
  console.log(event.type, event.query)
}

const unsubscribe = queryCache.subscribe(callback)

옵션

  • callback: (event: QueryCacheNotifyEvent) => void
    • 이 함수는 추적되는 업데이트 메커니즘(예: query.setState, queryClient.removeQueries 등)을 통해 쿼리 캐시가 업데이트될 때마다 쿼리 캐시와 함께 호출됩니다. 범위를 벗어나 캐시를 변경하는 뮤테이션은 권장하지 않으며 구독 콜백을 실행하지 않습니다

반환값

  • unsubscribe: Function => void
    • 이 함수는 쿼리 캐시에서 콜백을 구독 해제합니다.

queryCache.clear​

clear 메서드를 사용하면 캐시를 완전히 비우고 새로 시작할 수 있습니다.

queryCache.clear()

추가 자료​

QueryCache의 내부 작동 방식을 더 잘 이해하려면 TkDodo가 작성한 React Query 내부 살펴보기 문서를 참조하세요.