tRPC + NextJS App Router = Simple Typesafe APIs

[@olivercordingley6588]

This has got to be the 30th time I've watched this video over a 7 month period. Legendary.

[@jherr]

Thank you!

[@lemonz445]

Same, it's so good! Thanks for all the work here Jack, you're making us all better.

[@RobertSeghedi]

Same here

[@ThEldeRS]

I think that the biggest thing I’ve learned from this video is actually the Awaited type. I’ve been wondering if something like that exists since yesterday!!! Thanks for the great video, Jack! Hope that you and your wife are doing great 🙂

[@jherr]

We are. Thank you for asking.

[@JEM_GG]

Agreed! I've just used it on a App dir/Drizzle/fetch setup and it worked quite well with handing types from server components to client

[@geolvz]

Same here, that awaited type is very useful. Thanks for the video Jack!

[@willbdev]

The timing of me finding this is perfect. Thank you for your time. You're helping me learn as I go .ore than I can say.

[@mjohnson510]

Omg! This is a game changer! I really liked trpc and didn’t want to move away from it

[@Its-InderjeetSinghGill]

You made my day. Currently TRPC with next 12 kinda sucks because came across some issues like caching and couldn't figure out why trpc making same request when we reload our page which is not as performant and it eats up lot of database usage. May be I am wrong with the caching problem because I tried what you have suggested at 18:22 but it didn't work in my case. But now I am going to use TRPC with next 13 confidently only because of you. Thanks

[@yurisoares2596]

Awesome. This is the third vídeo I have seen about tRPC, and this was the best out there. Even since the setup is really similar to the T3.

[@bytequest1552]

Is is working?

[@MikeyUchiha]

If it's not too much to ask, I would really appreciate a couple if things to expand on this. 1. Showing how to use the db as a context in TRPC like how T3 stack does it. 2. Show how to use context in TRPC for Clerk. This couple of pieces would offer a complete replacement and comparison to the T3 stack not providing support for App Directory but still leverage some of the good practices that are part of the framework. Thanks for your time and consideration.

[@ovidiuk2]

I am also looking for some details about how to use context for implementing Clerk with TRPC in this setup

[@rogueturnip]

@@ovidiuk2 I'm getting closer. this works but always fails on auth right now. maybe it will help you solve it context.ts next to the trpc.ts file import * as trpcNext from '@trpc/server/adapters/next'; import { SignedInAuthObject, SignedOutAuthObject, getAuth, } from '@clerk/nextjs/server'; // import { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch'; import { inferAsyncReturnType } from '@trpc/server'; interface AuthContext { auth: SignedInAuthObject | SignedOutAuthObject; } export const createContextInner = async ({ auth }: AuthContext) => { return { auth, }; }; export const createContext = async ( opts: trpcNext.CreateNextContextOptions ) => { const context = await createContextInner({ auth: getAuth(opts.req) }); return context; }; export type Context = inferAsyncReturnType; update trpc.ts to import { TRPCError, initTRPC } from '@trpc/server'; import type { Context } from './context'; const t = initTRPC.context().create(); export const router = t.router; export const middleware = t.middleware; export const mergeRouters = t.mergeRouters; const isAuthed = t.middleware((opts) => { const { ctx } = opts; if (!ctx.auth?.user?.id) { throw new TRPCError({ code: 'UNAUTHORIZED' }); } return opts.next({ ctx: { user: ctx.auth.user, }, }); }); export const publicProcedure = t.procedure.use(isAuthed); change route.ts to import { NextRequest } from 'next/server'; /* eslint-disable @typescript-eslint/no-explicit-any */ import { appRouter } from '@/server'; import { fetchRequestHandler } from '@trpc/server/adapters/fetch'; import { getAuth } from '@clerk/nextjs/server'; const handler = (req: NextRequest) => fetchRequestHandler({ endpoint: '/api/trpc', req, router: appRouter, createContext: () => ({ auth: getAuth(req) }), }); export { handler as GET, handler as POST };

