I Almost Stopped Using My Favorite Library Because Of This...
ฝัง
- เผยแพร่เมื่อ 22 ก.ย. 2024
- TH-cam CORRUPTED MY FIRST UPLOAD SO PLS LIKE AND SHARE THIS ONE SO THE ALGO DOESN'T KILL IT ❤️
So thankful tRPC is more accessible than ever before. Everyone deserves DX this good. HUGE shoutout to the create-t3-app team for leveling up the developer experience even further
create.t3.gg
github.com/t3-...
#t3stack #fullstack #webdevelopment
ALL MY VIDEOS ARE POSTED EARLY ON PATREON / t3dotgg
Everything else (Twitch, Twitter, Discord & my blog): t3.gg/links
![[Full] 4 ต่อ 4 Celebrity EP.910 | 22 ก.ย. 67 | one31](http://i.ytimg.com/vi/4TR3MVpOiw8/mqdefault.jpg)
THE FIRST UPLOAD WAS CORRUPTED IDK WHAT HAPPENED, IT'S KILLING THE ALGO PLACEMENT SO PLS SHARE THIS VIDEO
ENGAGEMENT
Bump
The new syntax seems great - one of the main reasons for me to not use T3 was the idea of all these files, what are they doing, how do I work with this, but having comments like "YOU PROBABLY DON'T WANT TO EDIT THIS FILE" helps a lot to understand that it is just some files that makes the thing work, and abstracting some cryptic syntax behind "import api from api" is a really neat thing, making the DX better.
I was weirdly annoyed when I first saw the folder changes.
But, after I got over my initial, irrational fear of change, it was pretty clear to see how the new folder structure helped explain the way everything works.
I really love all the comments. Super approachable for new people. Great work, y'all!
The moment you imported data from new function i was like WOW it can be THAT easy and type-safe? Definitely, now I'm going to try t3-app with trpc. I previously bootstrapped a t3 project, but it seemed messy due to the many new technologies I wasn't familiar with. Since then, I've tried Prisma and Next Auth, and they are pretty incredible. I hope I will love trpc too.
Try TypeORM, you’ll find it much more flexible than Prisma
@@Disorrder except for the millions of unsolved issues
@@Disorrder For my project Prisma worked really well and I felt good DX. It had some troubles with migrating on supabase but both of them quickly updated documentation on how to fix this
This was EXACTLY my experience. Had to dive in and use it and troubleshoot to understand what all the files did. Still haven't fully wrapped my head around it though, will probably take me a while. But using it has been amazing!
So about folder structure organisation
Have you heard or maybe even tried Feature Sliced approach? It's really great
Coudln't this be made it like a monorepo using npm workspaces so that we could use it to make more complex projects with independent packages for backend/frontend?
I really think this would make it more suitble for real life large projects, where these technologies would really be useful, not small projects where this extra complexity is more of a burden than anything.
I looked at trpc for some weeks now and yes, it looked very intimidating and it was pretty difficult to wrap your head around it at first glance. My first try was to rewrite my ongoing learning project (based on NextJS and MongoDB) into trpc, but... it was nightmare. Writing the code for trpc manually from zero was not a pleasant thing to do. I gave up this approach a few days ago and chose another one: install a fresh t3-create-app and copy stuff over from my existing project. That was a blast! Much more approachable. I'm still not finished though, but I got comfortably familiar with the higher level use cases (hooks etc) and learned Prisma on the fly, huge bonus. What is finished so far works like a charm. I ran into much fewer bugs thanks to the frontend backend typescript connection. I still couldn't write trpc from scratch, but I already looked at the comments and I'm more confident that when I need to write it from scratch at one point, I will be able to learn it much better. Thanks for providing the new t3-create-app experience!
I haven't used trpc yet. I haven't had an API heavy project to justify using it but I am very excited to do it. The autocompletions feel like magic
I think it would be awesome to add monorepo support to this, ( I know t3 turbo exists, that is the one I used ), since there is some mental burden in the decision making when deciding between create-t3 or t3-turbo.
I migrated my t3 project to the new t3 version. Feels pretty nice, previous one wasn't so bad but this is definitely an improvement. Funny thing is, Thanks to Next I don't deal with dependency updates on my own, and now thanks to t3 I don't (most of the time) have to handle my next project dependencies much. Join the Discord server, me and many others help each other there a lot. Not gonna lie, it feels like a we are huge dev team working in the same company, because all of us go out our way to answer questions on questions tab and solve problem on other chat rooms, it's admirable.
This is the first time I’ve seen an app with tRPC that had a folder layout that made this much sense.
Great video. So excited to use this in my next side project!
It happens also with TanStack Router and TanStack Tables. Those are powerful tools but when it comes to ease of use and learn, they fail on excess of complexity.
Is there a timeline for upgrading to the new app directory in Next.js 13?
I really like that approach. It makes it a lot more "approachable" for people who do not know what trpc is. I also like to include the word "hook" on it just to remind myself that it is a react hook rather than an API call, as you can also use direct api calls (without react query). Major thumbs up to the code change and to this awesome video!
Thanks for the fast update!
Doing my best 😅 thanks for watching the updated one asap!
I just saw create t3 app for the first time last week. CT3A is how I learned about tRPC. It took very little time to start using it productively. Having things laid out well, a simple example, and lots of comments made a big difference.
The clearer structure helps me understand tRPC.
Oh man did I need this tutorial. tRPC wasn't making total sense to me. This helped a lot. More detailed tutorials on T3 app guts would be awesome.
Thanks for the tip about restarting the typescript server. I’ve noticed when typescript stops working and have just restarted vs code in the past. This should help avoid having to do that!🎉
I didn't find tRPC to be that hard to learn. To me it was super straight forward from the get go.
The cuts on this video are buttery smooth 🔥
I was gonna look into making changes like this, I'll use your proposal as reference when I start using tRPC in my existing project :)
Thank you for all your efforts in making T3 and your videos! moving to T3 stack!
I feel so fkn good being the Portuguese maintener of the docs, incredible work of you guys, appreciate that.
Definitely a welcomed change!
Thank god, tRPC was the most confusing part of the T3 stack unsurprisingly. I’ve been stuck on that until this video. Thank you!
When I started to use trpc after Nest.js, I was confusing how to scale my project, how to write more routers than just one example. In Nest I have controllers which are my url methods for REST API and services which are business logic. Usually 1 controller method calls 1 service method. But service can depend on multiple other services. That’s why Nest have Dependency Injection. It’s clean and simple structure.
But in tRPC I didn’t find good recipes for it. Should I use trpc router as controller and singleton for service? Or I should create some composable function for service? Or call procedures inside procedure? Or something else?
You can do whatever you want. If you come from Nest.js, .NET Core or Spring you can think of it as router = controller, procedure = controller method.
Personally I group by concerns. For example I could make a feedbackRouter and sendFeedback procedure or I can just put the procedure into the userRouter because it is a concern of the user and I don't have to think about pretty/logical URL paths. The good thing is that refactoring is much easier in case you wanna change things.
Same here, I can't get my head around it no matter how many of these videos I watch. Also how do you scale it?
@@TheWalrus_45 What do you mean how to do you scale it? From a code architecture/organization standpoint or from an infrastructure standpoint (deploying more instances etc.)?
@@rand0mtv660 infrastructure pov, like can you use nginx or another load balancer?
@@TheWalrus_45 Hmm ok I'm not really familiar with that since I never required it, but I'm guessing any tutorial talking about how to scale Next.js API routes should be appropriate. tRPC here is just using Next.js API routes so you should be looking into how to scale those. This shouldn't be really tied to tRPC as far as I know.
Love the honesty!
Do we need to get Anders and Alex on why we have to restart TS Server? I know there was perf convos earlier and the new tRPC made huge improvements there, but it isn't just tRPC I've had to do that exact same restart flow.. 👀
just got a notification from youtube for this upload, might be saved by the algo after all?
This update felt very good to use. Good stuff!
We're definitely gonna use t3app as base template for our React course next semester :) It's long overdue to throw CRA out and show something fresh.
At my college peak web tech is jquery, php, laravel....
This is amazing, I'll adopt this in my project. I'm using SvelteKit-trpc so I don't even need the weird [trpc] file which makes this even better.
The only question I really have is that when I used .query({ ctx }) it finds the context (ctx), but not when using mutation. My workaround for this was just instantiating a new Prisma client, but I know that's wrong
Nice update. Still feel like trpc has more boilerplate than I'd like, but the benefits are amazing.
Assume that I want to expose my application using multiple front-ends (web, mobile, cli, etc.) Is there a way to extract type-safe API definitions using tRPC from a separate back-end repository? I'd rather not clutter a single repository with multiple tech-stacks.
Ctrl shift p for the windows users .. - there's also Linux Theo!
Joking aside, great to see that the t3 team cares so much about these kind of things.
The only thing I'm not sure about with trpc is the design to dev workflow. Typically we do design and then frontend dev with backend trailing which helps as things are mostly ironed out by then. We will have to shift it to where the back end comes before the front end to get that type completion benefit potentially. I like the ts enforcement so it's probably worth adapting the process in some way. What does your guys process look like with trpc incorporated?
You’re missing the benefit of tRPC. If the frontend devs aren’t writing their own procedures, don’t use it.
Thank you.
can you please tell us about zodios, ts-rest and trpc a comparison?
Beginner questions, will we need tRPC when react server components and the new react use() hook is released?
My only struggle with trpc is when websockets and subscriptions are involved. I have had to hack my way around a couple of things there. An example using sockets would be great.
lol, I've watched and followin your contents for like a year now. Funny thing is... I forgot to subscribe... wtf lol, sorry, subed now :) thank you btw
Dunno if I am doing something wrong but what I dislike about tRPC is that it requires to share the type of the router wherever you need to create a client. That is requiring me to add a rootDir for every service I want to create a client for in my client app configuration. That takes advantage of the mono repo but makes me a bit uncomfortable.
hi Theo. do you have any thoughts on content management systems or more generally on interfaces designed to manage a product within a company?
Actually I recall you setting up trpc in your first Pokemon video. I was like WTF....
Love it. 👍
This is making it the 3rd time in which the server router folder structure has been changed
Hope this stays for long before been changed again
I really wanted to watch the corrupted version.
idk if this also works for vscode, but usually saving again fixes some errors from lsp's as it reloads them. at least for helix you can see the lsp is loading again, and in vim too.
Fr, my 1st experience with Trpc is "is this Redux for API?" cuz there are so many boilerplate to keep track of.
Btw i create a T3 app 1 months ago (2 Dec last year):
"ct3aMetadata": {
"initVersion": "6.11.0"
},
How up to date is this version compare to latest?
that intro is what I say when learning anything😂😂
I've seen a few people using CT3A and instead of restarting the typescript server, they'll reboot VS code lol
The main problem with T3 app tgat its hell to upgrade to the more new T3 App version.
So, I almost gave up learning NestJS due to its syntax and DI etc, I think T3 is made for people like me, for a full stack infrastructure. Thanks everyone for the hard work. I was a nice clickbait title though 😂😂
How do I update my old t3 app to be in line with the most recent changes?
ngl this makes a lot of sense. thanks for the proposal theo
I'm about to abandon trpc because I can't for the life of me figure out how to get dependent queries (a query that loads data and then used that data to make additional API calls) to work. React's idiotic architecture of not allowing conditional `useQuery` makes it so that I have to pass null into my trpc queries and return either the actual response or a null result. This completely infects type safety down the road and halfway defeats the purpose of having type safety. Might as well be Golang if I am going to have to add a gazillion `if err != nil` like expressions in my code just to work around this issue. And I also have to make my schema have optional fields when they really are supposed to be required just to work around this. Anyone figured this out in trpc?
Can you make a query do two things? You shouldn’t need dependent queries in a BFF architecture like tRPC
@@t3dotgg It's something I can look into but it's not ideal. In my app I have "events" and for each event there are multiple tabs (each one loading its own data but dependent on the original event.id). I'm thinking of changing it up so that only 1 query exists per component and I don't even render the sub components until the event query is finished. Performing 2 queries all the time would have unnecessary redundant API calls when I already have the data in the frontend.
It’ll be a lot easier to pull the api out as it’s own package in a monorepo if you need to in the future…
Julius is the MVP.
How is scalability and testability with T3 stack?
If I build a next app with trpc and then we decide we want to consume the endpoints separately from let’s say a flutter app, is that easily done?
an alias for api would be great, because the import in nested routes are annoying
You know whats even worse... when you get the t3 stack and then nothing aligns anymore because they made architecture changes but no one at trpc or at t3 updated their docs :)
Can I use it with Nextjs and SSR easily?
is there downside to use create t3 app? like using create react app
when blazor/razor pages can do backend and frontend in just one file with strong types, you realize trpc is probably headed in the wrong direction with all its proprietary looking syntax or probably it has a long way to go. most likely the former.
Ewww
:pepedance:
I defo subbed before wth TH-cam
I love how every version of trpc introduces an even steeper learning curve and every video about it is like "if you just get over that, it's best thing ever". Will this thing ever mature beyond side-project material?!
Theo could you please stop with these clickbaity titles
Clickbaity much?
I looked at it for nuxt but then I saw that nuxt already does this with their $fetch function