TanStack Query

TanStack Query란?

: TanStack Query는 현대 웹 애플리케이션에서 데이터 패칭, 캐싱, 동기화 및 상태 관리를 간편하게 처리할 수 있도록 돕는 라이브러리입니다. React, Vue, Svelte 등 다양한 프레임워크와 호환되며, 비동기 데이터와 서버 상태를 효율적으로 관리할 수 있는 강력한 도구입니다.

 

이 라이브러리는 API 호출, 데이터 캐싱, 폴링, 배경 업데이트와 같은 데이터 관련 작업을 간단하게 처리할 수 있도록 설계되었습니다. 개발자들은 복잡한 데이터 관리를 간소화하고, 애플리케이션의 성능을 향상시킬 수 있습니다.

 

TanStack Query와 React Query의 차이점

1. 이름과 브랜드
   • React Query : React 전용
   • TanStack Query : 다양한 프레임워크와 라이브러리에 대한 지원
2. 프레임워크 지원
   • React Query : React에만 최적화
   • TanStack Query : React, Vue, Svelte 등 다영한 프레임워크를 지원
3. 패키지 이름
   • React Query : "react-query" 패키지
   • TanStack Query : 각 프레임워크에 맞는 패키지 이름이 있으며, 예를 들어 "@tanstack/react-query", "@tanstack/vue-query" 등
4. 기능 확장
   • React Query : React 전용으로 많은 기능을 제공
   • TanStack Query : 다양한 프레임워크와 호환되도록 기능이 확장됨, 예를 들어 Vue와 Svelte의 반응형 시스템과 통합된 기능을 제공
5. 커뮤니티와 생태계
   • React Query : React 커뮤니티에서 널리 사용되며, React 생태계의 일환으로 발전
   • TanStack Query : 더 넓은 생태계를 포괄하며, 다양한 프레임워크의 사용자와 개발자에게 더 많은 기회를 제공

 

주요 기능

: 주요 기능에는 크게 5가지가 있습니다.

• 자동 캐싱 : 데이터는 자동으로 캐싱되어 불필요한 네트워크 요청을 줄입니다.
• 백그라운드 데이터 동기화 : 데이터가 변경될 때 자동으로 최신 상태로 업데이트합니다.
• 쿼리 무효화 : 데이터가 변경되면 관련된 쿼리들을 자동으로 무효화하고 새로고침합니다.
• 폴링 및 리패칭 : 주기적으로 데이터를 새로 고치거나 특정 조건에서 리패칭을 수행합니다.
• 오류 및 로딩 상태 관리 : 요청의 상태를 쉽게 추적하고, 로딩 및 오류 상태를 관리할 수 있습니다.

 

기본 사용법

1. 패키지 설치

   npm install @tanstack/vue-query @tanstack/query-core

2. QueryClient 설정 (+ 전역 옵션 설정)
   : main.js 또는 main.ts에서 VueQueryPlugin을 설정합니다.

   // main.js
   import { createApp } from 'vue';
   import App from './App.vue';
   import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query';
   
   // QueryClient 설정
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
         staleTime: 1000 * 60 * 5, // 5분
         cacheTime: 1000 * 60 * 10, // 10분
         refetchOnWindowFocus: false, // 창이 포커스를 받을 때 리패칭 안 함
         refetchOnReconnect: true, // 재연결 시 리패칭
         retry: 2, // 요청 실패 시 최대 2번 재시도
       },
       mutations: {
         retry: 3, // 뮤테이션 실패 시 최대 3번 재시도
       },
     },
   });
   
   const app = createApp(App);
   app.use(VueQueryPlugin, { queryClient });
   app.mount('#app');

3. useQuery 사용

   // main.js
   import { createApp } from 'vue';
   import App from './App.vue';
   import { VueQueryPlugin } from '@tanstack/vue-query';
   
   const app = createApp(App);
   app.use(VueQueryPlugin);
   app.mount('#app');
   
   // TodoList.vue
   <template>
     <div>
       <h1>Todo List</h1>
       <div v-if="isLoading">Loading...</div>
       <div v-if="error">Error: {{ error.message }}</div>
       <ul v-if="data">
         <li v-for="todo in data" :key="todo.id">
           {{ todo.title }}
         </li>
       </ul>
     </div>
   </template>
   
   <script setup>
   import { useQuery } from '@tanstack/vue-query';
   import { fetchTodos } from './api';
   
   const { data, error, isLoading } = useQuery(['todos'], fetchTodos);
   </script>

개발자 모드 설정

1. Devtools 설치 
2. npm install @tanstack/query-devtools
3. Devtools 구성 및 사용 (Vue 3인 경우)

   // main.js
   import { createApp } from 'vue';
   import App from './App.vue';
   import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query';
   import { QueryClientProvider } from '@tanstack/vue-query';
   import { QueryDevtools } from '@tanstack/query-devtools';
   
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
         staleTime: 1000 * 60 * 5, // 5분
         cacheTime: 1000 * 60 * 10, // 10분
         refetchOnWindowFocus: false,
         refetchOnReconnect: true,
         retry: 2,
       },
     },
   });
   
   const app = createApp(App);
   app.use(VueQueryPlugin, { queryClient });
   
   app.component('QueryDevtools', QueryDevtools);
   
   app.mount('#app');

4. Devtools를 App.vue에 추가

   <!-- App.vue -->
   <template>
     <div id="app">
       <router-view />
       <QueryDevtools />
     </div>
   </template>
   
   <script setup>
   import { QueryDevtools } from '@tanstack/query-devtools';
   </script>