리액트 쿼리는 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주며 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어진 라이브러리
클라이언트 상태 - useState와 같니 컴포넌트 각자가 갖고 있는 상태
서버 상태 - DB에 저장되어 있는 데이터 상태
리액트 쿼리가 말하길 기본 상태 관리 라이브러리(redux, mobX)는 클라이언트 상태에 적합 but 비동기 또는 서버 상태 작업에 그다지 좋지 않다고 말한다.
fresh : 새롭게 추가되거나 만료되지 않은 쿼리 → 컴포넌트가 마운트, 업데이트 되어도 재요청 X
fetching : 요청 중인 쿼리
stale : 만료된 쿼리 → 컴포넌트가 마운터 업데이트 되면 재요청 O
inactive : 비활성화된 쿼리 → 특정 시간이 지나면 가비지 컬렉터에 의해 제거
cacheTime : inactive에서 가비지 컬렉터에 의해 제거되는 데 까지의 시간?
staleTime : fresh상태에서 stale 상태로 전환되는 시간
import { useQuery } from '@tanstack/react-query';
// useQuery(쿼리 키, 쿼리 함수, 옵션);
const { data, isLoading, isError }
= useQuery(['resource', pid], () => getResource(pid), {enabled: !!pid});
옵션 : cacheTime, staleTime, refetchOnMount, refetchOnWindowFocus, refetchInterval, refetchIntervalInBackground, enabled, onSuccess, onError, select
위 코드에서 enabled를 사용하여 pid를 받아온 후 getResource를 실행하도록 동기적 실행을 하도록 처리
import { useQuery, useQueryClient } from '@tanstack/react-query';
const queryClient = useQueryClient();
// useMutation(API 호출 함수, 콜백);
const updateResource = useMutation(
({ rid }) => updateOneResource(rid),
{
onSuccess: () => queryClient.invalidateQueries(['resource', pid]), // queryKey 유효성 제거
}
);
updateResource.mutate({rid}, {onSuccess: ()=> {}})
invalidateQueries : qeury를 무효화하여 데이터를 새로 fetching한다.
위 코드에서는 updateOneResource함수가 실행에 성공한 후 ‘resource’, pid 키를 가진 쿼리를 새롭게 fetching 한다.
export default function useResource(pid) {
const queryClient = useQueryClient();
const resourceQuery = useQuery(
['resource', pid || ''],
() => getAllResource(pid),
{ enabled: !!pid }
);
const updateResource = useMutation(
({ rid }) => updateOneResource(pid, rid),
{
onSuccess: () => queryClient.invalidateQueries(['resource', pid]),
}
);
return { resourceQuery, updateResource };
}
다음과 같이 데이터를 받아 오는 것과 데이터를 업데이트 하거나 생성하는 과정을 하나의 커스텀 훅에 정리해두어 유지보수성 up, ui와 비즈니스 로직을 분리!!