Confused by the many examples and docs of implementing trpc, next.js (app router), and clerk.

To show an examples of the many variants an implementations here is an example: In TRPC Docs: https://trpc.io/docs/v10/client/nextjs/ssr, I see they recommend using import { createTRPCNext } from '@trpc/next'; And this is for nextjs Page router.
In the T3-OS/create-t3-turbo https://github.com/t3-oss/create-t3-turbo/blob/main/apps/nextjs/src/trpc/react.tsx, which uses app router instead of page router, they are using import { createTRPCReact } from "@trpc/react-query"; The T3-OS seems to be the closest to what I want, but they don't use clerk. And The repo the reference for clerk auth is out of date.
Main Concern: I'm getting overwhelmed by so many variants of implementation. Many are out of date. Can't seem to find an up to date repo example of ssr and client side requests using. trpc v10, nextjs 14, clerk, and prisma.
Main Question: Anyone have an example repo of ssr and client side requests using. trpc v10, nextjs 14, clerk, and prisma.
M
Max20d ago
Okay so createTRPCNext is not compatable with next 13 or 14 got it.....fuck that is annoying. Docs are out of date yo Or at least app router
M
Makistos18d ago
Seems like I'm not the only one struggling with this. I'm trying to get SSR to work and even after enabling it I get an unhandled error that I shouldn't be using useState unless it's a Client Component. And this useState is somewhere inside trpc. I think I got the switch to app router done, basically replace "pages" with app and the file structure is good to go but instead of _app.tsx you need to add the withTRPC wrapper to layout.tsx. There you export trpc.withTRPC(RootLayout). Having read through the questions in this topic I don't think tRPC is a good choice with NextJS unless you are very knowledgeable about both. There seems to be lots of difficult issues that no-one can solve at the moment.
B
BeBoRE18d ago
createTRPCNext is mainly for the page router from my understanding, a lot of stuff intended for the app router haven’t been finalized.
M
Makistos17d ago
Ok, so tRPC is not really usable right now if I want to start a new NextJS project.
B
BeBoRE17d ago
It is, there is just a lot that is unstable or unreleased. You can use SSR in client components the way Makistos mentions, and you can use createCaller in server components.
M
Makistos17d ago
Problem is if and when I hit some snag I'd be pretty helpless because I'm not familiar with tRPC or SSR - something that already happened in fact.
P
Prashant17d ago
Documenso is using tRPC and Next14 in prod. Check their github. There are enough examples to fight through all the challenges.
P
Prashant17d ago
GitHub
GitHub - documenso/documenso: The Open Source DocuSign Alternative.
The Open Source DocuSign Alternative. Contribute to documenso/documenso development by creating an account on GitHub.
M
Makistos15d ago
Ok, that looks useful. I'll have a look. Sorry to Max for hijacking your thread but hope that repository helps you too. And immediately I run into the same problem someone else here also had (and no-one had a solution) that transformer in createClient has moved somewhere else. Documentation unfortunately is next to useless. I can see exactly the same stuff in my IDE with code completion, i.e. there is absolutely no documentation in the documentation. For instance, tRPC examples tell to use createTRPCNext, but documenso doesn't use it. So what is it for? No idea because documentation only tells there is a function called it. It doesn't explain what it does or what the parameters do. I tried to fix the issue above and just got even harder issues. I assume transformer needs to be moved under links; httpLink (or httpBatchLink - what's the difference? Docs don't tell) but now I apparently need to define a transformer in my initTRPC-object first - I guess this should be in the initTRPC.create() function but I copied that from tRPC's example and there are no parameters used there. So what am I supposed to do here?
More Posts
TypeError: cache is not a functionTrying to run vitest integration testing on a procedure but i keep running into errors with a "cacheCan't throw errorMy request is pending although throw new TRPCError() executed. Something wrong here?How to use `getQueryKey` from the server side?Hi guys, i cannot figure out how to use `getQueryKey` from the server side. Is this possible? The ukeep previous dataTrpc 11 (trpc@next) doesn’t have support for keepPreviousData? I’m trying to useQuery with keepPreviContext with trpc ws clientHello! I've implemented trpc to my nextjs 14 app router project, along with trpc socket subscriptionCannot use usemutation in my nextjs/t3 projectI have this code ` const mutation = api.auth.addaccount.useMutation(); const handleLogin = async Has anyone passed supabase user to the tRPC context in Expo?I am trying to pass the logged in user to the context of tRPC. To be able to use it in the routers aCould we PLEASE get more docs on subscriptions / observables?They sem to me extremely useful and important and there is just about no documentation on them at alAdding trpc.useQuery hook to Next.js page with react-hook-form prevents stateful refresh.Hi, I'm new to tRPC so apologies if I've worded this poorly. I've got a page with a form managed by React-query options not available in trpc/react-query?I'm not sure if I'm misunderstanding something, but i'm trying to use the `keepPreviousData` option Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11 ] [ NextJS v14.1.X ]Good Morning I am getting the above error when updating to the latest version of NextJS - 14.1.1 thrCan I create custom terminating links?There are cases where a user of my application is offline and can't have access to the server. I'd lI want to use tRPC but I don't want a serverCan I have tRPC exclusively run on the client? I don't want to have any servers. The architecture a“Integrating Drizzle Prepared Statements with tRPC Context”I’m currently using tRPC and Drizzle for my project. In tRPC, we generally place the database driverI have an actual data returned, but I get 404 spammed in the consoleIt's a bit weird, I have the data returned but I also get 404 at the same time. Here is usage on thNo "query"-procedure on path "auth.getProfile"I am getting bunch of these errors and I can't figure this one out yet. I saw bunch of issues createType '[]' has no properties in common with type 'MutateOptions<{ id: string....Is it possible to get this to work? i am trying to make a single action that works across 2 routers.Strange error when testing with Auth.js v5Hi there, I just created a fresh Next.js project and added `next-auth` version 5 beta for authentictRPC failed on beehiiv.fetchBeehiivPosts: Invalid state: Controller is already closedIs there any solution to this error. I am getting while I try to hard refresh a page where I am callIs there a way to configure a trpc router to require an output() schema to be specified?I would like to require the output() schema to be specified on all the queries and mutations in my p