Advanced tRPC - Callers, functions, and gSSP
HTML-код
- Опубликовано: 28 сен 2024
- 🚨 createSSGHelpers has been renamed to createServerSideHelpers 🚨
Repo for this video: github.com/c-e...
If you want to use schema in the frontend, they cannot be imported from the same file as things that run specifically in the backend. One solution would be to put them into a `procedureName.schema.ts` or similar file.
tRPC:
trpc.io/docs
Create T3 App:
create.t3.gg/
Find me:
/ ccccjjjjeeee
github.com/c-e...
Thanks Chris for explaining all of this. Your video touches on many topics, but lacks timestamps, so I wrote them down:
0:48 - Separate common logic into it's own functions
3:14 - How to structure your project
How to call tRPC procedures from getServerSideProps:
5:05 - createCaller()
5:33 - just call an extracted function (see 0:48)
tRCP calls with dynamic inputs (ex.: from query string):
6:15 - with initialData
7:35 - with createServerSideHelpers + dehydrate (aka createProxySSGHelpers in older versions)
Super helpful! Reading docs and posts is one thing but for those who are new to tRPC and web dev in general, having someone to walk you through the logic and code really helps the understanding. Thank you for making this!
Looking forward to the testing video! I got stuck setting vitest, specifically on integrating env vars.
As soon as I heard that question, I though "omg please don't show people how to do that". But of course, you know better than that. Great video!
Edit: Also, great thumbnail
Waiting for that testing T3/TRPC video!!
Legendary video. Thank you. Please keep creating more stuff like this
You are amazing! Thanks to you, now I can statically generate all the dynamic routes that have fixed content! BTW, I did land on that page at some point! 😂
great video! more trpc stuff please
damn if I knew this video earlier... great explanation thx!
Great videos!
Is it possible to do a DB check in prisma with the middleware, I basically need to check if a user is authed and also DOES exist in the database
yes, trpc middleware runs on the server so you can do all the normal server stuff.
next.js middleware is a different thing and a bit more complicated in terms of what you can and can't do
Great content! ❤
Thank you 🙏
Thanks for making this video, it's super helpful! I did some tests locally, with createServerSideHelpers, it indeed prefetched the data on the client. However, after checking the network requests, I noticed that there's still a request sent to the trpc api route on the backend after the page is loaded on the client, is this expected? Thanks!
Nvm, it turns out that I forgot to set staleTime in useQuery :)
nice!
Niceeee
Why should we use SSG helpers vs SSR=true option in TRPC ?
There are some apps/situations where just enabling `ssr` will get the job done, but:
- ssr: true is a global setting, which you might not want
- there are issues when you use `ssr: true` WITH gSSP (which you might need in order to call other stuff on the server), see the note here: trpc.io/docs/ssr
maybe i'll make a separate video about ssr and ssg strategies in the future.
@@ccccjjjjeeee a video like that would be very much appreciated, I'm trying to optimize my app at work and honestly I'm quite new to both ssr and trpc :)
@@diegocardenas4522 the problem is that inmost cases, you don't need to use ssr in every page.
Yeah look into vitest and test context so probably you could PIT the Logic of creating caller to it and reuse within the tests
yes of course, but you'll want different callers for different tests
The speed of u writing react code makes me wonder why anyone would pay me to do the something similar
That's the magic of video editing 😅
Every second is a piece of gold. That's extremely helpful and imho should be linked in docs. Thx a lot!
This was really helpful. Subscribed
Amazing, thank you so much!
If you needed to include session in the context, would you still use an ssg helper? (Sorry if it’s a dumb question, I’m a beginner)
Yes you can still use it. Whatever you're using to grab the session usually in middleware etc can also be used in gSSP to then pass to the SSG helper. Always remember: gSSP runs on the server, so you have all the same stuff.
Wow, thanks for this!
I didn't understand the question to begin with
great video, crisp delivery densely packed information! love it
This may have been one of the most helpful YT videos I've ever seens. Thanks!
Great video thank you!
Can you please explain how the dehydrate works and the prefetching in more detail? I knew what you mentioned already from the trpc docs.
it uses tanstack/react query's `useHydrate`/`dehydrate` behind the scenes. this page from the tanstack docs explains it better than i ever could: tanstack.com/query/v4/docs/react/reference/hydration
Huge content quality thanks. Im trying to use your organization approach. One file per procedure. The procedure itself, schemas... etc. But Im using those schemas on the client too. Now Im getting the next error " You're trying to use @trpc/server in a non-server environment. This is not supported by default." How do you share the schemas then? Thanks again.
uh oh, there does seem to be an issue currently where importing a zod schema in the frontend from a file that also exports a trpc router can lead to problems. i will open an issue about this. in the meantime i guess stick the schema in a different file :(
@@ccccjjjjeeee Really thanks for your time