Why I'm Finally Using This Next.js Tool Again

I really underestimated trpc period if you don't know what it is it's a package that helps you achieve full stack type safety in your apps for me personally that's nexjs so it helps you bring a feature that other Frameworks have by default type safety across client and server until next JS which doesn't have it by default trpc is one big part of how this channel started I eventually stopped using it because it couldn't do what I wanted to do namely run on the edge runtime and stream responses back from the server to the client it now can do that and I only found out because of this great Jack Herring video showing you exactly how to set trpc up in next year s13 now take this example on the right hand side we have a list of items what exactly these are is not too important just a list of items that are mapping over and displaying and the current way we get those items is from an API via a get request of course right we get the variants that are on the page and then display them to the user in the API that we used to get we have three steps let me drag this over so you can get an idea of what happens now the implementation details are not important what is important is the three steps we have to get the data for example the first one is the auth is the user allowed to get this data one user can only get the data for them then the actual database call lastly some optimizations so the data that we transfer over the network over the wire is not super large these optimizations are done on the server side so less data actually gets sent to the client the request is smaller and faster and then lastly we return that response from the server which is this file right here to the client and on the client this page right here what you can see right here is where we receive this data and this is where trpc really shines let me show you the current way we receive this data is via react query let's give this a bit more space via a regular use Query that gets triggered once the page is loaded with this structure three things from this use Query the actual data a loading State and a method to refetch this data so if we created a second item in this list hit create you can see the data is refreshed this is how we achieve that with this refetch then we give it a query key not important what this does it's for caching and a query function this query function is the important part this allows us to actually get the data that makes the request to the API that I just showed you to do that we use axials and make a request to this API under this URL return the data and now comes the important part okay this data is typed as any so this is really bad for user experience this should not be typed as any we could make any mistake and wouldn't even notice that is why the approach to solve this currently to solve this is to go over into the API where we return the data copy and paste the type from here over into this file and that that is not ideal I probably won't have to tell you because when you do changes in the API rod on the server right here change any business logic that has an effect on what's your return then you also need to copy that type again paste it over into the client where you receive the data now instead of talking you through what trpc does for us because nobody really cares it's pretty boring let me show you we can mark this entire code block and if I hit Ctrl V you're going to see the beauty of trpc bam this is one line of code and the beauty of trpc which is nothing new by the way this is not next year as specific at all I'm just really hyped it works in the app router is that this is now automatically typed these test sets whatever they're called it doesn't matter this type is automatically inferred passed back from the server to the client through some setup stuff it's not too important again if you want to set this up yourself I'm gonna link the Jack Herrington video it shows you exactly how to set this up technically I'm not going to bore you with this but the beauty I want to show you is the separation of concerns you remember in the original API route the first implementation that I showed you we have three steps the auth the database call and the optimizations well the auth we abstract that away currently we would have to do this step in every API Rod every time we would have to validate the user with trpc we abstract this into one middleware that we can always reuse so the actual business logic we are executing does not rely on the authentication and instead is only step two and three from before as you can see this soon tax is just a bit different right this is the same as an API Rod but instead of the whole dance with new response json.stringify we can literally just return this and the type that is automatically inferred from this is then passed back to the client what you just saw now this in itself is not Nexia specific nor is it new that's just how trpc works but it didn't work in the app router which I find really cool and do you remember when I said this is just a regular API route well because of the adapter we use for 40 RPC under the hood a fetch adapter let's get rid of GitHub copilot this means we can also export const runtime and make this API be served from the Versa Edge which is faster reduces cold starts and is closer to your users now this Edge only works because I use drizzle as my database you don't see it here because it's abstracted away but the database is actually a drizzle or M database with Prisma this unfortunately doesn't work that is why I really like drizzle if you want to get more into that I've done some videos on that in the past and this is how it works hey I really hope you enjoyed this video yes the setup for trpc is very tedious it was also one of the reasons I moved away one it couldn't do the things I wanted to do that was obviously the main reason but also the setup is a bit tedious you need like five or six files across your entire app and it's kind it just kind of sucks to be honest but you do it once and then you kind of forget about it right you don't need to worry about the setup anymore after that and then you can just focus on the business logic what we're all here to write the API endpoints and the beautiful thing is you're not limited to either or you can't just use grpc or the API rods you can use both at the same time which I think is really beautiful let me know what you think about trpc in Nexus 13 I would really like to know in the comments down below and then I'll see you in the next video have a good one and bye bye

Channel: Josh tried coding

Views: 24,506

Keywords: trpc, nextjs, react, next js, nextjs 13 trpc, app router trpc, trpc nextjs 13, josh tried coding, joshtriedcoding

Id: hp-z01yAaRU

Length: 6min 35sec (395 seconds)

Published: Thu Aug 24 2023