fetching
), 저장하고(caching
), UI와 동기화(synchronizing
), 최신 데이터로 update
하는 로직을 쉽게 작성할수 있도록 도와주는 라이브러리$ npm i react-query
// or
$ yarn add react-query
import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
const queryClient = new QueryClient();
const App = () => {
return (
<QueryCLientProvider client={queryCLient}>
...
</QueryClientProvider>
)
}
key
는 string 또는 array 타입으로 해당 쿼리를 식별할 수 있는 값으로 사용된다key
면 같은 데이터를 불러오게된다. A, B 컴포넌트에서 같은 key
값을 사용한다면 먼저 렌더링 되는 곳 예를 들어 A에서 api 호출을 하게되면 B에서는 A에서 받아온 값을 사용하게됨 (각각 api 호출 ❌)key
를 array 타입으로 사용하는 경우 배열 아이템의 순서가 달라져도 다른 key
로 간주한다.key를 Array 형태로 사용하는 경우
1. 데이터 항목을 식별하기 위한 값을 넣는 경우
2. 매개변수가 있는 쿼리
- === 쿼리에 종속성을 추가하기 위해 사용
import { useQuery } from 'react-query';
const Awesome = () => {
const { data } = useQuery('key', fetcher);
}
useQuery
의 반환값으로 데이터 사용에 필요한 쿼리에 모든 정보가 포함되어있음const {
data,
dataUpdatedAt,
error,
errorUpdatedAt,
failureCount,
isError,
isFetched,
isFetchedAfterMount,
isFetching,
isIdle,
isLoading,
isLoadingError,
isPlaceholderData,
isPreviousData,
isRefetchError,
isState,
isSuccess,
refetch,
remove,
status,
} useQuery(key, fetcher, {
cacheTime,
enabled,
initialData,
initialDataUpdatedAt
isDataEqual,
keepPreviousData,
meta,
notifyOnChangeProps,
notifyOnChangePropsExclusions,
onError,
onSettled,
onSuccess,
placeholderData,
queryKeyHashFn,
refetchInterval,
refetchIntervalInBackground,
refetchOnMount,
refetchOnReconnect,
refetchOnWindowFocus,
retry,
retryOnMount,
retryDelay,
select,
staleTime,
structuralSharing,
suspense,
useErrorBoundary,
}
resolve
되지 않았음을 의미isFetching
의 하위 집합, 비동기 요청이 fetching
상태에 있다는 의미(+캐시된 데이터도 없음)enable: false
로 설정되고 초기 데이터를 사용할 수 없는 경우 isFetching vs isLoading
- isFetching은 캐시데이터가 있든 없든 데이터를 load 중일때 true
key
값으로 쿼리를 표시react-query
패키지의 번들로 제공process.env.NODE_ENV === 'development
가 설정되있다. import { ReactQueryDevtools } from 'react-query/devtools'
refetching
하는지 여부를 결정하는 시간 cache data
를 오래된 데이터로 간주stale data
가 자동으로 refetching
하는 경우refocuse
될 때refetch interval
설정이 되있을 때active
되고서 경과한 시간garbage collection
이 자동으로 수거queryClient
의 메소드인 prefetchQuery
사용import { useEffect } from 'react';
import { useQuery, useQueryClient } from 'react-query';
const Example = () => {
const queryclient = useQueryClient();
const { data, isLoading } = useQuery(queryKey, queryFn, {
stealeTime: 2000, // 2sec 후 오래된 데이터로 간주
keepPreviousData: true, // 쿼리 키가 변경되어 새 데이터를 가져올 때 이전 데이터가 유지됨
});
useEffect(() => {
queryClient.prefetchQuery(queryKey, queryFn);
}, [dependency])
}
export default Example;
useQuery
와 비슷하지만 mutation func
을 반환한다.query key
가 필요없다.isLoading but no isFetching
useQuery
와 달리 실패시 재 요청을 하지 않는다.(설정으로 변경 가능)useMutation
인자로 queryFnc를 전달하여 mutation 객체로 사용mutation
의 mutate
속성을 통해 등록한 queryFnc를 호출시킨다.import { useMutation } from 'react-query';
const Example = () => {
const exampleMutation = useMutation((param) => examplePostAPI(param));
return (
<>
<button
type="button"
onClick={() => exampleMutation.mutate(param)}
>
Click
</button>
{exampleMutation.isError && (<span>Error</span>)}
{exampleMutation.isLoading && (<span>Loading</span>)}
{exampleMutation.isSuccess && (<span>Success</span>)}
</>
)
}
export default Example;
useQuery
와 반환되는 데이터 속성이 다르다.