集成react-query无限滚动CodeSandbox示例出现localhost接口404错误

问题原因 #

你参考的示例是Next.js 项目，Next.js Pages Router 有内置约定：pages/api 目录下的文件会被自动识别为接口路由，执行 next dev 启动项目时会自动挂载这些接口，无需额外配置。
你当前用的是基于 react-scripts 的普通 React 项目，没有内置这个 API 路由能力，执行 react-scripts start 不会自动生成 /api/projects 接口，所以请求返回 404，和你写的组件代码没有关系。

解决方案 #

你可以根据自己的需求选任意一种方案解决：

• 临时测试组件逻辑：直接在请求逻辑里写死模拟数据，不用调用真实接口：

  useInfiniteQuery(
    "projects",
    async ({ pageParam = 0 }) => {
      // 模拟接口请求延迟
      await new Promise(resolve => setTimeout(resolve, 600))
      return {
        // 模拟最多5页数据
        nextId: pageParam + 1 < 5 ? pageParam + 1 : undefined,
        previousId: pageParam > 0 ? pageParam - 1 : undefined,
        // 单页10条模拟数据
        data: Array.from({ length: 10 }, (_, index) => ({
          id: pageParam * 10 + index,
          name: `项目 ${pageParam * 10 + index + 1}`
        }))
      }
    },
    {
      getPreviousPageParam: (firstPage) => firstPage.previousId ?? false,
      getNextPageParam: (lastPage) => lastPage.nextId ?? false,
    }
  )
  

• 本地搭建Mock接口：用 json-server 等工具快速启动本地接口服务，配置 react-scripts 代理规则，把 /api 前缀的请求转发到 mock 服务端口。
• 对接后端接口：直接把请求地址替换成后端提供的分页接口地址，注意跨域问题可以通过前端配置代理或者后端开启CORS解决。

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