[@rogueturnip]

I got it fully working.. not sure if this is best practices or not but what I found is you can't pass the auth from clerk on the server fetch, but you don't need too cause your page should be auth'd too. So what I did was updated the context.ts file to handle no context from server by putting in a userId===system. /* eslint-disable @typescript-eslint/no-explicit-any */ import * as trpcNext from '@trpc/server/adapters/next'; import { getAuth } from '@clerk/nextjs/server'; // import { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch'; import { inferAsyncReturnType } from '@trpc/server'; export const createContextInner = (req: any) => { if (!req) { return { auth: { userId: 'system' } }; } return { auth: getAuth(req), }; }; export const createContext = async ( opts: trpcNext.CreateNextContextOptions ) => { const contextInner = createContextInner(opts.req); return { ...contextInner, req: opts.req, res: opts.res, }; }; export type Context = inferAsyncReturnType; then you modify the serverClient.ts to import { appRouter } from '@/server'; import { createContextInner } from '@/server/context'; export const serverClient = appRouter.createCaller( createContextInner(undefined) ); @jherr

[@IcedTears]

Not sure the best approach for this but in my case I've created a createTRPCContext function that return my db object: export const createTRPCContext = () => { return { db, }; }; Then I used this in the init function: const t = initTRPC.context().create({ when creating the serverClient: export const serverClient = appRouter.createCaller(createTRPCContext()); and in the handler: const handler = (req: Request) => fetchRequestHandler({ endpoint: "/api/trpc", req, router: appRouter, createContext: createTRPCContext, }); For Clerk in your trpc file: const isAuthed = t.middleware(async ({ next }) => { const user = await currentUser(); if (!user) { throw new TRPCError({ code: "UNAUTHORIZED", message: "Not authenticated" }); } return next({ ctx: { user: user, }, }); }); export const protectedProcedure = t.procedure.use(isAuthed); Now your protected procedure are going to have user within the context

[@paweknot9047]

@@IcedTears thanks pal, thats exactly what I needed for clerk

[@edwardselirah4764]

Just had a project and I had to understand tPRC quick. This was the right video for me. Thanks

[@ShaunCullen]

Looking at the type spaghetti at @17:40 on line 10: Now we C++'n. But seriously this is really cool, thanks for the full end to end walk through Jack.

[@BeBoBE]

tRPC has a utility type for this exact situation called inferRouterOutputs to retrieve the outputs of each endpoint

[@victortriathlete]

Amazing introduction to integrating tRPC into the NextJS app router.

[@mertdr]

Perfect timing Jack! I’ve been thinking trpc and react query has become irrelevant after app directory released but apparently they’re more relevant than ever because of app dir’s persistant caching issue. Actually I’m not even sure if it’s an issue or intended behavior because next team hasn’t provided a proper solution for months.

[@mertdr]

@@YordisPrieto it’s about server component’s caching. Next team somehow decided a 30 seconds minimum caching for server components and revalidate value cannot change it. As far as I’m concerned it’s something similar to opcache of php. It’s mainly for html content inside of a server component but I noticed it also affects fetching as well. There was a discussion on github to provide a new global similar to revalidate in order to override caching time but it’s not implemented yet. That being said, mutations or refetching is not handled properly without additional methods like router.refresh() etc. and it complicates things. Many people had issues about this “cached by default” approach.

[@YordisPrieto]

@@mertdr that explained what happened to me. Debugged for ours Nats message passing because I couldn’t figure out why my next page didn’t show the results… until I opened the console and forced the cache to be invalid … never understood the duck was going on until now … really stupid if you ask me

[@mertdr]

@@YordisPrieto I switched to TRPC the day I posted the comment above so I remember the actual problem vaguely. As far as I can remember router.refresh() didn't help to invalidate fetch calls in server component, which is a huge problem. Caching is vital part of applications but like you said cached by default approach is not sensible and brings more problems than it resolves. I got used to server/client components and enjoy the concept very much but there are still so many things to iron out.

