Nishil Faldu•9mo ago

Lost Typings on the client side (Next + Convex Project)

All of a sudden I lost types or typesafety on the client side. Everything appears to be any, may it be something returned by a convex query or arguments you want to pass to a convex mutation/query. Any idea why this is happening?

10 Replies

erquhart•9mo ago

All types are working in your convex functions? eg backend

Nishil FalduOP•9mo ago

All types work on the backend except this one here which handles stripe action

erquhart•9mo ago

Can you share the return statement for storeStripeCustomerId() This is usually due to returning a convex function return value from another convex function, circular dependency of types

Nishil FalduOP•9mo ago

export const storeStripeCustomerId = action({
  args: {},
  handler: async ctx => {
    const stripe = new Stripe(
      process.env.STRIPE_SECRET_KEY! ?? "",
      {
        apiVersion: "2023-10-16",
        typescript: true,
      }
    );

    const user = await ctx.runQuery(internal.users.getUserInternalQuery);
    if (!user) {
      throw new Error("User not found");
    }

    if(!user.stripeId) {
      const customer = await stripe.customers.create({
        email: user.email,
        name: user.firstName + " " + user.lastName,
      });

      const stripeId : string
       = await ctx.runMutation(internal.users.storeStripeId, { userId: user._id, stripeId: customer.id });

      return stripeId;
    }

    return user.stripeId;
  },
});

export const storeStripeCustomerId = action({
  args: {},
  handler: async ctx => {
    const stripe = new Stripe(
      process.env.STRIPE_SECRET_KEY! ?? "",
      {
        apiVersion: "2023-10-16",
        typescript: true,
      }
    );

    const user = await ctx.runQuery(internal.users.getUserInternalQuery);
    if (!user) {
      throw new Error("User not found");
    }

    if(!user.stripeId) {
      const customer = await stripe.customers.create({
        email: user.email,
        name: user.firstName + " " + user.lastName,
      });

      const stripeId : string
       = await ctx.runMutation(internal.users.storeStripeId, { userId: user._id, stripeId: customer.id });

      return stripeId;
    }

    return user.stripeId;
  },
});

here's the whole thing boss

erquhart•9mo ago

Yeah it's circular type inference Here's a super helpful illustration: https://discord.com/channels/1019350475847499849/1202973619970375710/1203111559002333234

erquhart•9mo ago

And here are the docs on how to address: https://docs.convex.dev/functions/actions#dealing-with-circular-type-inference

Actions | Convex Developer Hub

Actions can call third party services to do things such as processing a payment

erquhart•9mo ago

(Expand the blue box that this scrolls to)

Nishil FalduOP•9mo ago

And I am assuming such a thing has side effects like losing type safety?

erquhart•9mo ago

If you annotate the type of user.stripeId before returning it it should fix your issue you won't lose type safety, just have to bridge the circular inference gap

const userStripeId: string = user.stripeId
return userStripeId

const userStripeId: string = user.stripeId
return userStripeId

That will fix the stripe function and I'm assuming it will fix your client issues as well

Nishil FalduOP•9mo ago

It kept flickering after that change, like sometimes it would show the error, sometimes it wouldn't so I explicitly set types for all action-handlers. Thank you so much for your help! I really appreciate it!

Lost Typings on the client side (Next + Convex Project)

Did you find this page helpful?