React-Query useInfiniteQuery加载下页返回相同数据问题求助

问题根因 #

你出现重复分页数据的核心原因是查询函数的分页参数名写错了：

• React Query 的 useInfiniteQuery 会将下一页的分页参数作为查询函数入参对象的 pageParam（单数）属性传入
• 你的代码里写的是 pageParams（复数，多了一个s），导致永远命中你设置的默认值0，每次都请求page=0的第一页数据，接口自然每次返回相同的内容，且返回的nextPage固定为1

修复方案 #

直接修改index.tsx里的getInfiniteArticles函数的参数名即可：

// 将参数中的 pageParams 改为 pageParam
const getInfiniteArticles = ({ pageParam = 0 }) => {
  const res = await axios.get('/api/articles', { params: { page: pageParam } });

  return res.data;
}

可选优化（非必须，不影响当前问题） #

你的接口错误处理逻辑顺序有误，先返回内容再设置状态码会导致状态码不生效，建议调整：

catch (err) {
  res.status(405).json(err);
}

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