在 SWR 提取请求中使用 Next.js 动态路由查询对象

Question

使用 Next.js 动态路由时，我尝试使用路由查询对象发出 SWR 提取请求，但在设置查询对象之前调用了我的 SWR 提取请求。

给定动态路由 /posts/[id]，考虑页面 /posts/123。

import { useRouter } from 'next/router';
import useSWR from 'swr';

export default function MyPage() {
  const router = useRouter();
  const { id } = router.query;

  const url = `https://my.api.com/posts/${id}`    // I've also tried using let here
  const { data, error } = useSWR(url, fetcher);
  
  console.log(url)

此 URL 最初控制台记录为 https://my.api.com/posts/undefined 并且从 API 返回错误，因为 https://my.api.com/posts/undefined 当然不是有效路径。

紧随其后，URL 控制台正确记录为 https://my.api.com/posts/123，然后页面上的数据通常会填充，但有时数据不会填充并且卡在 'loading' 状态。当我对 URL 进行硬编码时，这永远不会发生。

我是不是做错了什么？为什么查询对象不是立即可用的？有没有办法优雅地等待它被设置？

Answer 1

您可以像这样尝试使用条件数据获取：

const { data, error } = useSWR(id ? url : null, id ? fetcher : null);

同时检查以下对话：https://github.com/vercel/next.js/discussions/15952

在 SWR 提取请求中使用 Next.js 动态路由查询对象

Use Next.js Dynamic routing query object in an SWR fetch request

javascript

reactjs

next.js

swr