反应查询：useInfiniteQuery答案

【问题标题】：React-Query: useInfiniteQuery反应查询：useInfiniteQuery
【发布时间】：2022-07-11 06:32:05
【问题描述】：

所以，我已经浏览了这里的文档和答案，但我仍然需要一些帮助：

index.tsx

const getInfiniteArticles = ({ pageParams = 0 }) => {
  const res = await axios.get('/api/articles', { params: { page: pageParams } });

  return res.data;
}

api/articles.ts

const getArticles = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const { page } = req.query;
    const pageNum = Number(page);

    const data = await NewsService.getArticles(getRange(pageNum));

    return res.status(200).json({
      data,
      previousPage: pageNum > 0 ? (pageNum - 1) : null,
      nextPage: pageNum + 1,
    });
  } catch (err) {
    res.json(err);
    res.status(405).end();
  }
};

export default getArticles;

index.tsx

  const { data: articlePages, fetchNextPage } = useInfiniteQuery(
    'infinite-articles', 
    getInfiniteArticles, 
    {
      getNextPageParam: (lastPage, allGroups) => {
        console.log('lastPage: ', lastPage);
        console.log('allGroups: ', allGroups);
        return lastPage.nextPage;
      }
    });

  const handleLoadMore = () => {
    fetchNextPage();
  };

点击下一页后的控制台：

lastPage: { data: Array(50), previousPage: null, nextPage: 1}
allGroups: [
{ data: Array(50), previousPage: null, nextPage: 1},
{ data: Array(50), previousPage: null, nextPage: 1},
]

感谢任何关于为什么我得到相同组的帮助！ :)

【问题讨论】：

你的 react-query 前端代码看起来绝对正确，所以我会在服务器上寻找一些东西。还要检查网络选项卡关于从 api 返回的内容。看起来页面参数似乎没有发送到后端 - 你确定这就是 axios 的方式吗？为什么不将页面参数附加到 url 并从那里获取？
后端正在获取正确的页面...但是，有些东西没有触发新的查询调用。它不断发送与 0 相同的页面并获得相同的响应。因此，它在 useInfiniteQuery 调用 2 个页面的意义上起作用，但它没有根据返回的页面数据进行更新......我认为，因为当我尝试从“getInfiniteArticles”获取控制台时，我只得到一个日志开始然后它再次触发...没有记录任何内容，因为我最终对后端进行了 2 次调用

标签： react-query

【解决方案1】：

所以，原来我的结构不正确

 const {
   fetchNextPage,
   fetchPreviousPage,
   hasNextPage,
   hasPreviousPage,
   isFetchingNextPage,
   isFetchingPreviousPage,
   ...result
 } = useInfiniteQuery(queryKey, ({ pageParam = 1 }) => fetchPage(pageParam), {
   ...options,
   getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
   getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
 })

queryFn: (context: QueryFunctionContext) => Promise<TData>

queryFn 应该是一个返回 Promise 的同步函数

我要么传递异步函数，要么返回 TData 而不是承诺。

更新和工作：

  const getInfiniteArticles = ({ pageParam = 0 }) => axios.get('/api/articles', { params: { page: pageParam } });

  const { data: articlePages, fetchNextPage } = useInfiniteQuery('articles', getInfiniteArticles, {
    getNextPageParam: (lastPage, pages) => {
      // the returned axios response
      return lastPage.data.nextPage;
    }
  });

Reference Page

【讨论】：

一个 async 函数也只是一个返回 Promise 的函数，所以我怀疑这就是它?