[TIL] React Query

[TanStack Query 공식 문서]

Overview | TanStack Query Docs

React Query의 장점

- 코드의 양이 적고 구조가 단순하여 유지보수에 용이

- 캐싱을 통해 애플리케이션 속도 향상

- 데이터 중복 요청 제거

- 데이터 상태 파악 후 updating 지원

- React Hooks와 유사한 인터페이스 제공

- Garbage Collection을 이용하여 서버 쪽 데이터 메모리 관리

- 비동기 과정을 선언적으로 관리

Install

yarn add @tanstack/react-query

Quick Start

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/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({ queryKey: ['todos'], queryFn: getTodos })

  // Mutations
  const mutation = useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries({ queryKey: ['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'))

사용할 루트 컴포넌트 (App.js)를 QueryClientProvider로 감싸고

변수에 담은 QueryClient를 적용,

전체 컴포넌트에서 React-Query를 사용할 수 있게 함

 

사용할 컴포넌트에서

useQuery, useMutation 등으로 호출