참고자료 : React Query와 상태관리 :: 2월 우아한테크세미나
Fetch, cache and update data in your React and React Native applications all without touching any "global state".
선언적 코드 및 직관적인 API
Client Store가 fe에서 필요한 전역 상태만 남아 Store답게 사용됨.
API 처리에 관한 각종 인터페이스 및 옵션
추가 기능
import {useQuery} from 'react-query';
function App() {
const info = useQuery('todos', fetchTodoList);
// useQuery(['todo', 5, {preview: true}], fetchTodoList);
// query key는 array 형태로도 쓸 수 있음
}
data(resolve된 데이터),
error(에러가 발생했을 때 반환되는 객체),
isFetching(Request가 in-flight 중일 때 true),
status, isLoading, isSuccess, isLading 등 모두 query의 상태,
refetch(해당 query refetch하는 함수 제공),
remove(해당 query chahe에서 지우는 함수 제공)
useQuery('todos', fetchTodoList, options);
// options에 들어가는 내장 api
onSuccess, onError,onSettled:query fetching 성공/실패/완료 시 실행할 Side Effect 정의,
enabled: 자동으로 query를 실행시킬지 말지 여부,
retry : query 동작 실패 시, 자동으로 retry 할지 결정하는 옵션,
select : 성공 시 가져온 data를 가공해서 전달,
keepPreviousData : 새롭게 fetching 시 이전 데이터 유지 여부,
refetchInterval : 주기적으로 refetch 할지 결정하는 옵션
function Practice() {
const todo = useQuery('todos', fetchTodoList);
const project = useQuery('project', fetchProject);
const food = useQuery('food', fetchFood);
}
const mutation = useMutation((newTodo) => {
// mutation은 자동으로 실행되지 않음. mutate함수와 비동기 함수인 mutateAsync로 실행해야 함.
return axios.post('/todos', newTodo);
});
mutate(mutation을 실행하는 함수),
mutateAsync(mutate와 비슷 promise를 반환),
reset(mutation 내부 상태 clean),
useQuery와 유사
const mutationOp = useMutation(mutationFn, options);
queryClient.invalidateQueries(); // 캐시 내의 모든 쿼리 무효화
queryClient.invalidateQueries('todos'); // 'todos'로 시작하는 모든 쿼리 무효화
refetchOnMount,
refetchOnWindowFocus,
refetchOnReconnect
- true일 때 Mount /window focus / reconnect 시점에 data가 stale이라고 판단되면 모두 refetch(모두 default true)
fetching >
fresh(staleTime 만료되기 전까지) >
stale(스크린에서 사용되는 동안 유지됨) >
inaction(스크린에서 없어지면, cacheTime 만료되기 전까지 유지) > deleted(cacheTime 만료)
*queryClient는 내부적으로 ContextAPI사용