infinite-queries.vue
1.53 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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">加载...</span>
<span v-else-if="isError">出错了: {{ error }}</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>