기술 블로그
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 // 창이 포커싱 되지 않아도 알아서 리패칭(백부터 데이터까지)되는 기능
반응형
'프론트엔드' 카테고리의 다른 글
[TIL] Next.js localStorage -> getSeverSIdeProps 우회통신 (0) | 2023.09.27 |
---|---|
Recoil Expectation Violation: Duplicate atom key "". (0) | 2023.09.26 |
왜 커스텀 훅을 쓸까 (0) | 2023.06.09 |
앞으로 공부하면 좋을 것들 정리 (0) | 2023.01.12 |
[GDSC 미니프로젝트] moida 회고 (0) | 2023.01.12 |
Comments