[@iSkreme]

You crushed this; taught us how to create a dynamic SSR web-app with database in under 20 minutes....

[@MuhammadHanann]

Thank You So Much Sir. Before your video tRPC was a rocket science for me.

[@MikeyUchiha]

I have never subscribed so fast. I have been waiting over a month for someone to finally show how to do this. You are the GOAT. Thank you 😊

[@tamir.s]

Another great video from you, Jack, thank you very much! I wish I could watch that few weeks ago, it could save me so much time wasted on figuring it out on my own. But I still decided to move away from tRPC for now, as I didn't know how to add and connect the other important layers that you covered in your older video, like creating the context with stuff you need like prisma, and oAuth. It will be really helpful if you continue where you left off in this video with these topics. Much appreciation and love to you and your family!

[@exponent42]

please correct me if I'm wrong, but isn't TRPC redundant with server actions? they're fully typed e2e?

[@filipjnc]

Server actions are alpha/experimental still. Plus, nextjs doesn‘t really promote fetching data in client components with server actions. I use RSC patterns in server components + tRPC in client components and it works wonders.

[@asutula5797]

Maybe you're implying something about "fetching" data vs mutating data on the server, but as far as I can tell fetching data works fine.

[@filipjnc]

@@asutula5797 it works, but nobody from Next.js promotes this solution in the docs and the caching story is unknown or even non existent.

[@exponent42]

@@filipjnc thanks, that does make sense

[@RaduCiocan]

could you make one to for nextauth+drizzle+trpc+appdir? (nextauth just added drizzle support)

[@jherr]

You mean just add nextauth to this?

[@RaduCiocan]

that will be a good addition@@jherr

[@RaduCiocan]

thanks, I did not known they made it @@Fuzbo_

[@lukewestondev]

I really don’t understand what next auth is offering. I was surprised to see there’s no support for things like password reset

[@carlosricardoziegler2650]

Will be interesting a video to use next-auth with some external api. Imagine that you have a backend and need to integrate with into new next app with next-auth. This is a good approach or better to use another custom solution?

[@AvihuTurzion]

Amazing walkthrough Lerned so much in such a short amount of time

[@zustandslos]

such a great video, helped my really good to understand how trpc works with the app router, thanks :)

[@WahyudinataSetiawan]

this helped me much better than trpc doc itself PS: there is an update to the TRPC function signatures, createCaller is replaced with createCallerFactory

[@KayKhan-x1c]

Can i see the example code of what you changed?

[@oscarljimenez5717]

Amazing video. Actually you can even do streaming with tRPC 👀, and they have a experimental package for server actions too. And in RQ to avoid the second request, is better to set stale time to 30 globally, that's what TkDodo is going to do in the next version to avoid this.

[@merveillevaneck5906]

LOVE IT!!!! i literally did EXACTLY this about 2 months ago when setting up our new internal R&D project and i gotta say the TRPC + app router + drizzle combo is just pure bliss. great to see some tested content on the topic!!

[@josephdburdick]

I was racking my brainz over this all weekend and finally found your video. Liked and subscribed, thank you.

[@nicolascalathus7349]

It would be very enlightening to see a video where you showcase tRPC against the server actions way of doing things to clarify why tRPC.

[@mauricioyepes3394]

Hi Jack, this is the first video I've watched on your channel, and you've saved me an incredible amount of time. I'm a new follower here. Thank you!!

[@jherr]

Thanks! Happy to have helped.

[@Furki4_4]

Thank you so much! I was searching for a way to implement tRPC with the app directory. This video explains everything very clearly!

[@TheRoseWoodBody]

Thanks, Jack! It's exactly what I've been looking for.

[@GuilhermeSiebert]

Wow, it's just Monday and you have already saved me the full week! Thank you so much. Subscribed!

[@noor_codes]

Such a great video, straight and easy to understand. I just hope you dived deeper into the important things like how to add the db into the context so you can access it all over the place and also explain middlewares and how that works with authentication. I would love to see a video on that, the official docs do not cover app-router on nextjs

