[React] TanStack Query(React Query)

데이터를 가져오고, 캐싱, 동기화, 업데이트를 효율적으로 관리하기 위한 React 라이브러리

주로 API통신 간소화, 상태 관리 더 효율적으로 처리하기 위해 사용

 

특징

• 데이터 캐싱 : 데이터 자동 캐싱해 동일한 데이터를 다시 요청할 필요 없이 즉시 사용 가능
• 자동 리페치: 오래 되었거나, 다시연결 시 자동으로 데이터를 다시 가져와 동기화
• 백그라운드 데이터 업데이트: 사용자가 애플리케이션을 사용하는 동안 데이터를 비동기적으로 업데이트
• 변경 관찰 및 재시도: API 요청 실패 시 재시도 로직을 내장하고 있으며, 상태 변경을 실시간으로 감지 가능
• 개별 요청 상태 관리: 요청 단위로 로딩, 에러, 성공 상태를 관리 가능

 

설치

npm install @tanstack/react-query

 

 

기본

QueryClient, QueryClientProvider 설정

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 애플리케이션 컴포넌트 */}
      <MyComponent />
    </QueryClientProvider>
  );
}

export default App;

 

 

사용

---

쿼리 적용전

function Coins() {
    const [coins, setCoins] = useState<ICoin[]>([]);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(()=>{
        (async () => {
            const res = await fetch("https://api.coinpaprika.com/v1/coins");
            const json = await res.json();

            setCoins(json.slice(0, 100));
            setIsLoading(false);
        })();
    },[])

	...
}

const [coins, setCoins] = useState([]);
const [isLoading, setIsLoading] = useState(true); 만들필요없이 코드 간단히 줄이기 가능

 

적용후

//api.ts
export function fetchCoins() {
    return fetch(`https://api.coinpaprika.com/v1/coins`).then((res)=>res.json());
}

//export async function fetchCoins() {
//    const res = await fetch(`https://api.coinpaprika.com/v1/coins`);
//    const data = await res.json();
//    return data.slice(0, 100);
//}

 

function Coins() {
    const { isLoading, data } = useQuery<ICoin[]>({
        queryKey: ["allCoins"], //데이터 캐싱 위한 고유키
        queryFn: fetchCoins, //데이터 가져오는 함수
    });
    
    return (
        <>
            {isLoading ? "Loading. . ." :(
                <CoinList>
                    {data?.slice(0,100).map((coin)=>(
                        <Coin key={coin.id}>
                        	{coin.name}
                        </Coin>
                    ))}
                </CoinList>
            )}
        </>
    );
}

 

useQuery() 의 첫번째 파라미터로 unique Key가 들어가고,
두번째 파라미터로 비동기 함수(api호출 함수)가 들어간다.
(두번째 파라미터는 promise 를 반환해야함)

 

* 여러개 쿼리 존재시

const infoQuery = useQuery<IInfoData>({
    queryKey: ['info', coinId],
    queryFn: () => fetchCoin(coinId!), //! null 또는 undefined가 아님을 보증
    enabled: !!coinId, // coinId가 존재할 때만 쿼리 실행
    refetchInterval: 10000,
});

infoQuery.isLoading
infoQuery.data로접근

 

React Query Devtools

---

React Query의 상태(쿼리, 캐시, 로딩 상태 등)를 실시간으로 시각화하고 디버깅할 수 있는 개발 도구

1. 설치

npm install @tanstack/react-query-devtools

2. Devtools 가져오기

import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

3. React Query Provider와 함께 사용

Devtools는 QueryClientProvider 내부에 추가

import React from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div>My App</div>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

export default App;