ReactQuery useInfiniteQuery仅返回第一页数据问题求助

核心问题出在你的GQL查询函数里——你硬把nextToken设成了null，完全没用到传入的nextPage参数，导致每次请求都是拉第一页数据，React Query自然会复用缓存的第一页结果，不会发起新请求。

修复步骤 #

1. 修正GQL查询函数 #

把gqlListOrdersByAccountIdAndDate里的nextToken: null改成nextToken: nextPage，这样才能把分页token传给后端：

export async function gqlListOrdersByAccountIdAndDate(accountOrdersId: string, nextPage: string | null) {
  console.log('gqlListOrdersByAccountIdAndDate', accountOrdersId, nextPage)
  return API.graphql<GraphQLQuery<OrdersByAccountIdAndDateQuery>>(
    graphqlOperation(
      ordersByAccountIdAndDate,
      { accountOrdersId, nextToken: nextPage, sortDirection: 'DESC', limit: 5 })
  )
}

2. 确认组件代码无需改动 #

你的组件里useInfiniteQuery的配置是对的：

• queryKey不需要加pageParam，因为useInfiniteQuery会自动为每一页维护独立的缓存条目，queryKey是整个无限查询的唯一标识
• getNextPageParam能正确返回下一页token，fetchNextPage会自动把这个token传给queryFn的pageParam参数

验证修复效果 #

修复后调用fetchNextPage时：

• 控制台的console.log会打印出非null的nextPage值
• gqlListOrdersByAccountIdAndDate会带着正确的token发起新请求
• React Query会把新页数据追加到data.pages里，orders数组会包含所有页的结果

内容的提问来源于stack exchange，提问作者Dave