From 82108769c0120c622f36906a543229a3544175e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=91=E6=AF=9B88?= <jinmao88@qq.com>
Date: Wed, 26 Aug 2026 08:23:06 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BF=AE=E5=A4=8D=E5=B9=B6=E5=8F=91?=
 =?UTF-8?q?=E7=BC=93=E5=AD=98=E7=A4=BA=E4=BE=8B=E4=B8=AD=E7=9A=84=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E6=96=B9=E6=B3=95=E8=B0=83=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 queryOptions 创建公共查询配置对象
- 添加 useQueryClient 引入缓存时间配置
- 移除重复的 refetch 函数定义
- 实现 fetchQuery 用于并发请求合并
- 统一查询配置避免代码重复
---
 .../vue-query/concurrency-caching.vue         | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/playground/src/views/demos/features/vue-query/concurrency-caching.vue b/playground/src/views/demos/features/vue-query/concurrency-caching.vue
index 1e0f32800..aeba8f0db 100644
--- a/playground/src/views/demos/features/vue-query/concurrency-caching.vue
+++ b/playground/src/views/demos/features/vue-query/concurrency-caching.vue
@@ -1,28 +1,31 @@
 <script lang="ts" setup>
 import type { Recordable } from '@vben/types';
 
-import { useQuery } from '@tanstack/vue-query';
+import { queryOptions, useQuery, useQueryClient } from '@tanstack/vue-query';
 
 import { useVbenForm } from '#/adapter/form';
 import { getMenuList } from '#/api';
 
-const queryKey = ['demo', 'api', 'options'];
 const count = 4;
 
-const { dataUpdatedAt, promise: fetchDataFn } = useQuery({
-  // 在组件渲染期间预取数据
-  experimental_prefetchInRender: true,
+// 缓存时间
+const staleTime = 1000 * 60 * 5;
+
+// 公共查询配置：useQuery 与 fetchQuery 共用
+const menuQueryOptions = queryOptions({
   // 获取接口数据的函数
   queryFn: getMenuList,
-  queryKey,
-  // 每次组件挂载时都重新获取数据。如果不需要每次都重新获取就不要设置为always
-  refetchOnMount: 'always',
-  // 缓存时间
-  staleTime: 1000 * 60 * 5,
+  queryKey: ['demo', 'api', 'options'],
+  staleTime,
 });
 
+const queryClient = useQueryClient();
+
+const { dataUpdatedAt } = useQuery(menuQueryOptions);
+
 async function fetchOptions() {
-  return await fetchDataFn.value;
+  // 并发调用时 fetchQuery 会合并相同 queryKey 的请求，只发一次
+  return queryClient.fetchQuery(menuQueryOptions);
 }
 
 const schema = [];