[ReactQuery] 데이터를 미리 가져와 캐시에 넣는 Prefetching !

❓ Prefetching

Prefetching은 데이터가 실제로 필요하기 전에 사전에 데이터를 가져오고 캐시에 저장하는 프로세스를 말한다.

이를 통해 데이터를 미리 가져올 수 있으므로 필요할 때 데이터를 즉시 사용할 수 있도록 하여 애플리케이션의 응답성과 사용자 경험을 개선할 수 있도록 한다.

 

정리하자면 주요 내용은 다음과 같다.

• 데이터를 사용하고자 할 때 만료 상태에서 데이터를 다시 가져온다.
• 데이터를 가져오는 중에는 캐시에 있는 데이터를 이용해 화면에 나타낸다.
• 추후 사용자가 사용할 법한 데이터에 Prefetching을 사용 한다.
• pagination과 다수의 사용자가 웹에서 특정 탭을 누를 확률이 높은 곳에는 prefetching을 통해 해당 데이터를 미리 가져오는 것이 좋다.

---

✔ 초기 셋팅

import { useQueryClient } from "react-query";

prefetching을 위해서는 먼저 useQueryClient를 import 해야한다.

 

그리고 사용하고자 하는 컴포넌트에

  const queryClient = useQueryClient();

useQueryClient를 호출해주어야한다.

 

다음으로 prefetchQuery를 사용하여 데이터를 미리 가져오는 예제를 살펴보도록 하자

---

❗ 예제

import { useQueryClient } from 'react-query';

function ExampleComponent() {
  const queryClient = useQueryClient();

  const handlePrefetchData = async () => {
    // 'posts' 쿼리를 prefetch한다.
    await queryClient.prefetchQuery('posts', fetchPosts);
    
    // 특정 매개변수를 사용하여 'comments' 쿼리를 prefetch한다.
    await queryClient.prefetchQuery(['comments', postId], fetchComments);
  };

  return (
    <div>
      <button onClick={handlePrefetchData}>PreFetch Data</button>
    </div>
  );
}

 

위 예시에서는 React Query에서 useQueryClient 훅을 가져와서 ExampleComponent 내부에서

useQueryClient를 사용하여 queryClient 인스턴스에 접근한다.
handlePrefetchData 함수는 prefetchQuery 메서드를 사용하여 데이터를 prefetch하는 방법을 보여준다:

prefetchQuery메서드를 사용하여 특정 쿼리를 prefetch 할 수 있다. 데이터가 실제로 필요한 시점에 미리 캐시에 데이터가 존재하도록 한다.

예시에서는 fetchPosts 함수를 사용하여 'posts' 쿼리를 prefetch 하고 postId와 같은 특정 매개변수를 사용하여 'comments' 쿼리를 prefetch한다.

글의 초입부에서 말했듯이 useQueryClient와 prefetchQuery 메서드를 활용하여 데이터를 미리 가져와 캐시에 저장함으로써 애플리케이션의 응답성과 사용자 경험을 향상시킬 수 있다.

특정 데이터가 필요한 시점을 예측하고 요청 시점에 미리 데이터를 준비하고자 할 때 prefetching은 매우 유용하다.

---

❗ 알아두어야 할 사항

1. useQueryClient 훅은 QueryClient 인스턴스에 접근해야 하는 컴포넌트 내에서 사용해야 한다.

import { useQueryClient } from 'react-query';

function ExampleComponent() {
  const queryClient = useQueryClient();

  // queryClient 인스턴스에 액세스하고 작업을 수행한다.

  return (
    // 컴포넌트
  );
}

이 예에서 useQueryClient 후크는 ExampleComponent 내에서 QueryClient 인스턴스에 액세스하는 데 사용된다.

그런 다음 queryClient 개체를 사용하여 데이터 미리 가져오기, 쿼리 무효화 또는 데이터 수동 가져오기와 같은 다양한 작업을 수행할 수 있다.

useQueryClient 후크를 사용하는 구성 요소가 해당 구성 요소와 해당 하위에 QueryClient 인스턴스를 제공하기 위해 구성 요소 트리의 최상위 수준에서 QueryClientProvider로 래핑되었는지 확인해야 한다.

 

2. preFetchQuery의 Query key와 preFetchQuery를 하려는 useQuery의 Query key는 같아야한다.

왜냐하면, 캐시에서 어느 useQuery의 캐시 데이터를 찾아야하는지 알려주기 때문에 매우 중요하다.