when to use tRPC vs a nextjs api route

ive really started to appreciate the tRPC-prisma data flow to my frontend, but im coming from a nextjs-not-typescript background. ive been using api routes there forever, and i still see it in the ct3a directory. but when do i use it then?
19 Replies
Pod
Pod•15mo ago
If your backend isn't typescript, you wouldn't want to use trpc Oh, I think I read that wrong 😄
Domcario
Domcario•15mo ago
this would be for a new project im starting for scratch!
Pod
Pod•15mo ago
You should really use it for anything that doesn't need to be accessed by an external service/app You could even use it for that too with trpc-openapi
Domcario
Domcario•15mo ago
so in my mind tRPC is the replacement of nextjs api routes with the benefit of typesafety. is that correct or do i need to reframe it?
Pod
Pod•15mo ago
Essentially yes! And it includes all the nice react query stuff automatically
Domcario
Domcario•15mo ago
yep, its great how its RQ under the hood but i really miss RQ devtools, i dont like having my browser's console bloated with these blue query #xx messages 😦
Unknown User
Unknown User•15mo ago
Message Not Public
Sign In & Join Server To View
Domcario
Domcario•15mo ago
oh that's true, i did see that file and forgot about it!
Pod
Pod•15mo ago
Yes, thanks for pointing that out
Domcario
Domcario•15mo ago
quick q, @Pod if im calling the same trpc api endpoint on one page, say /pages/fileA.tsx and i need to access the same endpoint for the same data on /pages/fileB.tsx, is there a best practice on sharing the data without making an extra/unecessary api call?
Pod
Pod•15mo ago
You could do something like a simple zustand store, or tweak cache settings
Domcario
Domcario•15mo ago
will check out zustand, ty
cje
cje•15mo ago
You can use RQ devtools The data will be cached, so you’re not making an additional api request This is a standard React Query feature
Domcario
Domcario•15mo ago
woah, didnt know that. is there a way to check if the data returned is fresh from my db vs just from cache?
cje
cje•15mo ago
Check if you’re making network requests How RQ behaves depends on staletime and cachetime but just play around with it a bit
Domcario
Domcario•15mo ago
will do, so no need for a zustand store then?
cje
cje•15mo ago
Not for this specific purpose
jingleberry
jingleberry•15mo ago
Webhooks will need their own dedicated api routes still Unless you have specific middleware to differentiate a webhook from a normal trpc call (which is more effort with minimal benefits) I still use zod to validate webhook event payloads tho
Domcario
Domcario•15mo ago
oh yea i see now and that youre the same thread too for whoever comes here: https://github.com/t3-oss/create-t3-app/issues/329 and comment out/remove loggerLink in /utils/api.ts by this https://trpc.io/docs/links/loggerLink
GitHub
feat: add ReactQueryDevtools to the project by default · Issue #329...
Is your feature request related to a problem? Please describe. ReactQueryDevtools is so helpful that I believe this should be a standard in the t3 stack, it's much more common to need it than d...
Logger Link | tRPC
loggerLink is a link that lets you implement a logger for your tRPC client. It allows you to see more clearly what operations are queries, mutations, or subscriptions, their requests, and responses. The link, by default, prints a prettified log to the browser's console. However, you can customize the logging behavior and the way it prints to the...