Vue Query 이용해서 서버 상태 관리 하기

Vue Query 란?

Vue 에서 비동기 데이터를 fetch, update를 하고 데이터를 캐싱 처리 할 수 있는 훅을 가진 라이브러리입니다.

React Query 를 기반으로 만들어졌습니다.

React Query - 비동기 상태 관리 라이브러리 알아보기

장점 

Vue에서는 주로 Vuex를 이용하여 전역 상태 관리를 클라이언트에서 하였습니다.

하지만, 서버에서 받은 데이터의 상태를 관리할 수 있는 방법이 없었습니다.

 

서버에서 받은 데이터 변경이 일어나면, 브라우저에서는 상태 관리를 체크할 수 가 없었습니다. 페이지를 새로고침 하기전까지는요.

 

Vue Query 를 사용하면 새롭게 페이지가 생성 될때, 브라우저가 포커스에 들어왔을 때, 네트워크 재연결이 발생했을 때 등

다시 API 호출을 통해 최선 정보로 갱신할 수 있습니다.

그리고 일정한 간격을 다시 조회 하면서 브라우저의 데이터가 stale하게 되지 않도록 합니다.

 

보일러 플레이트 코드가 적어서 바로 프로젝트에 도입할 수 있는 장점도 있습니다.

 

사용법

1. vue-query 설치하기

npm install vue-query

 

2. main.js

VueQueryPlugin 등록 하기

import './assets/main.css'

import { createApp } from 'vue'
import { VueQueryPlugin } from 'vue-query'

import App from './App.vue'
const app = createApp(App)

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

 

3. app.vue

UseQuery 사용하기

Vue Query에서의 useQuery는 ref 객체로 감싸져서 가지고 옵니다.

import { useQuery } from 'vue-query'

const getProduct = async () => {
  const response = await fetch('https://dummyjson.com/products')
  const data = await response.json()
  return data.products
}

const { data: products, isLoading } = useQuery('products', getProduct)
</script>

<template>
  <main>
    <div v-if="isLoading">Loading...</div>
    <div v-else>
      <ul>
        <li v-for="product in products" :key="product.id">
          {{ product.brand }}
        </li>
      </ul>
    </div>
  </main>
</template>