在 NextJs 中使用 tRPC 进行动态路由答案

【问题标题】：Using tRPC for dynamic routes in NextJs在 NextJs 中使用 tRPC 进行动态路由
【发布时间】：2023-02-11 04:15:14
【问题描述】：

所以我刚开始一个使用完整 t3 堆栈（Nextjs、prisma、tailwind、tRPC）的小项目，但遇到了一个小问题。

为了提供一些背景知识，我有一个数据库，其中包含艺术家（姓名、电子邮件、地址、ID、URL），这些艺术家与 pscale 中的“艺术”表（artName、artPrice、artDimensions）相关，我打算将其拉入并制作一个页面基于他们的“网址”页面/艺术家/[url].tsx.

我在 trpc/router/artist.ts 下设置了一个简单的路由器：


export const artistRouter = router({

    // Find by id
    byUrl: publicProcedure
        .input(
            z.object({
                url: z.string(),
            })
        )
        .query(async ({ input }) => {
            const { url }  = input;
            const artist = await prisma.artist.findUnique({
                where: { url },
                select: defaultArtistSelect,
            });
            if (!dealer) {
            throw new TRPCError({
                code: 'NOT_FOUND',
                message: `No artist with url '${url}'`,
            });
        }
        return artist;
    }),

}

对于我的[网址].tsx我知道我可以执行以下操作来拨打电话并根据 url 检索当前页面的数据。但是，这确实会导致出现一个小的“正在加载”屏幕，因为它在客户端上，然后数据会填充（而且数据在第一次查询时未定义，这是我没有考虑过的另一件事）。

const url = useRouter().query.url as string;
const { data: artist, isError, isLoading, isSuccess } = trpc.artist.byUrl.useQuery({ url });

我希望只对当前路线进行 SSR，但对于我来说，我无法让 getServerSideProps 与 trpc 一起工作。我可以只使用 prisma 查询来返回所需的艺术家数据，但我试图坚持使用 trpc，因为我在其他地方（即管理视图）进行客户端查询。

有没有办法将 getServerSideProps 与 trpc 一起用于动态路由？

** 更新 ** 我完全错过了解决 getServerSideProps 的 trpc 文档中的 ssg helpers。现在它看起来真的很慢。

【问题讨论】：

T3 堆栈不建议反对尽可能使用getServerSideProps？ youtu.be/1er7Zqs_h9k
你是对的。如果您不使用 getServerSideProps，您似乎会错过一些内置的下一条路线，例如“notFound”。我必须做更多的研究。

标签： javascript next.js trpc.io

【解决方案1】：

getServerSideProps 在服务器上运行，因此您可以在服务器上的任何其他地方执行任何操作。这意味着在不使用 SSGHelpers 的情况下调用 tRPC 过程的最简单方法是将过程逻辑提取到一个函数中并调用它。我最近录了一个关于这个的视频：https://www.youtube.com/watch?v=G2ZzmgShHgQ

【讨论】：