Quasar SSR 中持久化 @tanstack/vue-query 查询客户端的完整指南

2024-03-24 13:06:15

在 Quasar SSR 中持久化 @tanstack/vue-query 查询客户端

问题

在 Quasar SSR 中，持久化 @tanstack/vue-query 查询客户端是一个挑战。传统的 Vuex 方法已弃用，而文档中介绍的 Vite SSR 方法使用 initialState 对象，该对象在 Quasar SSR 中不存在。

解决方案

为了在 Quasar SSR 中持久化 vue-query 查询，我们需要使用 ssrContext 对象来保存和检索状态。以下是修改后的引导文件：

import { boot } from 'quasar/wrappers'
import { QueryClient, VueQueryPlugin, dehydrate, keepPreviousData } from '@tanstack/vue-query'
import { hydrate } from 'vue'

export default boot(({ app, ssrContext }) => {
  const globalQueryClient = new QueryClient({
    defaultOptions: {
      queries: {
        networkMode: 'always',
        placeholderData: keepPreviousData,
        retry: false,
        staleTime: 1000 * 60 * 5 // 5 分钟
      }
    }
  })
  if (process.env.SERVER) {
    // 指示如何在 SSR 期间访问和序列化 VueQuery 状态
    ssrContext.vueQueryState = { toJSON: () => dehydrate(globalQueryClient) }
  } else {
    // 在浏览器中重用现有状态
    hydrate(globalQueryClient, ssrContext.vueQueryState)
  }
  app.use(VueQueryPlugin, { queryClient: globalQueryClient })
})

详细说明

在此解决方案中：

我们创建了一个全局 queryClient，并为每个查询指定默认选项。
在服务器端，我们将 vueQueryState 存储在 ssrContext 中，以供客户端重用。
在客户端，我们从 ssrContext 中检索 vueQueryState，并将其重新注入到 queryClient 中。

在 Vue 组件中使用

在 Vue 组件中，使用 vue-query 与以前相同：

<!-- MyComponent.vue -->
<template>
  <div>
    <button @click="refetch">重新获取</button>
    <p>{{ data }}</p>
  </div>
</template>

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

  // 这将在服务器端进行预取并发送
  const { refetch, data, suspense } = useQuery({
    queryKey: ['todos'],
    queryFn: getTodos,
  })

  onServerPrefetch(suspense)
</script>