전역 설정
QueryClient
const queryClient = new QueryClient();
- QueryClient 인스턴스 생성 : 이 객체가 전역적으로 데이터를 캐싱, 서버 상태를 관리하는역할
QueryClientProvider
<QueryClientProvider client={queryClient}> <TodoList /> </QueryClientProvider>
- QueryClientProvider로 컴포넌트 감싸기
- React Query를 컴포넌트에서 사용하려면, Provider로 감싸줘야 함
- client props로 위에서 만든 queryClient를 넘겨줌
- 내부의 TodoList 같은 자식 컴포넌트에서 useQuery, useMutation 같은 훅을 사용 할 수 있다
queryKey & queryFn
-
queryKey
: 각 쿼리를 식별하기 위해 사용하는 고유한 값
: React Query는 이 값을 기반으로 데이터를 캐싱하고, 필요할 떄 다시 불러오거나 캐시된 데이터를 재사용 한다 -
queryFn
: 서버에서 데이터를 가져오는 역할
: 이 함수는 promise 를 반환하는 비동기 함수여야 하고, useQuery가 데이터를 필요로 할 떄 자동으로 호출된다
: (await는 사실상 내부적으로 .then()을 자동으로 붙여주는 문법)
v5
-
isPending
: 데이터가 존재하는지?, 데이터가 아직 없어서 기다리고 있는 상태
: 최초상태에서만 true
: v4 - isLoading -
isFetching
: 데이터 요청이 진행중인지?
: 데이터가 존재하든 안하든 새로운 요청이 활성화 되어있으면 true
