react-query 가이드 1: 기본 구조와 패칭

yarn add react-query

import axios from 'axios';
import React from 'react';
import { useQuery } from 'react-query';

function RQSuperHeroes() {
  useQuery('super-heroes', () => {
    return axios.get('http://localhost:4000/superheroes');
  });

  return <div>RQSuperHeroes</div>;
}
export default RQSuperHeroes;

useQuery(쿼리키, 프로미스를 리턴하는 콜백함수,{옵션}) 와 같이 기본 구조를 가진다.

인자값 중  쿼리키와 프로미스를 리턴하는 콜백함수는 v4에서 옵션 객체의 queryKey와 queryFn 속성으로 정의한다.
공식 문서v4 에서는 후자의 방법으로 안내하지만 본 게시글에서는 v3를 따른다.
그러나 코드에 따라 v4 코드가 혼재되어 있으니 스스로 판단하여 코드를 수정하길 바람

 

import axios from 'axios';
import React from 'react';
import { useQuery } from 'react-query';

function RQSuperHeroes() {
  const { isLoading, data } = useQuery('super-heroes', () => {
    return axios.get('http://localhost:4000/superheroes');
  });

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

  return (
    <>
      <h2>RQ Super Heroes Page</h2>
      {data?.data.map((hero) => {
        return <div key={hero.name}>{hero.name}</div>;
      })}
    </>
  );
}
export default RQSuperHeroes;

 

 

에러 핸들링

const fetchSuperHeroes = () => {
  return axios.get('http://localhost:4000/superheroes11');
};

function RQSuperHeroes() {
  const { isLoading, data, isError, error } = useQuery(
    'super-heroes',
    fetchSuperHeroes,
  );

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

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

  return (
    <>
      <h2>RQ Super Heroes Page</h2>
      {data?.data.map((hero) => {
        return <div key={hero.name}>{hero.name}</div>;
      })}
    </>
  );
}
export default RQSuperHeroes;

IsError와 error 프로퍼티가 반환되어 편하게 할 수 있다.

 

fetch

• isLoading : 데이터가 아무것도 없을 때 처음으로 데이터를 패칭할 때 유용하다.
• isFetching : 리패치를 해야할 때 유용하다. 즉, 캐시가 있는 상태에서 backgroud refeching 할 때

리액트 쿼리는 모든 쿼리 결과에 대한 값을 디폴트로 5분동안 저장하고 있기 때문이다.

const { isLoading, data, isError, error, isFetching } = useQuery(
    'super-heroes',
    fetchSuperHeroes,
    { cacheTime: 1000,
    staleTime: 30000,
    refetchOnMount: true,
    refetchOnWindowFocus: true,
    //polling
    refetchInterval: false,
    refetchInterval: 2000,
    refetchInterval: false, 
    refetchIntervalInBackground: true 
    },
  );

    cacheTime: 패칭된 데이터가 다른 서브페이지로 이동하더라도 기억해두는 시간
    staleTime: stale(신선하지 않다) 될 시간을 설정하는 속성으로 "백그라운드 패칭" 시간을 관리한다.

    //이하의 refetch는 백그라운드와 data까지의 refetch를 의미한다.

    refetchOnMount: 컴포넌트가 마운트 될 때
    refetchOnWindowFocus: 창이 포커싱 될 때

    refetchInterval: bool(false) || number : 리패칭 시간
        
    refetchIntervalInBackground: true // 창이 포커싱 되지 않아도 알아서 리패칭(백부터 데이터까지)되는 기능