如何解决是否可以使用 useSWR 在 nextJS 中发送页面 ID,以便我可以根据我所在页面的 ID 获取数据
我正在下一个 js 中使用 useSWR 进行请求,而 api 路由需要我所在页面的 id,它位于 router.query.id
处的查询参数中,但是我如何将其传递给 useSWR 以便我可以从与我的数据库对话的 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());
解决方法
useSWR
中的第一个参数有两个作用:
- 它被转换为用于存储接收到的数据的缓存的键。
- 它被传递给 fetcher 函数以允许检索数据。
const fetchWithId = (url,id) => fetch(`${url}?id=${id}`).then((r) => r.json());
const Example = ({ id }) => {
const { data,error } = useSWR([`/api/dataSingle/`,id],fetcher);
return (
<pre>
{data && JSON.stringify(data,null,'\t')}
</pre>
)
}
当 useSWR
的第一个参数使用数组时,缓存键将与数组中的每个条目相关联。这意味着 ['/api/dataSingle/',1]
收到与 ['/api/dataSingle/',2]
不同的缓存键。
允许您传递除获取代码所需的路由或查询字符串参数以外的数据。
直接来自文档的注意事项:SWR 会在每次渲染时对参数进行浅层比较,如果其中任何一个发生更改,则会触发重新验证。
,据我所知,您想根据页面 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
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。