개요
TanStack Query는 웹앱 누락된 데이터를 가져오는 라이브러리로 설명되지만, 웹앱에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 만듬.
기존 상태 관리 라이브러리는 클라이언트 상태 작업에 적합하지만 비동기 또는 서버 상태 작업에는 적합하지 않음. 이는 서버 상태가 전혀 다르기 때문.
서버 상태
- 통제하거나 소유하지 않는 위치에 원격으로 지속됨.
- 가져오기 및 업데이트를 위한 비동기 API 가 필요함.
- 본인도 모르게 다른 사람이 변경할 수 있음.
- 주의하지 않으면 애플리케이션이 '구식' 이 될 수 있음.
애플리케이션에서 서버 상태의 특성을 파악하면 진행하면서 더 많은 문제가 생길 수 있음.
- 캐싱
- 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거
- 백그라운드에서 오래된 데이터 업데이트
- 데이터가 오래된 시기 알기
- 최대한 빠르게 데이터 업데이트 반영
- 페이지 매김 및 지연 로딩 데이터와 같은 성능 최적화
- 서버 상태의 메모리 및 가비지 수집 관리
- 구조적 공유를 통해 쿼리 결과 메모
이러한 문제점을 구성이 필요 없이 기본적으로 놀랍도록 잘 작동하며 애플리케이션이 성장함에 따라 원하는 대로 사용자 정의할 수 있음.
vue query를 사용하면 서버 상태의 까다로운 문제와 장애물을 극복 하고 앱 데이터가 사용자를 제어하기 전에 제어할 수 있음.
설치
NPM
$ npm i @tanstack/vue-query
# or
$ pnpm add @tanstack/vue-query
# or
$ yarn add @tanstack/vue-queryvue 쿼리 초기화
import { VueQueryPlugin } from '@tanstack/vue-query'
app.use(VueQueryPlugin)사용법
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { isLoading, isFetching, isError, data, error } = useQuery({
queryKey: ['todos'],
queryFn: getTodos,
})
</script>
<template>...</template>기본값
쿼리 인스턴스는 기본적으로 useQuery 나 useInfiniteQuery 를 통해 데이터를 오래된 것으로 간주함
백그라운드에서 자동으로 다시 가져올 때
- 쿼리 마운트가 되었을 때
- 윈도우가 refocused 되었을 때
- 네트워크가 재연결 되었을 때
Query Basics
쿼리는 고유 키에 연결된 비동기 데이터 소스에 대한 선언적 종속성임.
const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })쿼리는 특정 순간에 다음 상태 중 하나에만 있을 수 있음
-
isLoading또는 status === 'loading'- 쿼리에 아직 데이터가 없습니다.
-
isError또는 status === 'error'- 쿼리에 오류가 발생했습니다.
-
isSuccess또는 status === 'success'- 쿼리가 성공했고 데이터를 사용할 수 있습니다.
-
error- 쿼리가 상태인 경우 속성을 isError통해 오류를 확인할 수 있습니다 error.
-
data- 쿼리가 상태인 경우 속성을 isSuccess통해 데이터를 사용할 수 있습니다 data.
-
isFetching- 어떤 상태에서든 쿼리가 언제든지 가져오는 경우(백그라운드 다시 가져오기 포함) isFetching는 입니다 true.
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { isLoading, isError, data, error } = useQuery({
queryKey: ['todos'],
queryFn: fetchTodoList,
})
</script>
<template>
<span v-if="isLoading">Loading...</span>
<span v-else-if="isError">Error: {{ error.message }}</span>
<!-- We can assume by this point that `isSuccess === true` -->
<ul v-else-if="data">
<li v-for="todo in data" :key="todo.id">{{ todo.title }}</li>
</ul>
</template>FetchStatus
'status' 필드 외에도 'result' 로 'fetchStatus' 라는 추가 속성을 얻을 수 있음
- fetchStatus === 'fetching'- 현재 쿼리를 가져오는 중입니다.
- fetchStatus === 'paused'- 쿼리를 가져오려고 했으나 일시중지되었습니다.
- fetchStatus === 'idle'- 쿼리가 현재 아무 작업도 수행하지 않습니다.
쿼리 키
TanStack Query는 쿼리 키를 기반으로 쿼리 캐싱을 관리함.
쿼리 키는 최상위 수준의 배열이여 하며 단일 문자열이 포함된 배열 만큼 간단할 수도 있고, 여러 문자열 및 중첩 개체의 배열만큼 복잡할 수도 있음.
단순 쿼리 키
키의 가장 간단한 형태는 상수 값이 포함된 배열임.
- 일반 목록/인덱스 리소스
- 비계층적 리소스
// A list of todos
useQuery({ queryKey: ['todos'], ... })
// Something else, whatever!
useQuery({ queryKey: ['something', 'special'], ... })변수가 있는 배열 키
쿼리에 해당 데이터를 고유하게 설명하기 위해 더 많은 정보가 필요한 경우 문자열과 직렬화 가능한 개체가 포함된 배열을 사용하여 이를 설명할 수 있음.
- 계층적 또는 중첩된 리소스
- 항목을 고유하게 식별하기 위해 ID, 인덱스 또는 유니크한 아이템을 전달 - 추가 매개변수가 포함된 쿼리
- 추가 옵션의 객체를 전달하는 것이 일반적임
// An individual todo
useQuery({ queryKey: ['todo', 5], ... })
// An individual todo in a "preview" format
useQuery({ queryKey: ['todo', 5, { preview: true }], ...})
// A list of todos that are "done"
useQuery({ queryKey: ['todos', { type: 'done' }], ... })