본문으로 건너뛰기

설치

NPM을 통해 Vue Query를 설치할 수 있습니다.

NPM​

npm i @tanstack/vue-query

or

pnpm add @tanstack/vue-query

or

yarn add @tanstack/vue-query

or

bun add @tanstack/vue-query

다운로드하기 전에 한번 사용해 보고 싶으신가요? 기본 예제를 사용해 보세요!

Vue Query는 Vue 2.x 및 3.x와 호환됩니다

Vue 2.6을 사용하는 경우 @vue/composition-api도 설정해야 합니다.

Vue 쿼리 초기화​

Vue Query를 사용하기 전에 VueQueryPlugin을 사용하여 초기화해야 합니다

import { VueQueryPlugin } from '@tanstack/vue-query'

app.use(VueQueryPlugin)

API를 <script setup>과 함께 사용하기​

문서의 모든 예제는 <script setup> 구문을 사용합니다.

Vue 2 사용자도 이 플러그인을 사용하여 해당 구문을 사용할 수 있습니다. 설치 세부 정보는 플러그인 문서를 확인하세요.

<script setup> 구문을 선호하지 않는다면 코드를 setup() 함수 아래로 옮기고 템플릿에서 사용하는 값을 반환하여 모든 예제를 일반적인 Composition API 구문으로 쉽게 변환할 수 있습니다.

<script setup>
import { useQuery } from '@tanstack/vue-query'

const { isPending, isFetching, isError, data, error } = useQuery({
  queryKey: ['todos'],
  queryFn: getTodos,
})
</script>

<template>...</template>