리액트 쿼리 (React query)

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

Overview

 

리액트 쿼리가 리덕스를 따라 잡은 모습(2022.02)

npm-trend

 

React query 소개

 

대부분의 기존상태관리 라이브러리는 클라이언트 상태 작업에 적합하지만 비동기 또는 서버 상태 작업에는 그다지 좋지 않다.

서버 상태가 완전히 다르기 때문이다.

 

서버 상태

• 제어하거나 소유하지 않는 위치에 원격으로 유지
• Fetching이나 Updating에 비동기 API가 필요함
• 다른 사람들과 공유되는 것으로 사용자가 모르는 사이에 변경될 수 있음(중복)
• 신경 쓰지 않는다면 잠재적으로 "out of date"가 될 가능성을 지님

 

애플리케이션에서 서버의 상태 특성을 파악하면 진행하면서 더 많은 문제가 발생 함,

• 캐싱 
• 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거
• 백그라운드에서 오래된 데이터 업데이트
• 데이터가 언제 만료되는지 알고 있기
• 데이터 업데이트를 최대한 빨리 반영
• 페이지네이션 및 lazyLoading 과 같은 성능 최적화
• 서버 상태의 메모리 및 가비지 수집 관리
• 구조적 공유를 통한 쿼리 결과 메모

 

리액트 쿼리를 사용하면 서버상태의 까다로운 문제와 트러블을 극복하고 앱 데이터가 제어를 시작하기 전에 앱 데이터를 제어 할 수 있다.

 

리쿼리 공식 문서 예제

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
 
 const queryClient = new QueryClient()
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }
 
 function Example() {
 	
    // userQuery 의 첫번재 인수는 key 값, 두번째는 fetch 함수
    
   const { isLoading, error, data } = useQuery('repoData', () =>
     fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
       res.json()
     )
   )
 
 	// useQuery 의 반환 값으로 isLoading, err, data 등이 있다.
 
 
   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>
   )
 }

Query Client

• 캐싱관리를 위해 QueryClient 인스턴스를 사용한다.
• Query Client 를 생성 후 Provider를 최상단 컴포넌트에서 감싸준다.

 

useQuery(queryKey, queryFn, option)

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

• 첫번째 인수로 query key 로 unique key 를 사용한다.
• query key 에는 문자열과 배열을 넣을 수 있다.
• 두번째 인수로 fetch 함수를 넣을 수 있다. (axios.get(...))

 

useQuery return data

• data : fetch 에서 리턴한 Promise reslove 된 데이터
• isLoading : 저장 된 캐시가 없는 상태에서 데이터를 요청 중일 때 true
• isFetching : 캐시가 있거나 없거나 데이터가 요청 중일 때 true

---

Mutation

• 서버의 데이터 변경 요청을 할때 사용 하는 함수로 Create, Update, Delete 요청과 같이 API 통신으로 서버 상태에 side-effect가 일어난 경우 사용 합니다.

function App() {
   const mutation = useMutation(fetch, {
   
       //성공시
        onSuccess: () => {
            // key 값에 대한 query 무효화 
            queryClient.invalidateOueries('key')
       ),
       //에러시
       onError: (err) => {
            console.log(err)
        },
        // 성공이든 에러든 finally
        onSettled:(data, err, variables, context) => {
            console.log("finally")
        }   
    }
 
   return (
     <div>
     
     // isLoading
     {mutation.isLoading ? (
         'Adding todo...'
       ) : (
         <>
         
         // isError
     		{mutation.isError ? (
             <div>An error occurred: {mutation.error.message}</div>
           ) : null}
 
 			// isSuccess
           {mutation.isSuccess ? <div>Todo added!</div> : null}
 
           <button
             onClick={() => {
             
              // mutate
               mutation.mutate({ id: new Date(), title: 'Do Laundry' })
             }}
           >
             Create Todo
           </button>
         </>
       )}
     </div>
   )
 }
 
 
 // mutation 도 useQuery 와 마찬가지로 isLoading, isError 등을 리턴 값으로 가진다.