[TIL][RN] 영화 리뷰앱 클론코딩 사전준비(3)

React Query

• server state를 관리하기 위한 라이브러리
  redux, thunk 필요없음
  useQuery hook안에서 자동으로 다양한 상태를 편안하게 관리 가능
  caching기능이 있음

• 공식문서

  https://react-query-v3.tanstack.com/overview

• install

   npm i react-query

• start
  QueryClientProvider를 최상위로 감싸주고,
  QueryClient를 생성하여 QueryClientProvider의 속성 client에 넣어준다

  import {
   useQueryClient,
   QueryClientProvider,
 } from 'react-query'
 
 // Create a client
 const queryClient = new QueryClient()
 
 export default function App() {
 	return (
    <QueryClientProvider client={queryClient}>
		<Root />
    </QueryClientProvider>
    )
 }

• useQuery
  key, fetcher함수를 인자로 받아서 사용
  

• queryClient.refetchQuery
  

• infiniteScroll

  • FlatList onEndReached 스크롤이 마지막에 도달했을 때 trigger

  • useInfiniteQuery

    const {
     fetchNextPage,
     fetchPreviousPage,
     hasNextPage,
     hasPreviousPage,
     isFetchingNextPage,
     isFetchingPreviousPage,
     ...result
    } = useInfiniteQuery(queryKey, ({ pageParam = 1 }) => fetchPage(pageParam), {
     ...options,
     getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
     getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
    })