Crypto tracker #4 React Query(2)

React Query Devtools

React Query의 모든 내부 작동을 시각화하는 데 도움이 되며 문제가 발생하면 디버깅 시간을 절약할 수 있다.
( = 캐시에 있는 query 를 직접 볼 수 있다.)
process.env.NODE_ENV === 'development'인 경우에만 번들에 포함되므로
프로덕션 빌드 중에 제외하는 것에 대해 걱정할 필요가 없다.

사용방법

• 설치 : npm i -D @tanstack/react-query-devtools

import { ReactQueryDevtools } from 'react-query/devtools';

<ReactQueryDevtools initialIsOpen={true} />

• false or true로 보이게 설정할 수 있다.
• 그럼 아래와 같이 query 를 확인할 수 있다.
  

React Query (2)

• 이전 포스팅에서 'Coins.tsx' 페이지에서 React Query 를 다뤘으니
  'Coin.tsx' 페이지에 적용해줄 차례다.
• fetchCoinInfo,fetchCoinTickers 2개의 fetcher 함수 만들기.

- api.ts

const BASE_URL = `https://api.coinpaprika.com/v1`;

export function fetchCoins() {
  return fetch(`${BASE_URL}/coins`).then(response => response.json());
}

export function fetchCoinInfo(coinId: string) {
  // → coinId 가 정의되지 않았으므로, argument 로 coinId 을 넘겨준다.
  return fetch(`${BASE_URL}/coins/${coinId}`).then(response => response.json());
}

export function fetchCoinTickers(coinId: string) {
  return fetch(`${BASE_URL}/tickers/${coinId}`).then(response =>
    response.json()
  );
}

• BASE_URL 을 만들어준 다음 뒤의 내용만 수정했다. 그리고 똑같이 .then() 을 통해 json 파일을 추출해줌.
• 그리고 Coin() 에 적용해준다.

- Coin.tsx

function Coin() {
  const { coinId } = useParams() as unknown as RouteParams;
  const { state } = useLocation() as RouteState;
  const priceMatch = useMatch("/:coinId/price");
  const chartMatch = useMatch("/:coinId/chart");
  const { isLoading: infoLoading, data: infoData } = useQuery<InfoData>(
    ["info", "coinId"],
    () => fetchCoinInfo(coinId)
        // → fetcher 함수에게 url로부터 오는 coinId 를 넘겨줘야하므로 익명함수 처리
  );
  const { isLoading: tickersLoading, data: tickersData } = useQuery<PriceData>(
    ["tickers", "coinId"],
    () => fetchCoinTickers(coinId),
    {
      refetchInterval: 5000,
       // → 5초마다 state 실시간 업데이트
    }
  );
  const loading = infoLoading || tickersLoading;

• 동일한 query key 는 주어질 수 없으므로
  ["info", "coinId"],, ["tickers", "coinId"],
  따라서 각각의 array 에 다른 값을 추가했다.
• 또한, 동일한 이름을 가진 isLoading,data 가 2개가 될 순 없으므로
  const { isLoading: infoLoading, data: infoData },
  { isLoading: tickersLoading, data: tickersData }
  와 같이 이름을 변경해주었다.
• 추가로, 두 개의 isLoading을 가지고 있으므로 한번에 모아서 처리해주기 위해 변수를 선언했다.
  const loading = infoLoading || tickersLoading;
• 이후에는 이전 포스팅에서 한 것과 같이 대체 데이터로 모두 변경해주고,
  만들어놓은 interface도 설정해주었다.

• Done!