[@TheIpicon]

Beautiful video! missing app router trpc integration is one of the feew reasons people don't move to the app router yet.

[@gadgetboyplaysmc]

Also the router caching problems tho

[@khushalbhardwaj6192]

There's hasn't been a video on how to set up tRPC on the app router for such a long time. I had stopped using tRPC in the projects after I switched to APP Router, after seeing this video I'm probably back at it. Thanks for this 👏

[@abhinav.sharma]

Exactly the video I was looking for JACK!

[@roba998877]

Amazing video! I’d love to see how to best do error handling if you’re looking for video ideas 😊

[@MrMoulisd]

Great video! I have a question @16:10 appRouter.createCaller() shows as depricated any possible replacements?

[@xanthe7045]

Always love your content. I'm creating an app that is using Nextjs 13 app + tRPC. and this video was just what I needed. Thanks.

[@davidhavl]

Fantastic. Thank you for the good work and for educating the dev world the right way!!

[@Dgiulian]

Amazing, love the stack. I'm going to try it myself.

[@wagnermoreira786]

What an aaaawesome video! thanks so much Jack! This is just what I was looking for :)

[@tonybenci2796]

Hi Jack. I was having an issue with 1 line of code :). In client.ts your example shows import { type AppRouter } from "@/server"; I believe that this ensures only the type is imported without importing the actual module at runtime. Problem is (with both prettier and typescript at latest versions as of today) Prettier said no. ',' expected. (3:15) 1 | import { createTRPCReact } from "@trpc/react-query"; 2 | > 3 | import { type AppRouter } from "@/server"; I initially removed the type but realised that that's going to import the module. I then changed it to the following syntax import type { AppRouter } from "@/server"; And everyone was a happy camper. Is your syntax more correct? And, if so, how to we get Prettier to cooperate? Thanks Tony

[@jherr]

AFAIK, both work but I do prefer the type outside actually.

[@mubin-ansari]

I always loved tRPC and was disappointed to see it not sustained in the app directory workflow. Super excited to see this setup, and can't wait to use it in my future projects!!

[@asimalqasmi7316]

Thanks a lot for this awesome video. I saw it twice and maybe I will see it again tell I grasp the ideas from it.

[@randomuser6789]

Extremely high quality content, thank you very much

[@gosnooky]

My issues with this is at 17:25, where there's all that boilerplate TS code Awaited, ReturnType and typeof and indexed type property, when I just prefer a type or class that is Array. I also find the pattern that a LOT of TS devs are using where the type object is inlined with destructuring, it's hard to read that code. It's cleaner to write interface Props { initialTodos: Array }, then function TodoList(props: Props) {...}. It's much cleaner I think.

[@jherr]

AFAIK, you can do that. You could declare a Todo that is shared between the tRPC endpoint and the UI. You'd need to synchronize it with what's coming out of the DB. And if it matches that's fine. I used the utility types here because they naturally track with the output of the API endpoint.

[@phranjay2545]

You have no idea how much you have helped me, thank you for what you do

[@raygan3]

I don't get why do we need to make a http requests using serverClient if we are already on the server (server component), can't we just call the server procedure? why the http link is needed?

[@snatvb]

many thanks for the video, really helpful and looks better than server actions that's experemental

[@tarzan7994]

Incredible video Jack honestly you've helped me progress massively throughout my coding journey. I was only starting to implement typescript in one of my projects and was faced with how to implement trpc in the app router so your video came at the perfect time. Any chance there will be a further video explaining how to implement optimistic UI updates using this pattern? Thanks again for all the content!

[@parmetra]

Hello! At 5:02 I get the following type of error: Error: No response is returned from route handler 'D:\Site\trpc_next\src\app\api\trpc\[trpc] oute.ts'. Ensure you return a `Response` or a `NextResponse` in all branches of your handler.

[@yadex10]

Hello, I had the same error and I solved it by checking that handler function returns the fetchRequestHandler, since it was not doing the implicit return

