1. 개요

대부분의 상태 관리 라이브러리는 클라이언트 상태 작업에는 좋다. 하지만 클라이언트와 서버의 상태가 다르기 때문에 비동기 및 서버 상태 작업에는 좋지 않다.

서버 상태

• 내가 통제/소유할 수 없는 위치에 원격으로 유지된다.
• 가져오기,업데이트를 위해 비동기 API가 필요하다.
• 공유 소유권을 의미하며 나의 지식 없이 다른 사람이 변경할 수 있다.
  • 공유 소유권: 한 컴포넌트가 데이터를 요청했을 때, 그 데이터를 다른 컴포넌트 및 사용자가 수정할 수 있는 것
• 조심하지 않으면 잠재적으로 APP에서 "오래된" 상태가 될 수 있다.
  • 서버와 클라이언트 간 상태를 동기화하는 것이 중요하다는 의미이다.
  • ex) 변경된 데이터를 APP에 반영하지 않아 오래된 데이터를 보여주는 경우

---

APP에서 서버 상태의 특성을 파악하며 작업을 하면 아래의 과제들이 발생할 수 있다.

이 문제들을 해결하는 것은 쉽지 않지만 탄스택 쿼리를 쓰면 쉽게 해결 가능하다.

• 캐싱
• 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거
• 백그라운드에서 "오래된" 데이터 업데이트
• 데이터가 "오래된" 시점을 아는 방법
• 가능한 빨리 데이터 업데이트를 반영
• 페이지 분할 및 지연 로딩 데이터와 같은 성능 최적화
• 서버 상태의 메모리 관리 및 가비지 수집
• 구조적 공유를 통한 쿼리 결과 메모

---

기본 개념

개념	설명
Query	데이터를 가져오는 요청 (useQuery)
Mutation	데이터를 변경하는 요청 (useMutation)
Cache	요청한 데이터를 저장하고 다시 활용
staleTime	데이터가 “오래됨” 상태로 간주되기까지의 시간
cacheTime	데이터가 메모리에 유지되는 시간

---

2. 설치

Tanstack Query

1. 라이브러리 설치

$ yarn add @tanstack/vue-query axios

2. 등록

// main.ts
import { createApp } from 'vue'
import { VueQueryPlugin } from '@tanstack/vue-query'

import App from './App.vue'

const app = createApp(App)

app.use(VueQueryPlugin)
app.mount('#app')

3. 기본 동작 설정

defaultOptions 옵션으로 queryClient를 생성할 때 기본 옵션을 지정하면 모든 useQuery와 useMutation에 적용된다. 하지만 기본 옵션을 지정했어도 개별 useQuery에서 옵션을 변경할 수 있다.

// App.vue, VueQuery 설정
const vueQueryPluginOptions: VueQueryPluginOptions = {
  queryClientConfig: {
    defaultOptions: {
      queries: {
        queryFn: defaultQueryFn, // 기본 queryFn 적용
        staleTime: 1000 * 60, // 1분 동안 fresh 상태 유지
        cacheTime: 1000 * 60 * 5, // 5분 후 캐시 삭제
        refetchOnWindowFocus: false, // 창 포커스 시 자동 리패치 비활성화
      },
    },
  },
};

app.use(VueQueryPlugin, vueQueryPluginOptions); // VueQueryPlugin 등록

DevTools

탄스택 쿼리 DevTools로 쿼리 상태를 쉽게 확인하고 디버깅할 수 있다.

1. 설치

$ yarn add @tanstack/vue-query-devtools

2. 등록

 VueQueryDevtools는 컴포넌트라서 app.use()로 등록하지 않는다.

<!-- App.vue -->
<script setup lang="ts">
import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
</script>
<template>
  <RouterView />
  <VueQueryDevtools />
</template>

주요 기능

캐시된 쿼리 확인: 현재 캐시에 저장된 쿼리 목록과 상태를 확인 가능

쿼리 상태 변경: 강제 리페치, 무효화 등 실시간으로 상태 변경 가능

네트워크 요청 확인: 요청과 응답 데이터를 확인하고 성능 분석 가능

캐시 타이머 확인: staleTime, gcTime 등 타이머 정보 확인 가능