[Vue-Query] @tanstack/vue-query

일반적으로 프로젝트를 진행하면서 관리해야하는 상태(state)는 총 세 가지가 있습니다.
Local State: 컴포넌트 안에서만 사용되는 상태
Global State: 전역 스토어에 정의되어 프로젝트 어디에서나 접근할 수 있는 상태
Server State: 서버로부터 받아오는 상태
기존 Vuex에서는 전역 상태와 서버 상태를 전부 포함해서 관리하는 방식으로 프로그래밍을 했습니다.
하지만, 전역 상태 관리 라이브러리에서 비동기 로직을 제거하고 서버 상태 관리 라이브러리에서 이를 관리하여 각각을 분리하면 프로젝트 로직을 이해하기도 좋고 스토어를 간단하게 관리할 수 있습니다.

설치

npm i @tanstack/vue-query

사용

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

app.use(VueQueryPlugin)

react-query와 사용 방법은 비슷하지만 app.tsx에서 QueryClientProvider로 하나의 clientQuery를 만들어주는 react-query와는 다르게 vue-query 에서는 app.use(VueQueryPlugin)만으로도 이미 클라이언트가 생성이 됩니다. 클라이언트에 접근 시에는 단순하게 각 페이지에서 useQueryClient() 메서드를 사용해 접근할 수 있습니다.

사용할 때에는 통신에 사용할 api 명세를 /src/apis 폴더 안에 작성하세요.

// src/apis/main.ts
import axios from 'axios'

const instance = axios.create({
  baseURL: "http://localhost:8000",
  // 헤더에 토큰을 넣는 코드도 작성해 줄 수 있습니다.
  ...
})

// src/apis/login.ts
import { instance } from 'main.ts'

interface DataType {
  email: string;
  pass: string;
}

export const login = async (userInfo: DataType) => {
  const result = await instance.post("/login-verify", userInfo);
  localStorage.setItem("token", result.data.token);
};

작성된 api 명세를 사용하여 vue 내부에서 useMutation을 사용해 볼 것입니다. 이외에도 다양한 메서드들이 존재하지만 자세한 설명은 하위 페이지에 추가하도록 하겠습니다.

<script setup lang="ts">
import { useMutation, useQueryClient } from '@tanstack/vue-query';
import { reactive } from 'vue'
import { login } from '../apis/login'

const form  = reactive({
  email: '',
  pass: ''
})
const mutation = useMutation({
  mutationFn: login,
  onSuccess: () => { //성공 시 로직
    console.log("로그인!!!")
  },
  onError: () => { // 실패 시 로직
    console.log("에러!!!")
  }
})

const handleLogin = () => {
  mutation.mutate(form)
}
</script>

<template>
<input type="text" v-model="form.email" />
<input type="text" v-model="form.pass" />
<button @click="handleLogin">로그인</button>
</template>

위 코드에서 로그인을 위해 useMutation을 사용하여 login api를 사용하고 있으며, mutation.mutate()에서 파라미터로 필요한 데이터를 전송해주고 있습니다.
이 요청이 성공 시에는 성공 시의 로직이, 실패 시 실패 시의 로직이 실행됩니다.
성공 시의 로직과 실패 시의 로직은 위처럼 useMutation에서 작성해도 되지만 mutate() 메서드 안에서도 작성 가능합니다.

...
const mutation = useMutation({
  mutationFn: login
})

const handleLogin = () => {
  mutation.mutate(form, {
    onSuccess: () => { //성공 시 로직
      console.log("로그인!!!")
    }
    onError: () => { // 실패 시 로직
      console.log("에러!!!")
    }
  })
}
...

useQuery 처럼 이벤트의 실행 시점이 명확하지 않은 경우 useQuery 안에서 작성해도 무관하지만, useMutation처럼 버튼 클릭 시 실행되는 등 이벤트의 실행 시점이 명확하다면 해당 mutation이 실행되는 함수 안에서 작성해주는 것이 자연스럽습니다.