javascript 在NextJ中使用tRPC进行动态路由

5n0oy7gb  于 2023-02-11  发布在  Java
关注(0)|答案(1)|浏览(248)

所以我刚刚开始了一个使用完整的t3堆栈(Nextjs、prisma、tailwind、tRPC)的小项目,并遇到了一个小问题。
为了给予一个小的背景故事,我有一个艺术家数据库(名字,电子邮件,地址,id,url),它与pscale中的一个“艺术”表(artName,artPrice,artDimensions)相关,我打算拉入这个数据库,并根据他们的“url”在pages/artists/[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;
    }),

}

对于我的**[url].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。现在它看起来真的很慢。

6ss1mwsb

6ss1mwsb1#

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

相关问题