Bholmesdev
Bholmesdev2d ago

Issue with useSuspenseQuery for queries that accept args

I'm trying out Convex with tanstack-query, and I'm hitting an odd type error while running my .get() function. It seems the output type is incorrect when being passed to useSuspenseQuery, and my application in stuck in a Loading... state if I attempt to run this. I've tried: - Passing an empty object - Passing skip and nothing else - Passing { id: selectedNoteId ?? '' } The type error persists. Interestingly, I don't see a type error for queries that don't accept args, like my list query. That query also runs successfully with suspense Source: https://github.com/bholmesdev/convex-debugging/blob/main/src/App.tsx#L13
GitHub
convex-debugging/src/App.tsx at main · bholmesdev/convex-debugging
Contribute to bholmesdev/convex-debugging development by creating an account on GitHub.
3 Replies
Convex Bot
Convex Bot2d ago
Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!
Bholmesdev
BholmesdevOP2d ago
No description
natedunn
natedunn2d ago
So I believe skip is only available with useQuery which makes sense to me given how useSuspenseQuery works generally in Tanstack query. I've pulled your repo down, just for the sake of testing you'll notice the type error goes away that if you change it to useQuery:
const { data: selectedNote } = useQuery(
convexQuery(api.notes.get, selectedNoteId ? { id: selectedNoteId } : "skip")
);
const { data: selectedNote } = useQuery(
convexQuery(api.notes.get, selectedNoteId ? { id: selectedNoteId } : "skip")
);
And, as you are probably aware, if you don't check if the selectedNoteId is null or not, it gives a type error when you attempt to pass it to notes.get cause it expects Id<'notes'> not Id<'notes'> | null So considering that and how useSuspenseQuery works (expects to return the data), you probably need to conditionally render a component or use a Suspense boundary, instead of trying to conditionally fetch.

Did you find this page helpful?