If you want to check how it looks on real project, here is the repository of the Orcish AI Next.js Framework: github.com/TheOrcDev/orcish-ai-nextjs-framework While you're there hit one ⭐
You're welcome! `withTRPC` is deprecated for app directory, you can simply use the provider from this tutorial. Just wrap everything with the provider and it's going to work inside each page / component. It's this provider here: ua-cam.com/video/P_q9XcbtucM/v-deo.html
@@orcdev oh i see. thanks for the info, they should have mentioned in the docs that it's deprecated app directory or maybe it was their i didnt see it.
This is a good video, the showcase is simple and straight to the point. However I think it lacks on a better explanation on how things work. The entire setup that you show was the exact same as in Jack Herrington's video, but with the difference that you didn't enable tRPC with server side rendering. Also around minute 14:40 all of a sudden you turned the Home component to a client component, and for someone who is relatively new on how Next works will see this and will not stop scratching their heads trying to figure out why did you use the "use client" directive (for those who don't know, it's because tRPC uses React Query behind the scenes, and when querying or mutating data, this is being handled by hooks, which are only used inside client components). I watched this video with the purpose to see how could ssr be enabled with tRPC without the createCaller function, because it is now deprecated. If you happen to know another alternative I would be really thankful (and I guess many other would be as well)
Thanks for such a great comment! You're right, I missed to explain why is "use client" being used from the first place. I'll make another video to explain that in detail. About the createCaller deprecated method they have experimental tRPC actions, but never tried it myself :D Check it out, it can be helpful: trpc.io/blog/trpc-actions
Thank you, this is a great tutorial! If you deploy the app to a server, like vercel, the prisma's file(dev.db) is also updating while we entering inputs? and we can manipulate data from there?
Thank you very much! I'm glad it was helpful to you! ⚔ Yes! That's the power of Prisma, your db file is going to be store locally there on Vercel server, and you're going to have your production db there. Thinking now about running the Prisma studio on Vercel, not sure if there is an option to have it running there, so you can see the data in the studio. Gotta check that out :D There are also other ways to see your data, so don't worry about that.
If you get "Error: No response is returned from route handler .....api\trpc\[trpc] oute.ts'. Ensure you return a `Response` or a `NextResponse` in all branches of your handler." you need to add "return" in front of "fetchRequestHandler" inside "api/trpc/[trpc]/route.ts"
This one is working for me: import { fetchRequestHandler } from "@trpc/server/adapters/fetch"; import { appRouter } from "@/server"; const handler = (req: Request) => fetchRequestHandler({ endpoint: "/api/trpc", req, router: appRouter, createContext: () => ({}), }); export { handler as GET, handler as POST };
even though i totally understand how good is trpc + react query combination, i dont understand using app directory here.. if you are using next app directory you want to go forms, server actions, server components.. and then you dont need TRPC anymore, you already have it with server actions setting 'use client' on page level is kinda kills the whole idea of nextjs app router if you want to do this then please use vite + react
I would say it's just a faster way to get type checked api endpoints, and caching with react-query in one dependency. Of course we could build exactly the same thing ourselves using server actions and components. You are right for the "use client;" and app router. I should've created a separated client component, and import it inside the server component for better understanding. We can still keep SSR with tRPC trpc.io/docs/client/nextjs/ssr
I'm following your tutorial up to the part on the 'first test,' and I encountered this error: 'Unhandled Runtime Error: Error: Cannot read properties of undefined (reading '_context').
@@minhhieple6483 Maybe I added "use client" while I was not filming :) It's definitely error connected to that. You can also check in this repository all tRPC files github.com/TheOrcDev/spellbook if that's easier for you
You just have to put "use context" on top of your component where you are calling your trpc api route. Somehow I missed that in the tutorial, sorry :D If it's easier for you, you can check all files here: github.com/TheOrcDev/orcish-fullstack-admin
If you want to check how it looks on real project, here is the repository of the Orcish AI Next.js Framework: github.com/TheOrcDev/orcish-ai-nextjs-framework While you're there hit one ⭐
Exactly what I needed: Fast, On point, and very clear explanation. Thank you so much Uros
You're welcome! I'm really glad I helped! ⚔️
great explanation on T3 stack
Glad you liked it! Thank you!
Finally someone created great tutorial for these tech stack 🤩
Awesome to hear you liked the tutorial! I love this tech stack!
your delivery so funny bro, loved it
😂 thank you!
Greetings and thank you very much for that contribution
Hello there! Thank you for your support!
i like the way you explain. you write almost same as trpc docs. make me more understand
That's awesome to hear! Thank you very much!
great video SIR.
Thank you! Glad you liked it!
Correction:
0:44 it is not sources directory rather pages router.
Hi there! Yes! 😅 Meant on pages dir. Thanks for the correction!
@@orcdev Yes actually I got it it sometimes happens @ slip of tongue. But I pointed it out for those who don't really know it.
@@orcdev BTW it is an awesome video I am still watching it.🤍
@@dev-akeel Thanks for catching that and helping out!
awesome video as always
Your support means a lot, thank you for always tuning in!
awesome video
Thank you! I'm glad it was useful to you!
Thanks for the tutorial! Btw one problem in the docs, withTRPC HOC method with pages directory is used how can I implement it in app directory ?
You're welcome!
`withTRPC` is deprecated for app directory, you can simply use the provider from this tutorial. Just wrap everything with the provider and it's going to work inside each page / component.
It's this provider here: ua-cam.com/video/P_q9XcbtucM/v-deo.html
@@orcdev oh i see. thanks for the info, they should have mentioned in the docs that it's deprecated app directory or maybe it was their i didnt see it.
@@HarshSingh-gk5tg Maybe they said it somewhere in the docs, not sure. You're welcome!
This is a good video, the showcase is simple and straight to the point. However I think it lacks on a better explanation on how things work. The entire setup that you show was the exact same as in Jack Herrington's video, but with the difference that you didn't enable tRPC with server side rendering. Also around minute 14:40 all of a sudden you turned the Home component to a client component, and for someone who is relatively new on how Next works will see this and will not stop scratching their heads trying to figure out why did you use the "use client" directive (for those who don't know, it's because tRPC uses React Query behind the scenes, and when querying or mutating data, this is being handled by hooks, which are only used inside client components).
I watched this video with the purpose to see how could ssr be enabled with tRPC without the createCaller function, because it is now deprecated. If you happen to know another alternative I would be really thankful (and I guess many other would be as well)
Thanks for such a great comment!
You're right, I missed to explain why is "use client" being used from the first place. I'll make another video to explain that in detail.
About the createCaller deprecated method they have experimental tRPC actions, but never tried it myself :D
Check it out, it can be helpful:
trpc.io/blog/trpc-actions
Thank you, this is a great tutorial! If you deploy the app to a server, like vercel, the prisma's file(dev.db) is also updating while we entering inputs? and we can manipulate data from there?
Thank you very much! I'm glad it was helpful to you! ⚔
Yes! That's the power of Prisma, your db file is going to be store locally there on Vercel server, and you're going to have your production db there.
Thinking now about running the Prisma studio on Vercel, not sure if there is an option to have it running there, so you can see the data in the studio. Gotta check that out :D There are also other ways to see your data, so don't worry about that.
@@orcdev I am used to MongoDB, after seeing your tutorial, prisma and tRPC looks much easier. Thanks again🙂
thanks for sharing
You're welcome!
thank you
You're welcome!
If you get "Error: No response is returned from route handler .....api\trpc\[trpc]
oute.ts'. Ensure you return a `Response` or a `NextResponse` in all branches of your handler." you need to add "return" in front of "fetchRequestHandler" inside "api/trpc/[trpc]/route.ts"
This one is working for me:
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter } from "@/server";
const handler = (req: Request) =>
fetchRequestHandler({
endpoint: "/api/trpc",
req,
router: appRouter,
createContext: () => ({}),
});
export { handler as GET, handler as POST };
even though i totally understand how good is trpc + react query combination, i dont understand using app directory here..
if you are using next app directory you want to go forms, server actions, server components.. and then you dont need TRPC anymore, you already have it with server actions
setting 'use client' on page level is kinda kills the whole idea of nextjs app router
if you want to do this then please use vite + react
I would say it's just a faster way to get type checked api endpoints, and caching with react-query in one dependency.
Of course we could build exactly the same thing ourselves using server actions and components.
You are right for the "use client;" and app router. I should've created a separated client component, and import it inside the server component for better understanding. We can still keep SSR with tRPC trpc.io/docs/client/nextjs/ssr
I'm following your tutorial up to the part on the 'first test,' and I encountered this error: 'Unhandled Runtime Error: Error: Cannot read properties of undefined (reading '_context').
You probably miss “use client”; in the component where you use trpc routes
@@orcdev I got same error, in 14:46, I don't know why you wasn't got error ?
@@minhhieple6483 Maybe I added "use client" while I was not filming :) It's definitely error connected to that.
You can also check in this repository all tRPC files github.com/TheOrcDev/spellbook if that's easier for you
wow
Unfortunately I am getting createContext error 😢
You just have to put "use context" on top of your component where you are calling your trpc api route. Somehow I missed that in the tutorial, sorry :D
If it's easier for you, you can check all files here: github.com/TheOrcDev/orcish-fullstack-admin
Anybody else facing problem with context just put "use client" at the top of Home page