2023.09.13

getQueryData 메서드를 사용하여 캐시된 데이터를 가져오는 방법에 대해 알아보자. getQueryData는 React Query에서 제공하는 메서드 중 하나로, 쿼리의 캐시된 데이터에 접근할 때 유용하다. 

 

1. useQuery를 통한 쿼리 정의

먼저, 원격 서버에서 데이터를 가져올 쿼리를 useQuery를 사용하여 정의한다.

 import { useQuery } from 'react-query'; 
 
 const { data, isLoading } = useQuery('myDataQuery', fetchDataFunction);

 

위의 코드에서 'myDataQuery'는 쿼리의 고유한 키이고, fetchDataFunction은 데이터를 가져오는 비동기 함수를 나타낸다.

 

2. queryClient와 getQueryData 사용

queryClient는 React Query에서 제공하는 클라이언트 객체로, 여기서는 쿼리 데이터를 관리한다. getQueryData를 사용하여 캐시된 데이터에 접근할 수 있다.

import { useQueryClient } from 'react-query'; 
const queryClient = useQueryClient(); 
const cachedData = queryClient.getQueryData('myDataQuery');

cachedData는 'myDataQuery' 쿼리의 캐시된 데이터이다.

 

3. 사용

데이터를 성공적으로 가져온 경우 서버에서 가져온 데이터와 함께 캐시된 데이터도 표시해보자. 

 import { useQuery } from 'react-query'; 
 import { useQueryClient } from 'react-query'; 
 
 const queryClient = useQueryClient(); 
 const { data, isLoading } = useQuery('myDataQuery', fetchDataFunction);
 const cachedData = queryClient.getQueryData('myDataQuery');


return (
  <div>
    {isLoading ? (
      <p>Loading...</p>
    ) : (
      <>
        <p>서버에서 가져온 데이터: {data}</p>
        <p>캐시된 데이터: {cachedData}</p>
      </>
    )}
  </div>
);

 

getQueryData를 사용하면 캐시된 데이터를 가져와서 화면에 표시할 수 있다. 이는 새로운 데이터를 가져오기 위해 요청을 보내기 전에 캐시된 데이터를 활용하는 데 유용하다.