Handling undefined errors on TRPC dependent queries
Really loving TRPC and relying more and more on the Tanstack to learn a bit more. In my app, largely a very simple modification of the base from TRPC, I would like to fetch some data and pass this to a second dependent query.
I believe this is achieved as follows:
const { data: product } = api.product.getUnique.useQuery({ id: pid });
const options = api.option.getAll.useQuery(
{
product: product.productSize,
region: product.productRegion,
},
{ enabled: !!product }
);
However, as much as I try, I continue to get ‘product could be undefined’ type errors in the input pass in the options query for both product and region.
What is the correct way to use enabled to wait on the output of one TRPC call to avoid this?
3 Replies
You're using the enabled property correctly, the thing is typescript does not know about it on the params level. You have to use product!.productSize
That seems like a nice idea for a ts improvement for react query... 🤔
Unknown User•17mo ago
Message Not Public
Sign In & Join Server To View
Thanks! That’s super helpful and exactly what I was after. Solves my error for now but will take a look at the video - agree it didn’t make sense conceptually why I had to do two calls.