基于动态url的 TRPC查询

Question

使用TRPC和Next JS我想查询基于动态url的单个帖子，而不使用SSR或SSG。我发现工作的唯一方法是将as string添加到router.query.id，但这会导致TRPC错误(错误仅发生在第一次加载上)，因为router.query.id是初始加载的空对象，而不是字符串。有没有办法做到这一点，没有最初的TRPC错误?

import { useRouter } from "next/router";
import { api } from "~/utils/api";
const SinglePost = () => {
const router = useRouter();
const { data } = api.post.getById.useQuery({
id: router.query.id as string,
});
return (
<div>
{data}
</div>
);
};
export default SinglePost;

Answer 1

我这样修改了我的查询:

const { data } = api.post.getById.useQuery(
{
id: router.query.id as string,
},
{ enabled: !!router.query.id}
);

所以它只会在router.query.id不是空对象时启动。

Answer 2

我想在你的情况下有一个默认值可能就足够了

const defaultId = 'blah/blah/blah'
const { data } = api.post.getById.useQuery({
id: router.query.id ?? defaultId,
});