是否可以使用 useSWR 在 nextJS 中发送页面 ID，以便我可以根据我所在页面的 ID 获取数据

Question

我在下一个 js 中使用 useSWR 发出请求，api 路由需要我所在页面的 ID，它在 router.query.id 的查询参数中但是我如何传递那就是使用 SWR，这样我就可以从我的 api 与我的数据库对话的路由器功能中提取正确的数据。

这是简单的请求

  const router = useRouter();
//PASS ROUTER.QUERY.ID to api/dataSingle
  const { data: valuesData, error: valuesError } = useSWR(
    `/api/dataSingle/`,
    fetcher,
    
  );

更新：如果我尝试按照文档传递数组，api 函数中的请求主体未定义。这是我阅读后尝试过的。

const fetcher = (url) => fetch(url).then((r) => r.json());
const router = useRouter();
  const { data: valuesData, error: valuesError } = useSWR(
    [`/api/dataSingle/`, router.query.id],
    fetcher
  );

api路线

import { query as q } from "faunadb";
import { serverClient } from "../../utils/fauna-auth";

export default async (req, res) => {
  console.log(req.body);
  returns undefined
};

更新：我尝试了以下获取器，但仍然不明白它在做什么，所以它不起作用。

const fetcher = (url, id) => fetch(url, id).then((r) => r.json());

Answer 1

据我了解，您想根据页面 ID 在 api 路由上获取数据。所以如果是的话，我假设你的 api 路由包含查询参数。

const router = useRouter();
//PASS ROUTER.QUERY.ID to api/dataSingle
const { data: valuesData, error: valuesError } = useSWR(
  `/api/dataSingle?id=${router.query.id}`,
  fetcher,

);

在 api 路由中，您将获得带有 req.query

的查询

import { query as q } from "faunadb";
import { serverClient } from "../../utils/fauna-auth";

export default async (req, res) => {
  console.log(req.query);
  returns undefined
};

Answer 2

useSWR中的第一个参数有两个作用：

它被转换成用于存储接收到的数据的缓存的键。
它被传递给 fetcher 函数以允许检索数据。

const fetchWithId = (url, id) => fetch(`${url}?id=${id}`).then((r) => r.json());

const Example = ({ id }) => {
    const { data, error } = useSWR([`/api/dataSingle/`, id], fetchWithId);

    return (
        <pre>
            {data && JSON.stringify(data, null, '\t')}
        </pre>
    )
}

当使用数组作为 useSWR 的第一个参数时，缓存键将与数组中的每个条目相关联。这意味着 ['/api/dataSingle/', 1] 接收到与 ['/api/dataSingle/', 2] 不同的缓存键。

允许您传递除获取代码所需的路由或查询字符串参数以外的数据。

直接来自文档的注释：SWR 浅比较每个渲染器上的参数，如果其中任何一个发生更改，则触发重新验证。

是否可以使用 useSWR 在 nextJS 中发送页面 ID，以便我可以根据我所在页面的 ID 获取数据

Is it possible to send the pages id in nextJS ussing useSWR so I can fetch data based on the ID of the page I am on

reactjs

next.js

swr