如何用反应查询制作无限大的卷轴？
我正在尝试用一个基本的API来使用react query useInfiniteScroll，比如驾驶舱数据库或pokeapi。
useInfiniteQuery有两个参数:缓存的唯一键和它必须运行的函数。
它返回一个数据对象，以及一个fetchMore函数。如果fetchMore被调用- -通过一个交叉观察者(例如-)，useInfiniteQuery再次调用它的参数函数，但是由于有一个本地回调getFetchMore()，useInfiniteQuery使用了更新的有效负载。
在正式文档中，getFetchMore自动接受两个参数:最后返回的值和返回的所有值。
在此基础上，他们的演示获取了getFetchMore发送的前一个页码的值，并使用更新的页码执行一个新的调用。
但是，如何使用只返回json的基本api来执行相同的操作呢？
以下是官方演示代码：
function Projects() {
const fetchProjects = (key, cursor = 0) =>
fetch('/api/projects?cursor=' + cursor)
const {
status,
data,
isFetching,
isFetchingMore,
fetchMore,
canFetchMore,
} = useInfiniteQuery('projects', fetchProjects, {
getFetchMore: (lastGroup, allGroups) => lastGroup.nextCursor,
})
回答 2
Stack Overflow用户
发布于 2020-08-11 12:55:11
无限滚动依赖于分页，因此要利用这个组件，您需要以某种方式跟踪您所在的页面，以及是否有更多的页面。如果使用的是元素列表，则可以检查上一次查询中返回的元素是否较少。例如，如果在每次新的提取中获得5个新项，而在最后一次获取时只有4个，则可能已经到达列表的边缘。因此，在这种情况下，您将检查lastGroup.length < 5是否返回true，如果返回true，则返回false (停止获取更多页面)。如果需要获取更多的页面，则需要从getFetchMore返回当前页面的数量，以便查询将其用作参数。衡量您可能在哪个页面上的一种方法是，计算数据对象中存在多少个数组，因为infiniteQuery将每个新页面放置在数据中的一个单独的数组中。因此，如果数据数组的长度为1，这意味着您只获取了第1页，在这种情况下，您需要返回数字2。
最终结果：
getFetchMore: (lastGroup, allGroups) => {
const morePagesExist = lastGroup?.length === 5
if (!morePagesExist) return false;
return allGroups.length+1
}现在您只需要使用getMore来获取更多的页面。
Stack Overflow用户
发布于 2021-09-30 09:26:20
这些步骤是：
等待default.
- Returning请求第一组数据的
- 为getNextPageParam.
- Calling fetchNextPage函数中的下一次查询提供信息。
参考https://react-query.tanstack.com/guides/infinite-queries
使用rest的示例1
const fetchProjects = ({ pageParam = 0 }) =>
fetch('/api/projects?cursor=' + pageParam)
const {
data,
isLoading,
fetchNextPage,
hasNextPage,
} = useInfiniteQuery('projects', fetchProjects, {
getNextPageParam: (lastPage) => {
// lastPage signature depends on your api respond, below is a pseudocode
if (lastPage.hasNextPage) {
return lastPage.nextCursor;
}
return undefined;
},
})示例2与graphql查询(伪代码)
const {
data,
fetchNextPage,
isLoading,
} = useInfiniteQuery(
['GetProjectsKeyQuery'],
async ({ pageParam }) => {
return graphqlClient.request(GetProjectsQuery, {
isPublic: true, // some condition/variables if you have
first: NBR_OF_ELEMENTS_TO_FETCH, // 10 to start with
cursor: pageParam,
});
},
{
getNextPageParam: (lastPage) => {
// pseudocode, lastPage depends on your api respond
if (lastPage.projects.pageInfo.hasNextPage) {
return lastPage.projects.pageInfo.endCursor;
}
return undefined;
},
},
);react将创建data，其中包含一个名为pages的数组。每次使用新的游标/页/偏移量调用api时，它都会向页面添加新页面。您可以使用flatMap数据，例如：
const projects = data.pages.flatMap((p) => p.projects.nodes)
当您想再次为下一批程序调用api时，请在代码中的某个位置调用fetchNextPage，例如：
const handleEndReached = () => {
fetchNextPage();
};Graphql示例查询：
添加到查询
after: cursor：
query GetProjectsQuery($isPublic: Boolean, $first: Int, $cursor: Cursor) {
projects(
condition: {isPublic: $isPublic}
first: $first
after: $cursor
) ...https://stackoverflow.com/questions/62155394
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号