[@paultal]

@@yadex10 This saved me! Thanks!

[@sebastiansimionescu4412]

I’m not sure if is only me but I have an issue with createCaller. It is asking for context not for { links }. 16:03

[@volodymyrbalytskyy5207]

createCaller has been deprecated. Google "createCallerFactory". So, instead do "const createCaller = createCallerFactory(appRouter);" And on the line below add "export const serverClient = createCaller();"

[@xWildStorm7x]

Hello Jack, thanks for the awesome video! I have a question, I added a context to my TRPC app router and now I am getting a type error on the serverClient. It asks me to pass it the context. In the TRPC docs it indicates to pass the context like this: createCaller(await createContext()) but I get a type error saying the createContext function expects to receive req and res params. Not sure what to do since I don't have access to req and res in this file. Do you know how to solve this issue? Any guidance will be appreciated

[@eovandodev]

This is what I've be waiting for! Thanks Jack

[@teetanrobotics5363]

"Hey Tom! Just wanted to drop by and let you know how much I'm loving your content, especially your T3 Stack, TRPC tutorials, and Next.js guides. Your explanations are clear and really help me grasp these concepts better. 🚀 I'm eagerly looking forward to more of your tutorials in the future. If you could create more content like this, it would be amazing! Your insights and tutorials are a great resource for learners like me. Keep up the fantastic work and keep those tutorials coming! 👍📚"

[@jherr]

Thanks! Name is Jack though.

[@kickbuttowsk2i]

​@@jherrlol

[@adlerspencer]

Amazing, Mr. Herrington! Thank you!

[@oscaresteve5344]

Great video! Would be fantastic to have a video handling validation error from Zod :)

[@vazus171]

Hi Jack, Great video! However I've noticed an issue. In 16:10 you are creating a caller and pass links there. But tRPC caller accepts context rather than config, so now you have this weird context on server. I've tried to get "normal" context preserver, but failed. Not sure how it can be done with App router. I have NextAuth to create a session and want to always preserve this session on context, so it can be used in middleware for protected routes. Any ideas on how to do it?

[@oggy112]

Jack, you're absolutely amazing.

[@shteev]

Great stuff! I may be jumping the gun as I haven't finished the video just yet, but you're saying that we have to use "use client" and react query to interact with our server code, and I'm sure it's possible to bypass all that using server components plus server actions within the form action attribute.

[@lemonz445]

Would love to learn more about the serialization that happens from server -> client compared to the SuperJSON transform. Just spent a few hours struggling to figure out why my initialData had a bigint that was a string... and I'm fairly sure it's the RSC serialization that isn't SuperJSON-based. It seems like tRPC has _some_ docs on prefetching/dehydrating but I can't get it to work in the app router.

[@sujeet4410]

Hey Jack. Which Zsh theme are you using?

[@jherr]

Oh-my-posh with the Atomic theme using the Spacemono NF font.

[@sujeet4410]

@@jherrthanks a ton. appreciate it. 🙌

[@FutureExC-gd7zv]

Crystal clear explanation.

[@willisplummer]

Is there a way to set up a trpc client for SSR without knowing the absolute url? like just a relative path to the trpc endpoint?

[@jherr]

Not automatically that I know of. But you could add some middleware to get the localhost:3000 from the request and put it into the request headers, then use that header in the RSC to get the localhost:3000 dynamically. Or you could do it with an environment variable. Environment variables are available in RSCs since they are running on the server.

[@willisplummer]

@@jherr thanks for the reply -- i ended up being able to use `localhost:${process.env.PORT}/api/trpc` even on my staging server where the hostname is arbitrarily generated. I guess this is because the request comes from inside the same box?Great video - super useful content. thank you

[@MascleGinger]

Jack, your content is just the next level! I am wondering how do you manage to do a full time software development job and provide such a high quality content

[@jherr]

I don't. I'm now a full time content creator.

[@MattChinander]

The flashes of the white background browser and terminal are brutal to my eyes.

