[리액트] 리액트 쿼리란?

🌼 서버스테이트를 관리하기 위한 라이브러리이다. 🌼

 

서버스테이트?

api를 요청한 후부터 우리가 관리해야하는 state (데이터도 서버 state인셈)

-> 데이터,에러,isloading이 다 서버state임

이런 서버스테이트를 리액트쿼리에서 제공해주는 훅에서 자동으로 컨트롤해준다.

(자동으로 리턴으로 뱉어준다)

 

useQuery가 관리해주기 전까진 우리가 thunk를 써서 수동으로 서버state를 관리해주었는데 이걸 리액트쿼리가 해주게 되는 것

 

 

🌼 cashing 기능이 있다 🌼

 

cashing기능 ?

서버요청을 보낼때 쿼리 key를 날리는데 이 repo데이터라는 키가 캐쉬메모리에 있는지를 확인하고, 있으면 fetcher함수를 실행하지 않고 캐쉬메모리에 있는 데이터를 사용한다.

만약 repo데이터가 없음 패쳐 함수를 실행해서 repo데이터에 해당하는 Key에 대응하는 곳에 저장을 할거다.

 

 

const queryClient = new QueryClient()
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }

•  <QueryClientProvider> 를 App.js 최상단에 추가해 앱을 감싸주기
• queryClient 인스턴스를 생성 후 client={queryClient} 넣어주기

 

리액트 쿼리 공식문서에 나와있는 넘 이해 잘되는 예시

function Example() {
   const { isLoading, error, data } = useQuery('repoData', () =>
     fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
       res.json()
     )
   )
 
   if (isLoading) return 'Loading...'
 
   if (error) return 'An error has occurred: ' + error.message
 
   return (
     <div>
       <h1>{data.name}</h1>
       <p>{data.description}</p>
       <strong>👀 {data.subscribers_count}</strong>{' '}
       <strong>✨ {data.stargazers_count}</strong>{' '}
       <strong>🍴 {data.forks_count}</strong>
     </div>
   )
 }

 

const { data, isLoading, error } = useQuery(queryKey, queryFn, options)

 

QueryKey

QueryKey 를 기반으로 데이터 캐싱을 관리하며 문자열 또는 배열로 지정

Query Functions

useQuery 두번째 인자로 프로미스를 리턴하는 함수

Query Options

세번째 인자로는 useQuery 옵션이 들어감

 

 

 

아래는 리액트 쿼리 공식문서 

 

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

Overview | TanStack Query Docs