Conditionally run useQuery
Hi, I can't get around this problem so I want to share it with you:
1. I have a component, a shad/cn dialog, which lives on another component.
2. inside this component, I use a "useQuery" to get some data from the DB. I pass as arguments to the "useQuery" function some Component Props (like a user._id)
3. these Component Props are defined only when the dialog is opened, so the first problem I had to solve was to make the "useQuery" function not execute until the dialog modal is opened, otherwise I would get an error.
4. now, when I click to open the dialog modal, I get this error (see screenshot) which I don't know how to solve. Any guidance?
4 Replies
Could you paste more of the code? I can't read the rest of line 93.
It looks like you're trying to use
extractionModel.isOpen etc. to run the useQuery hook conditionally. This doesn't work in React, you'll have to use skip instead.
But I can't tell because from this imageSure, here's the rest of the code from the image
92 | );
93 | const documentDataExtraction = extractionModal.isOpen && automation_id && document_data_extraction_id ? useQuery(
> 94 | api.document_data_extraction.getDocumentDataExtraction,
| ^
95 | {
96 | automation_id,
97 | document_data_extraction_id,Yep it looks like you're trying to conditionally run a hook, see https://docs.convex.dev/client/react#skipping-queries
thanks, didn't look enough to find it in the documentation!