[@GringoDotDev]

Really good video! For me though the bigger question re: tRPC + Next 13 is "why?" Seems like once server actions are more stable, there won't be so much need in the stack for a typesafe way to call the backend from the frontend. Unless, I suppose, you want a SPA architecture e.g. for easy extraction to Capacitor or something.

[@onta.nicolae]

same question here

[@filipjnc]

Well server actions do not help you with fetching data in client components. And if you say: just pass it down from the server component - you can only do so when you can bind the behavior of your client component to something your server can access too: URL path, cookies, etc. What if your client component is highly interactive and needs to fetch data on the fly, e.g. combobox with server side filtering? In this case neither RSC fetching nor server actions will help you much. You can use server actions to fetch data for you in the client component, but nobody (including the Next team) seems to promote that. I think the caching story there is non existent.

[@GringoDotDev]

@@filipjncmakes a lot of sense, thanks!

[@PyrexCelso]

@@filipjnc why can't you use a server action that returns the data and then query it with startTransition?

[@filipjnc]

@@PyrexCelso i’m not saying you can’t. I’m saying that this approach is described nowhere in the docs or anywhere in any tutorial, which means it is probably not an intended use. Also, I think server action responses are not cached in any way - making them not the best for data fetching scenarios.

[@zachmeyer_]

Curious why not just use NextJS server actions? Wouldn't that still maintian typesaftey across the client server boundry?

[@andriiantoniuk8419]

This is excellent!!! Thanks for the video :)

[@noccer]

A really great walkthrough, thanks a lot! ☘

[@tmerb]

is there a reason why @6:30 components is hidden?

[@cristianmargineanu1458]

big up for the video, I've made it work months ago tho 😎

[@NicolasVegaTerrazas]

Awesome video! One question: when typing initialTodos why didnt you use the trpc built in methods to infer the types of the procedures inputs/outputs? Is there any particular reason ? You could save some verbosity.

[@jherr]

Can you give me an example of that?

[@NicolasVegaTerrazas]

@@jherr and you can also use some convenience methods: type RouterInput = inferRouterInputs; type RouterOutput = inferRouterOutputs;

[@NicolasVegaTerrazas]

​@@jherr the main tradeoff is that your component is tied to the type of your resolver output type, and not to the type of function wrapping the backend call.

[@caincobain9318]

Hey I know am late but I have a question if you don't mind, how do you handle types that are in the ORM modals like Date and are not supported by typescript ? like for the initalTodos with created_at field of type Date it's not working with react query ts for initialData (am using prisma btw). thx

[@vizunaldth]

fix posted

[@binh1298ify]

Thanks, Mr Herrington, very helpful video. Although I wish it was postgres instead of sqlite

[@jherr]

Should be pretty straightforward to swap out sqlite for Postgres. They are both SQL databases and in this simple usage context are essentially identical.

[@binh1298ify]

@@jherr ahhh yes, i had done it before i made the comment

[@tomirodriguez7195]

The think that makes me a bit of noice about trpc and SSC is that you're basically calling your own server from the server to do some action, such as calling your db. I see no point on calling an endpoint, for most cases, when you can do it inside your component. I do still find it useful client side (at least till actions are stable), not only to use tanstak query functionalities (which are awesome) but also to have that nice typing when you call and enpoint.

[@jherr]

Coupla things, first you are calling, at least in this case, on the local loopback, so it's not that slow. And you benefit from the fetch cache if you call it from multiple places. But if you wanted you could pull out the tRPC function code into a vanilla function and then call that directly. And you could wrap that in a React `cache`.

[@tomirodriguez7195]

@@jherr thanks for your response! I agree with all the things you said. It’s not that slow making that calls through TRPC. I still think it’s a great tool, but at least for me, it’s just the fact that the same result comes out of the box with Server Components.

[@jherr]

