import React from 'react';
import './App.css';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
const queryClient = new QueryClient();
const App = () => {
return (
<QueryClientProvider client={queryClient}>
<div className="App"></div>
</QueryClientProvider>
);
};
export default App;
query
또는 mutation
기본 옵션을 추가할 수 있습니다.import React from 'react';
import './App.css';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: 0,
suspense: true,
useErrorBoundary: true
},
mutations: {
retry: 0,
suspense: true,
useErrorBoundary: true
}
},
})
const App = () => {
return (
<QueryClientProvider client={queryClient}>
<div className="App"></div>
</QueryClientProvider>
);
};
export default App;
...
// ✅ only todos will retry 2 times
queryClient.setQueryDefaults('getUser', { retry: 2 })
...
const {data: user, error, status} = useQuery(
['getUser'],
getUserApi,
{
enabled: !!userId,
onError: () => {...},
onSuccess: () => {...}
}
refetchOnWindowFocus, // default: true
refetchOnMount, // default: true
refetchOnReconnect, // default: true
staleTime // default: 0
cacheTime, // default: 5분 (60*5*1000)
- 기본적으로 쿼리 결과는 데이터가 실제로 변경되는지 감지하기 위해 공유함
- 변경되지 않는 경우 데이터 참조가 변경되지 않는 상태 유지
false
로 설정하면 쿼리가 자동으로 호출되지 않음 ➡ 최초 선언 시 호출을 막을수 있음default: true
const {data: user, error, status} = useQuery(
['getUser'],
getUserApi,
{
enabled: !!userId // true가 되면 getUserApi를 실행함
}
Infinity
로 설정하면 쿼리 데이터는 직접 캐시를 무효화할 때 까지 fresh
상태로 유지default: 0
default: false
default: false
default: false
default: true
mount
된 경우 reftch
여부 결정합니다.true
로 설정한 경우 stale 상태일 때 refetchdefault: true
- parent component render
useQuery
호출 ➡ isFetching, isLoading : true- 요청완료
- isFetching, isLoading : false
- query key 값을 식별자 데이터 캐싱처리
- data
fresh
상태,staleTime
이후stale
상태 변환- parent component 리 랜더링되며 자식 children component의
useQuery
호출
- 데이터
stale
상태,refetchOnMount
:true 이므로background refetch
가 실행
➡ 처음 fetching 이후 staleTime
과 refetchOnMount
설정으로 refetching을 하며 총 2번 요청
false
로 설정한 경우 쿼리에 오류가 포함되어 mount 시, 쿼리 재시도되지 않습니다.const {data: user, error, status} = useQuery(
['getUser'],
getUserApi,
{
notifyOnChangeProps: ['data'],
}
const {data: user, error, status} = useQuery(...);
의 data
만 변경이 된 경우 리렌더링status
를 이용하여 조건부 렌더링을 하는 경우 문제가 발생함 ➡ status
의 변경여부를 감지할 수 없음notifyOnChangeProps: 'tracked'
object rest destructuring
을 사용한다면 모든 필드를 추적함으로 주의해야 함🤦const userData = useQuery(...);
React.useEffect(() => {
console.log(userData.data)
})
🚫 tracked
를 설정하여 사용 중인 속성은 약간의 오버헤드가 발생할 수 있으므로 상황에 따라 사용해야 함
setQueryData
를 통해 캐시가 업데이트가 될 때마다 실행합니다.suspense: true
또는 useErrorBoundary: true
설정한 경우, 모든 오류는 에러바운더리로 넘겨짐default: false
{
select: data => data.filter((user) => user.id === 1));
}
true
설정하면 status === 'loading'
상태인 경우 쿼리 일시 중단true
설정하면 status === 'error'
상태인 경우 런타임 오류 발생default: false
data
를 유지하기 위한 옵션data
의 값을 유지합니다pageNation
을 구현할 때, 유용하게 쓰임 ➡ 캐시되지 않는 페이지 호출한 경우 화면의 view 컴포넌트가 사라지는 현상을 방지isPreviusData
값으로 현재 queryKey
에 해당하는 값을 확인 할 수 있음initialData
가 제공되지 않는 동안 특정 쿼리 관찰자의 자리 표시자로 데이터를 사용default: 5 * 30 * 1000 (5분)
Infinity
설정 시 쿼리 데이터가 캐시에서 제거되지 않음default: 3
Thanks for your sharing! this is really helpful, I am always trying to escape road like this. https://escaperoads.org
The narrative structure of escape road city 2 is crafted to keep players engaged with its twists and turns. Just when you think you’ve figured everything out, new revelations can change your perspective. How will you adapt to the evolving story as you progress through the game?
The Drive Mad blends realistic physics with arcade-style mechanics, allowing for gravity-defying stunts, flips, and jumps that make every level more exciting than the last.