Type Inference Issue with Custom Auth Wrappers
Hi! I'm having some issues with type inference with the custom wrappers. Don't know if its a project structure issue or a custom wrappers issue. When I use the convex r2 component I am getting full typesafety and autocomplete working in the frontend (nextjs) but when I write my own wrapped queries/mutations, I get back the function as
any. I'm using convex-helpers to create custom auth wrappers, but the types aren't being inferred correctly in my Next.js frontend.
Example Simple Custom Wrapper
// In convex/core/auth/index.ts
export const withAuthQuery = customQuery(
query,
customCtx(async (ctx) => {
const identity = await ctx.auth.getUserIdentity();
if (!identity) throw new Error("Not authenticated");
const user = await ctx.db
.query("users")
.withIndex("by_user_id", q => q.eq("userId", identity.subject))
.unique();
if (!user) throw new Error("User not found");
return { user };
}),
);
Example Function Using the Wrapper
// In convex/features/users/public.ts
export const getProfile = withAuthQuery({
args: {},
handler: async (ctx) => {
// ctx.user is available from the wrapper
return ctx.user;
}
});
The Problem
In the Next.js frontend:
// In Next.js - types show as 'any'
import { api } from "@app/convex/_generated/api";
import { useQuery } from "convex/react";
// No type inference - shows as any
const profile = useQuery(api.features.users.public.getProfile);
// ^-- type of getProfile when I hover over it is any instead of the actual user type. Autocomplete works for everything up until the getProfile
The generated _generated/api.js contains:
export const api = anyApi;
Which doesn't preserve type information for custom functions. Question: Is there a way to get proper type inference for functions created with convex-helpers' custom wrappers? The types work fine within the Convex package, but are lost when imported in the frontend.3 Replies
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!
you should be getting it, id just test a normal function first.
I have a habit of always typing the ctx..
you could also return type the handler to see if that gets it to work.
Yeah, even when I try making it work with a normal function and the return type and typing the context, it still comes back as any. The only time it doesn't do this is when I'm using the components. I'm running the code gen, it says convex functions are working, no TypeScript errors. So that's kind of weird.