@@tomirodriguez7195 A few folks have mentioned that, and I get it. To do _precisely this example_ in a single tier you don't need tRPC. That's one of the problems of picking an example to show. If I showed an example that showed a monorepo setup, with the tRPC server in a Nest app, a NextJS app that consumes it, and then say a React-Native App that also consumes it, that would be a much better demonstration. But it would also be an hour long video that few would watch.

[@djuka8121]

Why aren't they documenting the app router on their trpc docs page?

[@kosti2647]

the explanation was really good! I'm struggling to add next-auth session to server client, do u think u could extend this repo to also have next auth session implementation? I think many folks could use such video, having auth is common thing nowadays. I'm not sure how to have user context/session available in trpc context

[@computing1]

How would you deploy the serverClient to something like vercel? Specifically, for the httpLink url, what do you put there?

[@nabinsaud4688]

What about cobtext and private procedure

[@jherr]

cobtext? Context?

[@nabinsaud4688]

@@jherr yes context in trpc

[@venobrun]

yes I am also wondering about this. and also try to make protectedProcedure but without any luck

[@dasf1105]

I'm also struggling with this.

[@SurenderKumar-xu6wn]

Same here

[@felixarjuna9908]

Great Video! I know, it is not scoped of this video, but has anyone tried to deploy an app using tRPC and Drizzle to Vercel, cause i'm having trouble there ...

[@johnc0de]

Same here!

[@felixarjuna9908]

The error that i get is just fetch failed without any error message or something. It seems like the serverless functions are not running

[@StabilDEV]

Superb video, thanks a lot! What is the advantage of putting client.ts and serverClient.ts into app/_trpc instead of e.g. lib or utils outside of the app dir?

[@mayrarincones8427]

Thank you!! this was really helpful ❤

[@willurban837]

AMAZING, thanks for the video!

[@kalanz7999]

How do we implement TRPC socket subscriptions within next JS?

[@Exlaso]

how can i use middleware and context for sending cookie as response

[@jherr]

Just add a middleware.ts file to your project. tRPC doesn't change any of that.

[@jhamama-me]

Thanks heaps for the video Jack, been thinking about this a lot in the last couple of days. One question though, have you thought about how you would deal with caching on the server side ? Since were not using fetch we cant use the invalidation layers provided by the extended react fetch. I know we can use the new react cache but im not sure it supports tag invalidation on the server side. Wondering if you have a solution for this. Thanks again, love the videos

[@jherr]

This is using fetch on the client side. It's buried in some layers, but it's still fetch.

[@jhamama-me]

​@@jherr moreso on the server side. Speaking mainly about the app routers server caching layer and invalidation tag system. Wouldnt this method remake the same call on the server if it was used in multiple different components ?

[@jherr]

@@jhamama-me No, fetch is monkey-patched and cached per-request by React and then again by NextJS.

[@MayJerCent]

@@jhamama-me I've been trying to figure this out as well. My understanding of the tRPC docs is: the "serverClient" in the video is created with createCaller(), which is a direct function call server side- no fetch so nothing is cached by Next. To cache the serverClient call it would need to be wrapped in React.cache()... but the method to manually invalidate the cache in Next is using the ALPHA function unstable_cache(), which is not recommended for production use... server actions are also not production ready. You can sometimes get away with calling router.refresh() in the mutation onSuccess callback, but this is not always an option. Wish there was better support for this right now.

[@jhamama-me]

@@MayJerCent Yeah thats the same conclusion i came to as well ! WIshing there was better support for unstable_cache. Looks like ill just be using cache for now and do the rest on the client side.

[@kaykhan9561]

Having trouble implementing this with next.js 14 i get "You're importing a component that needs useState" i think it has somethign to do with TrpcProvider, any ideas?

[@jherr]

You need to put a "use client" pragma on that TrpcProvider. What I end up doing is creating a new file in the app folder that has "use client" which then imports, and then exports, the TrpcProvider. Thus marking it as a client component.

[@infisspablo8602]

Would u say using trpc with app router is better or just do fetching with functions and using setver wctions for mutating the data?

[@artyomtaranenko2267]

What about ts-rest?

