Nested TRPC Calls
Hi, would anyone be able to assist please? Hope it's ok to post stack overflow link, just figured code would format better. I'm trying to call a TRPC method within another, but get invalid hook call. Essentially trying to modify returned products with s3 image url's being returning back to the component. https://stackoverflow.com/questions/76232392/nextjs-trpc-invalid-hook-call-nested
Stack Overflow
NextJS TRPC Invalid Hook Call (Nested)
I've got nested TRPC calls, and when I do this, it throws 'Invalid hook call' in the console of the server. The end goal is, I'm pulling product info from a database, and then looking up the produc...
Solution:Jump to solution
useQuery and useMutation are hooks so you can only call them from within React components, and only unconditionally (ie no if statements etc before them)
6 Replies
Solution
useQuery and useMutation are hooks so you can only call them from within React components, and only unconditionally (ie no if statements etc before them)
regarding your situation, there's a couple of things you can do
most likely you should just extract the
getAllImagesByProductId procedure into a normal function so that you can just call it without having to worry about tRPC
alternatively you could use callers or serverside helpers (see trpc docs for these), but i would generally not recommend this as it adds complexityChristopher Ehrlich
YouTube
Advanced tRPC - Callers, functions, and gSSP
🚨 createSSGHelpers has been renamed to createServerSideHelpers 🚨
Repo for this video: https://github.com/c-ehrlich/you-dont-need-callers
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 simi...Thanks so much for your reply. You say it would add complexity, but my only concern would be - I put it in TRPC to begin with so anything to do with S3 etc doesn't get exposed to the client, including private access keys etc. Is this still fine?
If you’re not importing a function on the client then it’s not in the client bundle
Ohhhh sorry yes, I see what you're saying now
Take the code from within getAllImagesByProductId and getImageObjectArray, and just run it inside the getImages function for example
Sometimes its the most obvious answer that's the hardest to see...