React Query Crash Course

React Query

• 지금은 Tanstack Query

Wrapping

• 전체 App을 QueryClientProvider로 감싸야 함
• queryClient 로 기본 값 설정 가능
  
• queryClient로 캐시 무효화 가능
• setQueryData 를 통해 특정 key의 쿼리의 캐시 설정 가능

---

useQuery

• GET
• queryKey: 쿼리의 ID - 모든 쿼리에 대해 unique 하다.
• queryFn : promise를 리턴하는 함수를 넣는다.
  
• 생성된 postQuery 를 통해 로딩 상태 등을 확인할수 있다.
• queryFn 의 parameter를 통해 queryKey 에 접근 가능하다.

enabled

• 이전 쿼리가 완성되어야 실행되게 가능
• 이전 쿼리가 완성되면 true가 되는 조건을 넣는다.

---

useMutation

• POST / UPDATE
• mutationFn : promise를 리턴하는 함수
• onSuccess 시 특정 쿼리를 새로 받아오게 하는 예시
  • queryClient는 useQueryClient 로 받아올수 있다.
    
• newPostMutation.mutate(..) 로 호출 가능하다.

• onMutate 에서 리턴한 값을 context에서 받아온다

---

Pagination

• useQuery 에 keepPreviousData 를 사용 이전 쿼리의 값을 캐싱해둔다.

---

useInfinityQuery

• api에 다음 페이지 여부를 받아와야함.
• queryFn 에서 pageParam 으로 사용
• hasNextpage : 다음 페이지 여부
• fetchNextPage : 데이터 더 가져옴
• data.pages 에 하나하나씩 저장됨.

---

useQueries

• useQuery 를 여러개 사용하기 위해 사용
• queries 안에 배열로 설정을 적는다.
  

---

queryClient.prefetchQuery

• prefetch 해온다.