feat: tanstack query demos

packages/effects/request/package.json

@@ -22,7 +22,8 @@
   "dependencies": {
     "@vben/locales": "workspace:*",
     "@vben/utils": "workspace:*",
-    "axios": "^1.7.5"
+    "axios": "^1.7.5",
+    "axios-retry": "^4.5.0"
   },
   "devDependencies": {
     "axios-mock-adapter": "^2.0.0"

playground/package.json

@@ -26,6 +26,7 @@
     "#/*": "./src/*"
   },
   "dependencies": {
+    "@tanstack/vue-query": "^5.53.1",
     "@vben/access": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",

playground/src/bootstrap.ts

@@ -5,6 +5,8 @@ import { initStores } from '@vben/stores';
 import '@vben/styles';
 import '@vben/styles/antd';
 
+import { VueQueryPlugin } from '@tanstack/vue-query';
+
 import { setupI18n } from '#/locales';
 
 import App from './app.vue';
@@ -25,6 +27,9 @@ async function bootstrap(namespace: string) {
   // 配置路由及路由守卫
   app.use(router);
 
+  // 配置@tanstack/vue-query
+  app.use(VueQueryPlugin);
+
   app.mount('#app');
 }
 

playground/src/router/routes/modules/demos.ts

@@ -183,6 +183,15 @@ const routes: RouteRecordRaw[] = [
               title: $t('page.demos.features.clipboard'),
             },
           },
+          {
+            name: 'VueQueryDemo',
+            path: '/demos/features/vue-query',
+            component: () =>
+              import('#/views/demos/features/vue-query/index.vue'),
+            meta: {
+              title: 'Tanstack Query',
+            },
+          },
         ],
       },
       // 面包屑导航

playground/src/views/demos/features/vue-query/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+
+import { Card } from 'ant-design-vue';
+
+import InfiniteQueries from './infinite-queries.vue';
+import PaginatedQueries from './paginated-queries.vue';
+import QueryRetries from './query-retries.vue';
+</script>
+
+<template>
+  <Page title="Vue Query示例">
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <Card title="分页查询">
+        <PaginatedQueries />
+      </Card>
+      <Card title="无限滚动">
+        <InfiniteQueries class="h-[300px] overflow-auto" />
+      </Card>
+      <Card title="错误重试">
+        <QueryRetries />
+      </Card>
+    </div>
+  </Page>
+</template>

playground/src/views/demos/features/vue-query/infinite-queries.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { IProducts } from './typing';
+
+import { useInfiniteQuery } from '@tanstack/vue-query';
+import { Button } from 'ant-design-vue';
+
+const LIMIT = 10;
+const fetchProducts = async ({ pageParam = 0 }): Promise<IProducts> => {
+  const res = await fetch(
+    `https://dummyjson.com/products?limit=${LIMIT}&skip=${pageParam * LIMIT}`,
+  );
+  return res.json();
+};
+
+const {
+  data,
+  error,
+  fetchNextPage,
+  hasNextPage,
+  isError,
+  isFetching,
+  isFetchingNextPage,
+  isPending,
+} = useInfiniteQuery({
+  getNextPageParam: (current, allPages) => {
+    const nextPage = allPages.length + 1;
+    const lastPage = current.skip + current.limit;
+    if (lastPage === current.total) return;
+    return nextPage;
+  },
+  initialPageParam: 0,
+  queryFn: fetchProducts,
+  queryKey: ['products'],
+});
+</script>
+
+<template>
+  <div>
+    <span v-if="isPending">Loading...</span>
+    <span v-else-if="isError">Error: {{ error?.message }}</span>
+    <div v-else-if="data">
+      <span v-if="isFetching && !isFetchingNextPage">Fetching...</span>
+      <ul v-for="(group, index) in data.pages" :key="index">
+        <li v-for="product in group.products" :key="product.id">
+          {{ product.title }}
+        </li>
+      </ul>
+      <Button
+        :disabled="!hasNextPage || isFetchingNextPage"
+        @click="() => fetchNextPage()"
+      >
+        <span v-if="isFetchingNextPage">加载中...</span>
+        <span v-else-if="hasNextPage">加载更多</span>
+        <span v-else>没有更多了</span>
+      </Button>
+    </div>
+  </div>
+</template>

playground/src/views/demos/features/vue-query/paginated-queries.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { IProducts } from './typing';
+
+import { type Ref, ref } from 'vue';
+
+import { keepPreviousData, useQuery } from '@tanstack/vue-query';
+import { Button } from 'ant-design-vue';
+
+const LIMIT = 10;
+const fetcher = async (page: Ref<number>): Promise<IProducts> => {
+  const res = await fetch(
+    `https://dummyjson.com/products?limit=${LIMIT}&skip=${(page.value - 1) * LIMIT}`,
+  );
+  return res.json();
+};
+
+const page = ref(1);
+const { data, error, isError, isPending, isPlaceholderData } = useQuery({
+  // The data from the last successful fetch is available while new data is being requested.
+  placeholderData: keepPreviousData,
+  queryFn: () => fetcher(page),
+  queryKey: ['products', page],
+});
+const prevPage = () => {
+  page.value = Math.max(page.value - 1, 1);
+};
+const nextPage = () => {
+  if (!isPlaceholderData.value) {
+    page.value = page.value + 1;
+  }
+};
+</script>
+
+<template>
+  <div class="flex gap-4">
+    <Button size="small" @click="prevPage">上一页</Button>
+    <p>当前页: {{ page }}</p>
+    <Button size="small" @click="nextPage">下一页</Button>
+  </div>
+  <div class="p-4">
+    <div v-if="isPending">加载中...</div>
+    <div v-else-if="isError">出错了: {{ error }}</div>
+    <div v-else-if="data">
+      <ul>
+        <li v-for="item in data.products" :key="item.id">
+          {{ item.title }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

playground/src/views/demos/features/vue-query/query-retries.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { useQuery } from '@tanstack/vue-query';
+import { Button } from 'ant-design-vue';
+
+const count = ref(-1);
+async function fetchApi() {
+  count.value += 1;
+  return new Promise((_resolve, reject) => {
+    setTimeout(() => {
+      reject(new Error('something went wrong!'));
+    }, 1000);
+  });
+}
+
+const { error, isFetching, refetch } = useQuery({
+  enabled: false, // Disable automatic refetching when the query mounts
+  queryFn: fetchApi,
+  queryKey: ['queryKey'],
+  retry: 3, // Will retry failed requests 3 times before displaying an error
+});
+
+const onClick = async () => {
+  count.value = -1;
+  await refetch();
+};
+</script>
+
+<template>
+  <Button :loading="isFetching" @click="onClick"> 发起错误重试 </Button>
+  <p v-if="count > 0" class="my-3">重试次数{{ count }}</p>
+  <p>{{ error }}</p>
+</template>

playground/src/views/demos/features/vue-query/typing.ts

@@ -0,0 +1,18 @@
+export interface IProducts {
+  limit: number;
+  products: {
+    brand: string;
+    category: string;
+    description: string;
+    discountPercentage: string;
+    id: string;
+    images: string[];
+    price: string;
+    rating: string;
+    stock: string;
+    thumbnail: string;
+    title: string;
+  }[];
+  skip: number;
+  total: number;
+}