react query에 대해 알아봅시다 !

react query에 대해 공부를 하려고 하니 .. 어우 방대하여라 ~

 

개요

react-query는

- React 어플리케이션에서 사용되며

- 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 다룰 수 있도록 도와주는 라이브러리다. 

- server state를 다루는 것에 특화되어 있다.

| server state란?

 

기능

캐싱

오래된 데이터 업데이트

데이터가 얼마나 오래 되었는지 알 수 있음

데이터 로드가 지연되는 것 같은 성능을 최적화

동일한 데이터에 대한 중복 요청을 단일 요청으로 통합

 

사용 환경 설정

QueryClientProvider를 최상단에서 감싸주고,
QueryClient 인스턴스를 client props로 넘겨줌을 통해
=> react-query를 사용하는 공통의 context를 형성한다.

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

const queryClient = new QueryClient({ /* options */});

function App() {
  return (
   <QueryClientProvider client={queryClient}>
      <div>블라블라</div>
   </QueryClientProvider>;
  );
}

 

useQuery

기본 문법

기본적으로 3개의 인자를 받는다. : queryKey(필수), queryFn(필수), options(옵션)

// 사용법(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);

 

queryKey

• version 4 부터는 무조건 queryKey를 배열로 지정해야한다.
• queryKey를 기반으로 데이터 캐싱을 관리한다.

queryFn

• Promise를 반환하는 함수를 넣어야 한다. (주의 : 서버 데이터를 가져오는 역할 자체를 react query가 하는 것은 아니다 !!!!)

options

: options 만 따로 공부 주제로 다뤄도 될 만큼이다.

• cacheTime (number | Infinity)
  • 데이터가 inactive 일 때, 캐싱된 상태로 남아있는 시간(기본값은 5분)
  • cacheTime 지나면 GC로 수집 됨
  • cacheTime 지나기 전, 쿼리 인스턴스가 다시 mount 될 때, 데이터 가져오는 동안 캐시 데이터를 보여준다.
• staleTime (number | Infinity)
  • 데이터가 fresh->stale 로 변경되는데 걸리는 시간(기본값은 0분)
  • fresh 상태는 다시 mount 되어도 fetching 일어나지 X 
• refetchOnMount (boolean | "always")
  
  • 기본값은 true
  • 데이터가 stale 상태인 경우, mount될 대마다 refetch를 실행
  • false 설정시, 최초 fetch 이후에는 refetch 안함
• refetchInterval(number) & refetchIntervalInBackground(boolean)
  • Polling과 관련된 옵션임 : 리얼타임 웹을 위한 기법으로, 일정 주기를 가지고 서버와 응답을 주고 받는 방식
  • refetchIntervalInBackground:true 시, 창이 focus 되어 있지 않아도 refetchInterval 주기마다 refetch됨
• onSuccess, onError, onSettled는 useQuery 옵션에서 version 5부터 삭제될 예정, useMutation에는 남아있음

useQuery 주요 return 데이터

const { status, isLoading, isError, error, data, isFetching, ... } = useQuery(
  ["colors", pageNum],
  () => fetchColors(pageNum)
);

• status: 쿼리 요청 함수의 상태를 표현하는 status는 4가지의 값이 존재한다.(문자열 형태)
  
  • loading: 말 그대로 아직 캐시된 데이터가 없고 로딩중일 때 상태
  • error: 요청 에러 발생했을 때 상태
  • success: 요청 성공했을 때 상태
• fetchStatus (Version4 부터 생겨난 개념, queryFn 요청이 진행중인지 아닌지에 대한 상태를 의미)
  • fetching: 쿼리가 현재 실행중이다. (보통 re-fetch가 발생할 상태 일 때)
  • paused: 쿼리를 요청했지만, 잠시 중단된 상태이다. (보통 status = loading 이지만 네트워크 연결 오류 상태일 때)
  • idle: 쿼리가 현재 아무 작업도 수행하지 않는 상태이다. (보통 status = success 상태일 때)
• data: queryFn가 리턴한 Promise에서 resolved된 데이터
• isLoading: 캐싱 된 데이터가 없을 때 즉, 처음 실행된 쿼리 일 때 로딩 여부에 따라 true/false로 반환된다.
  • 이는 캐싱 된 데이터가 있다면 로딩 여부에 상관없이 false를 반환한다.
• isFetching: 캐싱 된 데이터가 있더라도 쿼리가 실행되면 로딩 여부에 따라 true/false로 반환된다.
  • 이는 캐싱 된 데이터가 있더라도 쿼리 로딩 여부에 따라 true/false를 반환한다.
• error: 쿼리 함수에 오류가 발생한 경우, 쿼리에 대한 오류 객체
• isError: 에러가 발생한 경우 true

쿼리를 병렬로 요청할 수 있는 useQueries

기존에도 쿼리 함수들은 병렬로 요청되어 처리 되었다. 쿼리 처리의 동시성을 가지고 있는 것이다.

그것과 동일한 역할을 하는 것이 useQueries이다.

(근데 이게 왜 도입된 훅 개념인지 모르겠다)

// v4
const queryResults = useQueries({
  queries: [
    {
      queryKey: ["super-hero", 1],
      queryFn: () => fetchSuperHero(1),
      staleTime: Infinity, // 다음과 같이 option 추가 가능
    },
    {
      queryKey: ["super-hero", 2],
      queryFn: () => fetchSuperHero(2),
      staleTime: 0,
    },
    // ...
  ],
});