[React Query] useQuery 실용편
8447 단어 react-queryReactReact
이전 시리즈에서 더 나아가 useQuery를 실무에서 사용했던 경험을 적어보려한다.
🌟 QueryClient 의 defaultOptions 설정하기
QueryClient
에서 추가적으로defaultOptions
를 적용할 수 있다.refetchOnMount
,refetchOnReconnect
,refetchOnWindowFocus
는 기본적으로 true로 설정되어있는데 이렇게 defaultOptions 에서 false로 셋팅해두면 모든 쿼리들이 이 옵션에 영향을 받는다.
(무분별한 refetch를 막기 위해 모두 false로 설정해두었고 상황에 따라 필요한 쿼리에만 true로 별도의 옵션을 적용해서 사용하고 있다.)staleTime
이나cacheTime
등 다양한 옵션을 더 넣을 수 있다.
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnMount: false,
refetchOnReconnect: false,
refetchOnWindowFocus: false,
}
}
});
🌟 QueryKey 관리하기
- 회사에선 컨벤션을 맞추기 위해 문자열 키를 사용하지 않고 배열 키를 사용하고 있다!
export const queryKeys = {
todos: ['todos'] as const,
todoById: (todoId: string) => ['todos', todoId] as const,
};
// 이런식으로 사용하면 된다.
useQuery(queryKeys.todos, fetchTodos);
useQuery(queryKeys.todoById(todoId), () => fetchTodoById(todoId));
🌟 useQuery 커스텀 훅 with TypeScript
- 여러 컴포넌트에서 같은 요청을 해줘야하는 경우엔 커스텀 훅으로 만들어서 공통으로 사용하고 있다.
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에 대해서 정리할 예정이다
Author And Source
이 문제에 관하여([React Query] useQuery 실용편), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kimhyo_0218/React-Query-useQuery-실용편저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)