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 product ID's in my s3 bucket to pull back a list of keys, and then from there changing them into signable URL's, updating the original product array and passing it back to my application.
getAll: publicProcedure.query(async ({ ctx }) => {
const products = await ctx.prisma.product.findMany({
where: { live: true }
});
const updated = getImages(products);
return updated;
}),
});
function getImages(products: Product[]) {
let newArray: Product[] = new Array();
for (const product of products) {
const imageKeyArray = api.aws.getAllImagesByProductId.useQuery({ productId: product.productId })
const testArray = imageKeyArray.data;
if (testArray) {
const imageUrlArray = api.aws.getImageObjectArray.useQuery({ urls: testArray })
const i = imageUrlArray.data;
if (i) {
newArray.push({
...product,
imageUrl: i
})
}
// return imageUrlArray;
}
}
return newArray;
}
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
❌ tRPC failed on products.getAll: Cannot read properties of null (reading 'useContext')
Commenting out the 'const updated' line where it calls the getImages function, fixes the issue. Apologies for my naivety, I'm relatively new to typescript/nextjs