useQuery | TanStack Query Docs

// 사용법(1)
const { data, isLoading, ... } =  useQuery(queryKey, queryFn, {
  // ...options ex) enabled, staleTime, ...
});

// 사용법(2)
const result = useQuery({
  queryKey,
  queryFn,
  // ...options ex) enabled, staleTime, ...
});

result.data
result.isLoading
// ...

// 실제 예제
const getAllSuperHero = async () => {
  return await axios.get("<http://localhost:4000/superheroes>");
};

const { data, isLoading } = useQuery(["super-heroes"], getAllSuperHero);

useQuery 기본 문법

• useQuery는 기본적으로 3개의 인자를 받는다. 첫 번째 인자가 queryKey(필수), 두 번째 인자가 queryFn(필수), 세 번째 인자가 options(optional)이다.

1. querykey

• queryKey의 경우 무조건 배열로 지정해야 한다.

// (1)
const getSuperHero = async ({ queryKey }: any) => {
  const heroId = queryKey[1]; // queryKey: ['super-hero', '3']

  return await axios.get(`http://localhost:4000/superheroes/${heroId}`);
};

const useSuperHeroData = (heroId: string) => {
  // 해당 쿼리는 heroId에 의존
  return useQuery(["super-hero", heroId], getSuperHero);
};

• useQuery는 첫 번째 인자인 queryKey를 기반으로 데이터 캐싱을 관리한다.

  • 만약, 쿼리가 특정 변수에 의존한다면 배열에 이어서 넣어주면 된다.
    • ex: ["super-hero", heroId, ...]
  • 아래 options 예제를 살펴보면 useSuperHeroData의 queryKey는 ["super-hero", heroId]이다. 그렇다면 queryClient.setQueryData를 이용할 때 똑같이 ["super-hero", heroId] 포맷을 가져야 한다. 안그러면 제대로 원하는 쿼리 접근이 안된다.

  // 예
  const useSuperHeroData = (heroId: string) => {
    return useQuery(["super-hero", heroId], () => getSuperHero(heroId), {
      cacheTime: 5 * 60 * 1000, // 5분
      staleTime: 1 * 60 * 1000, // 1분
      retry: 1,
      // ...options
    });
  };
  

2. queryFn

// (2)
const getSuperHero = async (heroId: string) => {
  return await axios.get(`http://localhost:4000/superheroes/${heroId}`);
};

const useSuperHeroData = (heroId: string) => {
  return useQuery(["super-hero", heroId], () => getSuperHero(heroId));
};

• useQuery의 두 번째 인자인 queryFn는 Promise를 반환하는 함수를 넣어야한다.

• 참고로, queryKey의 예제와 queryFn 예제가 약간 차이점이 있다.

  • queryKey 예제는 2번째 queryFn에 getSuperHero 함수를 바로 넘겨주고, getSuperHero에서 매개 변수로 객체를 받아와 해당 객체의 queryKey를 활용하고 있다.
  • queryFn 예제는 그냥 2번째 queryFn에 화살표 함수를 사용하고, getSuperHero의 인자로 heroId를 넘겨주고 있다.
  • 해당 두 가지 방법은 모두 알아야되고, 결과는 동일하다.

• 몇 가지 상황을 제외하면 쿼리 여러 개가 선언된 일반적인 상황일 때, 쿼리 함수들은 그냥 병렬로 요청돼서 처리된다.

• 이러한 특징은 쿼리 처리의 동시성을 극대화 시킨다.

3. options

• useQuery의 세 번째 인자인 options의 경우 공식 문서에서 더 자세히 확인을 할 수 있으며, 주요 옵션들만 정리해 두었다.