React-query 시작하기

새 프로젝트에 React에서 비동기 로직을 쉽게 다루게 해주는 라이브러리 React-query를 사용하기로 결정이 났다

그래서 React-query를 공부하면서 블로그에 끄적여본다

 

 

개요

React Query는 종종 누락된 데이터 가져오는 라이브러리로 설명되지만, 보다 기술적인 용어로 말하면 React 애플리케이션에서  fetching(가져오기), caching(캐싱), synchronizing and updating server state(동기화 및 서버상태 업데이트)를 수행한다

---

기본 코드

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

const queryClient = new QueryClient()
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }
 
 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>
   )
 }

---

설치

$ npm i react-query
# or
$ yarn add react-query

React Query는 React v16.8+와 호환되며 ReactDOM 및 React Native와 함께 작동한다

 

설치 관련 문서 자세히 보기

---

빠른 시작

아래 예시는 React Query의 3가지 핵심 개념을 간략하게 보여준다

- Queies

- Mutations

- Query Invalidation

import {
   useQuery,
   useMutation,
   useQueryClient,
   QueryClient,
   QueryClientProvider,
 } from 'react-query'
 import { getTodos, postTodo } from '../my-api'
 
 // Create a client
 const queryClient = new QueryClient()
 
 function App() {
   return (
     // Provide the client to your App
     <QueryClientProvider client={queryClient}>
       <Todos />
     </QueryClientProvider>
   )
 }
 
 function Todos() {
   // Access the client
   const queryClient = useQueryClient()
 
   // Queries
   const query = useQuery('todos', getTodos)
 
   // Mutations
   const mutation = useMutation(postTodo, {
     onSuccess: () => {
       // Invalidate and refetch
       queryClient.invalidateQueries('todos')
     },
   })
 
   return (
     <div>
       <ul>
         {query.data.map(todo => (
           <li key={todo.id}>{todo.title}</li>
         ))}
       </ul>
 
       <button
         onClick={() => {
           mutation.mutate({
             id: Date.now(),
             title: 'Do Laundry',
           })
         }}
       >
         Add Todo
       </button>
     </div>
   )
 }
 
 render(<App />, document.getElementById('root'))

---

[참고]

https://react-query.tanstack.com