useQuery(isFetching, gcTime)

• 쿼리가 처음 실행 될때 isLoading이 true로 설정되고 요청이 완료되면 data를 가져오기 위해 네트워크 요청이 전송되며, 쿼리 키를 사용하여 캐싱된다.

• 그 후 다른 페이지를 갔다가 다시 돌어오면 쿼리 키를 사용하여 캐시된 데이터가 로딩없이 즉시 반환하기 때문에 이 쿼리에 대한 데이터가 캐시에 존재하는 지 확인한다.

• 다만 서버 데이터가 업데이트되었을 수 있고, 캐시에 최신 데이터가 포함되어 있지 않을 수 있음을 알고 있으므로, background refetch가 발생하여 최신 데이터를 다시 가져오는 과정이 트리거(재실행)하고 가져오기가 성공하면 새 데이터가 UI에 업데이트된다.

• background refetch를 나타내는 blooean플래그를 제공한다. -> isFetching

• React Query의 기본 캐시 유효 시간(cacheTime)은 5분이다. 변경하고 싶은 경우 세번째 인수에 gcTime를 추가한다.

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

const featchSuperHeroes = async () => {
  const res = await fetch("http://localhost:4000/superheroes");
  const result = await res.json();
  return result;
};

export const RQSuperHeroesPage = () => {
  const { isLoading, isError, error, isFetching, data } = useQuery({
    queryKey: ["super-heroes"],
    queryFn: featchSuperHeroes,
    gcTime: 5000,
  });

  console.log({ isLoading, isFetching });

  if (isLoading) {
    return <h2>Loading...</h2>;
  }

  if (isError) {
    return <h2>{error.message}</h2>;
  }

  return (
    <>
      <h2>React Query Super Heroes Page</h2>
      {data?.map((hero) => {
        return <div key={hero.id}>{hero.name}</div>;
      })}
    </>
  );
};

https://www.youtube.com/playlist?list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2