이전 시리즈에서 더 나아가 useQuery를 실무에서 사용했던 경험을 적어보려한다.
QueryClient
에서 추가적으로 defaultOptions
를 적용할 수 있다.refetchOnMount
, refetchOnReconnect
, refetchOnWindowFocus
는 기본적으로 true로 설정되어있는데 이렇게 defaultOptions 에서 false로 셋팅해두면 모든 쿼리들이 이 옵션에 영향을 받는다.staleTime
이나 cacheTime
등 다양한 옵션을 더 넣을 수 있다.const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
}
}
});
export const queryKeys = {
todos: ['todos'] as const,
todoById: (todoId: string) => ['todos', todoId] as const,
};
// 이런식으로 사용하면 된다.
useQuery(queryKeys.todos, fetchTodos);
useQuery(queryKeys.todoById(todoId), () => fetchTodoById(todoId));
import { AxiosError } from 'axios';
import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
import { fetchTodos } from 'src/api/todos';
import { TodoType } from 'src/types/todoType';
import { queryKeys } from 'src/types/commonType';
export default function useTodosQuery(
options?: UseQueryOptions<TodoType[], AxiosError>
): UseQueryResult<TodoType[], AxiosError> {
return useQuery(queryKeys.todos, fetchTodos, options);
}
import useTodosQuery from 'src/hooks/useTodosQuery';
//...
// option을 추가하지 않았을 경우
const { data, isLoading } = useTodosQuery();
// option을 추가할 경우
const { data, isLoading } = useTodosQuery({ staleTime: 60 * 1000 });
옵션을 주고 싶을 때 파라미터로 옵션을 넘기면 된다!
다음 편은 useMutation에 대해서 정리할 예정이다