[@jherr]

I looked at it, there was no apparently pattern to use for the App Router. So when it was clear I'd need to do some research to get to a solution I decided to do that on tRPC instead.

[@AkashLayal]

Sir how can we revalidate the server fetched data using server client of trpc.

[@lukei9772]

just to be clear, just putting a sqlite.db file in your project wont work in production if you deploy to vercel right?

[@jherr]

Correct. Turso is a sqlite compatible remote database. So you can just change out the file URL for a Turso URL.

[@RatherBeCancelledThanHandled]

Wow I love your terminal ! Can you please share how you set that up ?

[@abubakar-emumba]

Hi Jack, how do you keep an eye on all these things in the frontend landscape at the same time?

[@jherr]

Tech Twitter, RSS feeds, newsletters, reddit, all of it.

[@abubakar-emumba]

@@jherr this means you learn things so fast. that's superb one more question: given that frontend landscape has been daily changing, what frontend tools or stack should a 2-3 years experienced frontend (react typescript) engineer must know nowadays, your recommendation please?

[@jherr]

@@abubakar-emumba Fully understand the reactive nature of all the hooks and how build proper dependency arrays. How to build custom hooks. React-query or SWR for querying. At least a couple of state managers, including Redux. CSS in modules, with Tailwind, and a CSS-in-JS system as well as the CVA. Wire protocols including REST, some RPC (e.g. tRPC) and the basics of GQL. NextJS pages and app router. All the routing mechanics including dynamic routing, and now parallel routes and suspended queries. As well as how to use NextJS to host APIs and also how to write independent APIs on top of something like Nest. How to make calls to microservices or DB queries using an ORM.

[@abubakar-emumba]

Thanks@@jherr

[@tonybenci2796]

Howdy Jack and group. Does anyone know what Jack uses to hight-light the code blocks it is a great tool and I'd love it for inhouse training.

[@jherr]

I use screenflow for that.

[@tonybenci2796]

@@jherr Thanks Jack. Great tutorial BTW, had me up and away with tRCP. I am only just getting my head around NextJS and the relationship of SSR/CSR in one box :). This was a huge help and I fully get why RPC (something we've had in one form or another in .NET over the years BUT never really this unified) is taking off. Cheers

[@aymanechaaba]

I'm fetching on the server and mutating on the client with react query, how do we revalidate data in this case?

[@jherr]

refetch

[@aymanechaaba]

@@jherr How?

[@jherr]

You call the `refetch` function that you get back from useQuery: tanstack.com/query/v4/docs/react/reference/useQuery

[@aymanechaaba]

I'm not using useQuery, I used useMutation, I did a client-side mutation but I fetched on RSC@@jherr

[@josephdburdick]

How does one add context to this so TRPC queries and mutations have ctx extended?

[@electrpaleo]

Great video! but I have a question, how can I do a server side call if my trpc router is hosted separately?

[@nomadmack]

Great video!!. Any example with a protected route using next-auth?

[@thealexkates]

any advantages to organizing client side stuff in directories prefixed with _ e.g., app/_components rather than from the root e.g., /components?

[@jherr]

You can put it in a number of places; /app/components, /app/_components, /components, etc. The only issue with /app/components is that you risk being considered a real route in the specially blessed files exist in there (page, route, not-found, etc.)

[@jacob5403]

in your terminal in VS Code, you have nicely coloured directories in breadcrumbs style, is this an vs extension please?

[@jherr]

That's oh-my-posh with the atomic style

[@laroikin]

Hi! How would you handle errors when they happen in server components? I want to redirect a user to the home page if they aren't authorized and show them proper error message in other cases, but throwing errors in routers causes server side errors so I can't really do anything in the server component

[@Riczerq]

Hi! You found a fix?

[@laroikin]

@@Riczerq No... I switched to sveltekit

[@Riczerq]

@@laroikin Oh, ok. Thanks :(

[@2u675]

Thank you very much for sharing. Could you share your zsh configuration? It looks great.