React Query 중요한 개념 : 캐싱과 쿼리 키

캐싱

 

useQuery를 사용하여 쿼리된 데이터는 "trending"이라는 키로 명명되어  React Query 캐시에 저장된다. 캐시에 저장된 데이터를 불러 사용할수 있고 변형시킬 수도 있다. 

  const { isLoading: trendingLoading, data: trendingData } = useQuery(
    "trending",
    moviesAPI.treding
  );

만약 같은 화면에 위와 같은 동일한 쿼리를 사용했다면, react query 는 다시 fetch 하지 않고 캐시에서 데이터를 가져온다. 

 동일한 쿼리를 다른 컴포넌트에서 사용했다면 역시나 fetch가 다시 일어나지 않고 캐시에서 가져온다.

 

어떤 쿼리를 동일한 쿼리로 취급하고 또는 다른 쿼리로 취급한다는 말인가!

// 동일한 것으로 간주되는 쿼리들
 useQuery(['todos', { status, page }], ...)
 useQuery(['todos', { page, status }], ...)
 useQuery(['todos', { page, status, other: undefined }], ...)

 // 서로 다른 쿼리로 취급됨
 useQuery(['todos', status, page], ...)
 useQuery(['todos', page, status], ...)
 useQuery(['todos', undefined, page, status], ...)

쿼리 키가 같더라도, Array안의 순서가 다르다면 다른 쿼리로 간주하고 새로 fetch 한다.