1. TanStack Query란?

TanStack Query는 React, Vue, Solid 등 다양한 프론트엔드 프레임워크에서 사용할 수 있는 데이터 페칭, 캐싱, 동기화 및 업데이트 관리를 위한 라이브러리입니다. TanStack Query는 주로 비동기 데이터 관리를 간편하게 해주는 도구로, 서버 상태 관리(server state management)에 특화되어 있습니다.

주요 장점

• 자동 캐싱 및 데이터 동기화: 서버에서 가져온 데이터를 자동으로 캐싱하고, 필요에 따라 동기화합니다.
• 백그라운드 데이터 업데이트: 오래된 데이터의 상태를 파악해서 Updating을 지원
• 재요청 최적화: 데이터가 필요할 때만 다시 요청하여 네트워크 사용을 줄입니다.
• 에러 및 로딩 상태 관리: 로딩 상태, 에러 상태를 자동으로 관리합니다.

github 프로젝트 통계를 가져오는 간단한 예시

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

const queryClient = new QueryClient()

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

function Example() {
  const { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('<https://api.github.com/repos/TanStack/query>').then((res) =>
        res.json(),
      ),
  })

  if (isPending) 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>
  )
}

react-query를 사용하기 위해서는 QueryClientProvider를 최상단에서 감싸주고 Query의 상태와 동작을 전역적으로 관리하는 객체인 QueryClient 인스턴스를 client props로 넣어 애플리케이션에 연결해야 한다.

2. TanStack Query의 핵심 개념

1. useQuery

• query: 비동기 데이터 요청을 나타내는 객체
• useQuery 훅을 사용하여 데이터 페칭과 캐싱을 처리합니다.
• 기본적으로 서버에서 데이터를 GET할 때 사용

const { isPending, error, data } = useQuery({
  queryKey: ['repoData'],
  queryFn: () =>
    fetch('<https://api.github.com/repos/TanStack/query>').then((res) =>
      res.json(),
    ),
})

queryKey → 쿼리에 대한 고유 키

위의 코드처럼 간단한 경우에는 배열에 상수 값만으로 키를 사용할 수 있다.