Suspense(실험적)

참고: Vue Query의 Suspense 모드는 Vue의 Suspense 자체와 마찬가지로 실험적입니다. 이러한 API는 변경될 수 있으므로 Vue와 Vue Query 버전을 서로 호환되는 패치 수준 버전으로 모두 고정하지 않는 한 프로덕션에서 사용해서는 안 됩니다.

Vue Query는 Vue의 새로운 Suspense API들과 함께 사용할 수도 있습니다.

그렇게 하려면 일시 중단 가능한 컴포넌트를 Vue에서 제공하는 Suspense 컴포넌트로 감싸야 합니다

<script setup>
import SuspendableComponent from './SuspendableComponent.vue'
</script>

<template>
  <Suspense>
    <template #default>
      <SuspendableComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

그리고 일시 중단 가능한 컴포넌트의 setup 함수를 async로 변경하세요. 그러면 vue-query에서 제공하는 비동기 suspense 함수를 사용할 수 있습니다.

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

const todoFetcher = async () =>
  await fetch('https://jsonplaceholder.cypress.io/todos').then((response) =>
    response.json(),
  )
export default defineComponent({
  name: 'SuspendableComponent',
  async setup() {
    const { data, suspense } = useQuery({
      queryKey: ['todos'],
      queryFn: todoFetcher,
    })
    await suspense()

    return { data }
  },
})
</script>

렌더링 시 가져오기와 가져오면서 렌더링하기 비교

별도의 추가 설정 없이도 Vue 모드의 suspense Query는 기본적으로 렌더링 시 가져오기 솔루션으로 매우 잘 작동합니다. 즉, 컴포넌트가 마운트를 시도할 때 쿼리 가져오기를 트리거하고 일시 중단되지만, 이는 컴포넌트를 가져오고 마운트한 후에만 이루어집니다. 한 단계 더 나아가 가져오면서 렌더링하기 모델을 구현하려면, 쿼리가 마운트되기 전, 가능하다면 상위 컴포넌트를 가져오거나 마운트하기 전부터 쿼리 로딩을 시작하도록 라우팅 콜백 및/또는 사용자 상호작용 이벤트에 프리페치를 구현하는 것이 좋습니다.