T3: TRPC, Prisma and NextAuth Done Right
Вставка
- Опубліковано 15 лип 2024
- Let's try out TRPC using Theo's T3 application template that also integrates Prisma, NextAuth and Tailwind. And we'll use supabase and daisyui on top of that.
Code: github.com/jherr/notetaker
Try Scribe for free by downloading it here: scribe.how/jackherrington
👉 I'm a host on the React Round-Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
0:00 Introduction
1:00 Notetaker Introduction
1:53 T3 Application Setup
3:28 Supabase Setup
7:00 Github OAuth Setup
9:41 Scribe
15:44 Deploying To Vercel
17:58 Adding DaisyUI
20:13 Adding Tables To The Schema
21:55 Adding TRPC Procedures
25:47 Querying TRPC
27:01 Adding A Header
28:47 Adding Topics To The UI
33:55 Adding Notes TRPC Support
34:49 Adding Notes UI
41:18 Re-Deploying The App To Vercel - Наука та технологія
This is the best implementation of an ad I've seen. Deeply integrated into the content.
Probably the first time I watched an ad instead of skipping it
Completely watched this ad. It was a great, non annoying ad. Great work!!
And best of all, seems like something that adds real value to the video itself
Great introduction and love how well the ad was presented. One small thing to mention though is that even though T3 stack is popularized by Theo, he has actually not created Create T3 App, it's created by the community.
Fair enough, my bad. Thank you community!
You know that has confused me too. I mean it says all over the place it's created by him, and then it says the community elsewhere. I think Theo is not exactly what we'd call shy and self-effacing.
@@ToddDunning I believe the idea is Theo is creator of T3 stack(the idea of using typescript, tailwind, trpcs etc), but not the creator of create-t3-app which is a utility to bootstrap a t3 stack project.
@@Winslow_Tech Sounds like in the future I will need more accurate attribution.
This channel is incredible, you have a great teaching style. Very pleased to have found this channel, it has already been incredibly helpful.
Finally this Stack gets more popular. It is so nice to work with it!
Condensed and so clearly articulated! Wonderful presenting and teaching skills. Thank you for your great work.
This is just incredible. Thanks for sharing Jack
Waiting for more and more amazing professional quality content.
That's really helpful to hear about keyboard shortcuts, tools and plugins along with tutorial.
I've been searching all day long how to quickly get into this t3app, and for me this is the most quick and precise tutorial. Thanks Jack!
I appreciate you showing us how to deploy it as well. I feel like so many tutorials dont show how to deploy.
Great vid and stack I've been working in a personal project for 4 months and this is gold for it. Thanks!!!
Thank you very much! This is the best video to get you started with the t3-stack.
Banger video! Definitely helpful stuff for people who are just starting with T3 stack but also for folks who played with it for a bit
Just starting as a developer and even though I don't get exactly how every tiny bit works under the hood I can appreciate and understand a lot of what was explained. Amazing and super rich content. Thanks again Jack!
Having this type of content for free is really a blessing. Thank you so much! 🚀
Another excellent tutorial, cheers Jack
Great content as always, learnt a lot. Thanks Jack
Hey thanks a lot for this content. I remember doing a project alongside your video and kind of forgot about it. Now I was stuck again with the .query .mutation procedures and I just remembered somewhere in my head about your videos and ta-da... you put me back in track in no time. Thanks, really :)
Thanks Jack...I just learnt about tRPC and was thinking about integrating in next.js...And at that moment your video dropped...Thanks again...
Been looking forwarding to this. Thanks Jack!
Very well explain everything start to end of deployment. Thanks
Thank you Jack, for make a video on tRPC ☺️☺️
this was an extraordinary primer on the combo. thanks!
Scribe ! OMG what a great product and great AD Jack, such a master !
Will be watching this later. I've actually started a generic blog project using the stack. Enjoying it so far. Will see how much I enjoy on something more complex though.
Love your work ! Thanks for the video
Amazing setup Jack.
Jack are you reading my mind?? I was searching tutorial on exact tech stack and this came up!😀😀
Thanks for the tutorial content Jack 😎🖖
Omg this couldnt be more perfect in time! I was actually just posting a stack overflow question because I was not able to refresh the page after mutation, I tried a lot of things yesterday, read a ton of documentation but somehow I couldnt and went to sleep angry lol, I guess I missed the onSucess inside the useMutation hook Idk I thought Id alteady tried it. Thanks!
Just love the tutorials and the effort that you put in to deliver such valuable content Jack . Thanks a lot sir.
Not only did this example make it easy to understand the T3 stack, but it looks stunning with Daisy UI! Enjoyed being able to focus on the functionality more than the styling.
Higly recommending to avoid daisy tho 💀
@@JEsterCW why??
the background scene of your video is beautiful !
Yay!!! So glad to see you cover it!
Just finished watching the video.
Fullstack will never get easier than that!
Very well explained, Thank you very much for this video,❤
This is a very cool lesson! Thanks
really valuable information, thank you jack
T3 video from the legend himself, and he got a sponsor too? Hell yeah
I wish that NestJS supports tRPC officially
The only ad I don't want to skip❤
thank you for showing some love for pnpm
What can I say? 🤔
The most comprehensive tRPC tutorial out there! 🙌🏻 🙏🏻
Thank you so much! 😁
PS Thanks for bringing attention to daisyUI, a life saver for those of us who are a bit behind on the CSS side of things!
An interesting follow-up video might be to convert this app to allow for multiple users, each having access to only their own notes.
Finally a video using a T3 Stack thanks
Overall really great project to start with T3 stack (tRPC under the hood😌) already loving this stack 🤩, thanks for bringing in
Super content. Thank u!
This was 😘👌 Just needed a quick intro to T3 to see if it'll work for my next project, but got a lot of bonus exposure to the likes of DaisyUI, CodeMirror, react-markdown etc.
Thx, the best tutos I must say.
yes! Thank you! This video should be a hit!
best tutorial for old idea but new tech stack. 🤟🤛🤜
Thank you sir!
So many gems in this, thanks Jack!
Love it. The generated typing is really nice. Wild that useState is already “Good ol’ useState 😂”. JS moves so quickly.
Mmm. I never had any idea on TRPC until I saw this quality video. Thanks Jack, thanks a ton
This was great!
I learned a bunch!
Thank you so much for this tutorial. It's not super long. You have no idea how much you helped me, except that the tutorial you don't pause after you input code and that makes it crazy hard to follow it. I had to drop the speed down to 0.25x to catch the code you entered before it went off screen and that still too multiple tries. The instructions aren't 100% complete for Windows, you must put the API keys in the .env folder, and you need to add the correct API keys for the production GitHub OAuth app. Other than that it's nice to have a short tutorial that doesn't combine a bunch of the same stuff that takes so much time and has nothing to do with my app. Everyone's app is different and none of these tutorials have been good for me due to the bloat.
Awesome tutorial 👍🏻👍🏻, also would be great if you could share the terminal theme and autocomplete package you are using 😊.
Ty for making clear some things that not clear in my mind about how data flows UI to DB .
Thank you!
A good channel for non-beginners.
tRPC is amazing. When I saw Theo's video I got motivated to port the entire stack over to svelte lol
The tRPC part was pretty easy to set up, it feels like magic to use lol
You win best sponsor integration! I was all ready to fast forward an off-topic irrelevant product shout out… but this was spot on. Hope you can keep up the sponsor alignment as you continue to grow.
Amazing video, Thank You Jack.👏🏼
in 32:57 instead of creating the Topic type You can inport this like that:
import type { Topic } from "@prisma/client";
True in this case. But if the TRPC layer weren't a straight pass-thru, and instead were doing some type of permutation, then you would not have proper sync between the client and the server. Because the client is talking to the server, and not to prisma directly.
**THE BEST** Tutorial on T3 stack! But sir I struggle with prisma, I think I must see a tutorial on it. Coming from mongoose I think it is overwhelming.
Knew this video was coming!
17:22 missed opportunity to show the new copy-paste env file into Vercel dashbaord
I can't thank you enough!
t3 stack is my new go to
ty
Great video Jack!
I published almost the exact same video last week :P
I also tried out some optimistic UI updates on the tRPC mutation hook if that would be interesting to anyone here.
But definitely finish this video first! 💯
I watched yours first, and it was A+! It was my first intro to optimistic updates and it was great. Thanks!
@@arctiinae Thanks a lot! Glad you enjoyed :)
wow this is cool
its really fun when sometimes I heard your high voice, ex: @40:11 , awesomeeeeeeeee 😝
Welcome to the pnpm gang!
I'm use Arc browser too, it's really cool
I’d love to see a version of create-t3-app using the new server component app folder structure
33:37 VS Code auto imported Topic type for me from prisma client hah
You can copy/paste your environment variables on Vercel now!
damn, arc browser looks so cool🥵🥵
can you make more of these? just started learning t3 stack and its amazing so far, just need to grasp few more concepts regarding trpc
I would like also see more works like that 😊
@+- 25minutes. If your on page top.ts if the .topic is underlined with red showing error, restart your ide.
Or CTRL + SHIFT + P then type: restart TS Server
Not sure why you need to do this, but it works.
Great Tutorial Jack!!! you and Theo B. are just awesome
Can anybody tell me how to make my terminal exactly as the one Jack uses
with the git branches and colors i love it
Great project, very interesting! 🤯
Even if I'm a little disappointed because I can't export my environment variables. 14:43
export GITHUB_CLIENT_ID="YOUR_ID_HERE"
export GITHUB_CLIENT_SECRET="YOUR_SECRET_HERE"
Hello and thank you for this amazing tutorial!
I have a small question the app doing SSR on the pages for the fetched data?
I tried to check the source code on the browser and it does not seem to be rendering the fetched content on the server side.
Is there a simple way of doing this while preserving the react-query cache?
Thanks!!
Great video, Jack. Really helped me get ramped up quickly with a CRUD application in a single day.
One minor question,
Why use RouterOutputs["modelName"]["getAll"][0] against pulling the type directly from '@prisma/client'?
Because what I'm actually doing is calling TRPC, and not Prisma directly, so IMHO I should rely on the TRPC types because the TRPC layer could (but isn't in this case) be doing a little something extra with the Prisma output.
If you have a problem with Unsafe return at 24:39, just restart ESLint server (Ctrl + shift + P => ESLint restart server)
Can you please do a tutorial how to professionally customize terminal to be exactly like that you have?
this type of content is the best, I really enjoy the code walkthroughs. T3 can be a bit confusing when new, especially relating to trpc and nextauth. One thing I did notice different is using refetch instead of .invalidation. Is there a difference between those two approaches for the onSuccess part of your mutations?
Yeah, I probably should have used the invalidation stuff, whoops.
How does the invalidation work? Where can I read about it or see some examples?
@@szluganaware tanstack.com/query/v4/docs/react/guides/query-invalidation It's super nice, basically you can say; when this query succeeds then refetch this other query automagically.
@@jherr Thank you!
Hi Jack and thanks a lot for the great content !
I followed along until adding new topics and refetching them on the page. Although it works great in localhost I get a 401 unauthorized in vercel prod environment when trying to create a topic. Any idea what could be causing the discrepancy in prod ?
Been wanting to try T3 for a while now. How does it compare with Blitz (their Next implementation, since now Blitz is “agnostic”)? On the surface they seem quite similar except for Next Auth. They both use Prisma, and Blitz’s RPC is similar to TRPC with less boilerplate
Hi, Jack! Great video, as always! Thanks. I have a question about Next Js. It is possible to do microfrontends with 13 version?
I mean, something similar to module federation? :)
How easy is that 😊 Really great staff!!!
Hey jack, can you please make a video on how to do role based authentication using next-auth and authorization in nextjs .
I'm pretty new, can you elaborate on which env variables were set when deploying to vercel? you sorta just skipped right through them ty :) I know the database , did you change the next-auth url from localhost etc?
I can feel the difference that is there in the three months since the video released.
19:56 Instead of excluding the whole `tailwind.config.cjs` file, I think you could also just add `// @ts-ignore` on the line above the error?
What setup you using in your vscode terminal? Looking to replicate TIA
This is a super cool and clear tutorial. One thing I noticed when experimenting with this is that there is a significant lag following saving of a topic or note before they display in the list, as it needs to first save and refetch from the database.
There are probably many solutions, but what would be the best approach to displaying a newly added tag in the list before syncing it to the database? Does trpc support optimistic updates?
I guess useQuery has optimistic result. Try to config the request somehow.
Could you please share you configuration for chrome, I like your right tab bar, that’s looking awesome. Also good to see more great extensions. What do you use for creating user friendly diagrams?
It’s Arc browser
Thanks for putting together this video. Wondering if anyone else has hit an eslint error at 24:55?
Unsafe member access .findMany on an `any` value.
Unsafe member access .create on an `any` value.
Just reload VS Code. Should do the trick
Would love to see your approach to testing this - integration testing NextAuth and TRPC, what functionality you think is worth unit testing etc.
26:35 -why do we need to check for enabled: user, if we are querying protectedRoute?