오늘도 프로젝트를 준비하면서 react-query공부와 강의를 들었다.
React Query
리액트 쿼리는 비동기 로직을 리액트에 맞게 다룰 수 있는 라이브러리
- QueryClientProvider
리액트 쿼리 사용을 위해서 QueryClientProvider를 최상단에서 감사주고
리액트쿼리 인스턴스를 client 작성해줘야한다.
``js
import { QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient();
export default function App() {
return (
);
}
``
-
useQuery
js const { data, isLoading, error } = useQuery(queryKey, queryFn, options) -
QueryKey
데이터를 캐시하고 쿼리에 대한 종속성이 변경될 때 자동으로 다시 가져올 수 있게 한다. 그리고 필요한 시점에 queryKey를 통해 query cache와 상호작용이 가능 -
Query Functions
js useQuery(['getDisease', searchValue], () => getDisease({ searchText: searchValue }).then((res) => res.data.response.body.items), -
Query Options
js const { data } = useQuery( ['data', data], () => fetchTodoById(id), { enabled: !!data, } ) -
enabled
쿼리가 자동으로 실행되지 않게 설정하는 옵션이다.
아래의 코드는 id가 존재할 때만 쿼리 요청을 한다는 의미의 코드이다. -
retry
실패한 쿼리를 재시도하는 옵션
default값으로 쿼리 실패시 3번 재시도 한다.
true 로 설정하면 쿼리 실패시 무한 재시도 false로 설정하면 재시도 x -
staleTime
staleTime 은 데이터가 fresh 상태로 유지되는 시간이다. 해당 시간이 지나면 stale 상태가 된다.
fresh 상태에서는 쿼리가 다시 mount 되어도 fetch가 실행되지 않는다.
default staleTime 은 0
