CrymeLord
CrymeLord•2mo ago

Type error when using useSuspenseQuery with convexQuery

In a vanilla Tanstack Start / Convex app, I have a query:
export const getUserById = query({
args: {
id: v.id("users"),
},
handler: async (ctx, args) => {
return await ctx.db.get(args.id);
},
});
export const getUserById = query({
args: {
id: v.id("users"),
},
handler: async (ctx, args) => {
return await ctx.db.get(args.id);
},
});
And when I try to use that like this:
function Home() {
const { data } = useSuspenseQuery(
convexQuery(api.users.getUserById, {
id: "some_id_here",
}),
);

console.log(data);

return <div>test</div>;
}
function Home() {
const { data } = useSuspenseQuery(
convexQuery(api.users.getUserById, {
id: "some_id_here",
}),
);

console.log(data);

return <div>test</div>;
}
I get this type error: Type 'typeof skipToken' is not assignable to type 'QueryFunction<any, ["convexQuery", FunctionReference<"query", "public", { id: Id<"users">; }, any, string | undefined>, { id: Id<"users">; }], never>'. Not sure what's going on there 🤷
43 Replies
Convex Bot
Convex Bot•2mo 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!
ballingt
ballingt•2mo ago
@CrymeLord What versions of libraries are you using (@convex-dev/react-query, convex)? I think this was fixed a few versions ago Or is this open source, could you share the code?
CrymeLord
CrymeLordOP•2mo ago
"@convex-dev/react-query": "^0.0.0-alpha.8", "convex": "^1.17.0",
ballingt
ballingt•2mo ago
That's up to date! Thanks for reporting, will try to get a repro. What version of react-query? @tanstack/react-query
CrymeLord
CrymeLordOP•2mo ago
I was just looking at this example, that I think you showcased in one of your talks with Tanner. Here you're taking a string rather than a v.id('table') https://github.com/TanStack/router/blob/main/examples/react/start-convex-trellaux/convex/board.ts#L76
GitHub
router/examples/react/start-convex-trellaux/convex/board.ts at main...
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
CrymeLord
CrymeLordOP•2mo ago
"@tanstack/react-query": "^5.59.20",
ballingt
ballingt•2mo ago
That's on purpose, I'm not using Convex IDs so that they're prettier
CrymeLord
CrymeLordOP•2mo ago
Ah gotcha! I was thinking of using a workaround like in the example:
const board = await ctx.db
.query('boards')
.withIndex('id', (q) => q.eq('id', boardId))
.unique()
const board = await ctx.db
.query('boards')
.withIndex('id', (q) => q.eq('id', boardId))
.unique()
But surely I should be able to get the ID query working
ballingt
ballingt•2mo ago
Did you look at this in the tanstack/router repo, or degit it? wondering how I should try to repro
CrymeLord
CrymeLordOP•2mo ago
It's basically a fresh project, let me try to provide everything you need
CrymeLord
CrymeLordOP•2mo ago
Before I do, is this helpful at all?
No description
ballingt
ballingt•2mo ago
I'm starting with npx degit tanstack/router/examples/react/start-convex-trellaux/ start-convex-trellaux
CrymeLord
CrymeLordOP•2mo ago
Btw, interestingly, the console output of npm run dev doesn't complain and the app runs just fine, the query also appears to work
ballingt
ballingt•2mo ago
there was a change to the react-query useQuery types a while ago that we had to change skip for that could have happened again
CrymeLord
CrymeLordOP•2mo ago
GitHub
GitHub - wouteralberts/quick-debug-repo
Contribute to wouteralberts/quick-debug-repo development by creating an account on GitHub.
CrymeLord
CrymeLordOP•2mo ago
Curious whether you'll see the same. I'm using Zed btw, in the screenshot ^
ballingt
ballingt•2mo ago
@CrymeLord what package manager do you use? When I npm i I get some complaints (that I think will be fixed i later versions of convex, not positive — but I want to repro what you have)
No description
ballingt
ballingt•2mo ago
or how to you install, do you use npm i --legacy-peer-deps
CrymeLord
CrymeLordOP•2mo ago
Oh sorry, that's probably because of React 19. I used npm i --legacy-peer-deps
ballingt
ballingt•2mo ago
cool I've got this error, will figure it out after lunch
No description
CrymeLord
CrymeLordOP•2mo ago
Sweet! Good luck, meanwhile I'll just continue knowing it's on your radar
ballingt
ballingt•2mo ago
oh interesting, ok I think this is a case of an unhelpful error from an overload
ballingt
ballingt•2mo ago
No description
ballingt
ballingt•2mo ago
this fixes it, the issue is that you're passing a string but expecting an Id but what's annoying is that the error was so confusing because of the overload
ballingt
ballingt•2mo ago
this error should be "hey you're passing in a string as an argument, but an ID is expected"
No description
ballingt
ballingt•2mo ago
but instead you get this mess
CrymeLord
CrymeLordOP•2mo ago
right right! Should I be using some helper fn to turn that id string into an id type?
ballingt
ballingt•2mo ago
Specicially, if you're making up an ID on the client, you should either cast it to an ID, or pass it as a string and then on the server check that it's an ID is your plan to hardcode that ID in your frontend? if so then I'd cast it, e.g. 'asdfasdfasdf' as Id<'users'>
CrymeLord
CrymeLordOP•2mo ago
I was going to ask about that yeah, because it didn't let me query for non-existing IDs
ballingt
ballingt•2mo ago
that's not the common pattern, generally you only use IDs that you received from Convex queries
CrymeLord
CrymeLordOP•2mo ago
For now I'm hardcoding it yeah, planning to add proper auth and sessions later, hopefully when Convex Auth and Tanstack Start work well together (which they may already, it's just not yet documented I think)
ballingt
ballingt•2mo ago
but if you have an ID for example from a query param, then yeah you either send it in as a string (since you'd don't know it's a valid ID yet) and validate it there with ctx.db.normalizeId or you cast it with TypeScript, saying that you promise it's a valid ID
CrymeLord
CrymeLordOP•2mo ago
That all makes sense, and I learned about normalizeId now!
CrymeLord
CrymeLordOP•2mo ago
What you just said about casting or using ctx.db.normalizeId may be a great fit for the docs here: https://docs.convex.dev/database/reading-data/#reading-a-single-document
CrymeLord
CrymeLordOP•2mo ago
Thanks for what feels like premium support! Any word on when Convex Auth + Tanstack Start drops?
CrymeLord
CrymeLordOP•2mo ago
Or maybe I just wasn't looking in the right place, it's documented here
No description
ballingt
ballingt•2mo ago
Thanks, I'll add that — plus I'd really like to fix that error, it was so ugly I didn't bother reading it really besides the "skip" thing we could include the solution here though I'm publishing TanStack Start + Clerk docs today, TanStack Start + Convex Auth is next—except local dev needs some love, which might be more urgent
CrymeLord
CrymeLordOP•2mo ago
Awesome! Yeah I guess it starts with getting people up and running locally
ballingt
ballingt•2mo ago
This is a new flow where you run the Convex backend on your own machine instead of using the cloud, you can try it with npx convex dev --local if you're curious—but it does opt you into some phone-home error reporting while it's in beta.
CrymeLord
CrymeLordOP•2mo ago
I'll give that a try real soon, right now it's time for bed 🥹
ballingt
ballingt•2mo ago
ha hopefully when you wake up it'll be more stable!
CrymeLord
CrymeLordOP•2mo ago
Love what you guys are building, keep up the great work and amazing support!
ballingt
ballingt•2mo ago
GitHub
Ugly type error when string provided but expecting ID · Issue #10 ·...
The overload? conditional type? seems to be making this error message way more opaque than necessary

Did you find this page helpful?