SG.dev Posts - Convex Community

SG.dev

•Created by SG.dev on 10/18/2024 in #support-community

Issue with Canceling a Scheduled Task – How to Retrieve and Pass Task ID to Frontend

I'm trying to implement a feature where users can schedule a deletion task and cancel it from the frontend, but I'm getting TS errors trying to return the taskId from a mutation:

export const scheduledDelete = mutation({
  args: { id: v.id("thing") },
  handler: async (ctx, args) => {
    const userId = await getUserId(ctx);
    const thing = await ctx.db.get(args.id);

    if (!thing) throw new Error(`Dream with ID ${args.id} not found.`);
    if (userId !== thing.userId) throw new Error("Unauthorized access.");

    const taskId = await ctx.scheduler.runAfter(
      10 * 1000,
      internal.mutations.deleteThing,
      { id: thing._id }
    );

    return taskId;
  },
});

export const deleteThing = internalMutation({
  args: { id: v.id("thing") },
  handler: async (ctx, args) => {
    await ctx.db.delete(args.id);
  },
});

export const cancelScheduledDeletion = mutation({
  args: { taskId: v.id("_scheduled_functions") },
  handler: async (ctx, args) => {
    await ctx.scheduler.cancel(args.taskId);
  },
});

export const scheduledDelete = mutation({
  args: { id: v.id("thing") },
  handler: async (ctx, args) => {
    const userId = await getUserId(ctx);
    const thing = await ctx.db.get(args.id);

    if (!thing) throw new Error(`Dream with ID ${args.id} not found.`);
    if (userId !== thing.userId) throw new Error("Unauthorized access.");

    const taskId = await ctx.scheduler.runAfter(
      10 * 1000,
      internal.mutations.deleteThing,
      { id: thing._id }
    );

    return taskId;
  },
});

export const deleteThing = internalMutation({
  args: { id: v.id("thing") },
  handler: async (ctx, args) => {
    await ctx.db.delete(args.id);
  },
});

export const cancelScheduledDeletion = mutation({
  args: { taskId: v.id("_scheduled_functions") },
  handler: async (ctx, args) => {
    await ctx.scheduler.cancel(args.taskId);
  },
});

'scheduledDelete' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
'handler' implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.

'scheduledDelete' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
'handler' implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.

- What is the recommended way to pass the scheduled task ID to the frontend so the user can cancel the task later? - Should the task ID be stored in the database instead, or is there a way to return it safely from the mutation? - Are there any examples or patterns recommended by the Convex team for handling cancelable scheduled tasks from the frontend?

3 replies

CCConvex Community

•Created by SG.dev on 5/4/2024 in #support-community

Resend / Convex: Issue with Deploying JSX in Convex Environment - Unexpected Syntax Error

Can't for the life of me figure out how to resolve this issue. I'm encountering a deployment issue when using JSX within my Convex environment.

✖ Error: Unable to push deployment config to https://<deploymentUrl>
Error fetching POST  https://<deploymentUrl>/api/push_config 400 Bad Request: InvalidModules: Hit an error while pushing:
Loading the pushed modules encountered the following
    error:
Failed to analyze emails.js: Uncaught SyntaxError: Unexpected token '<'

✖ Error: Unable to push deployment config to https://<deploymentUrl>
Error fetching POST  https://<deploymentUrl>/api/push_config 400 Bad Request: InvalidModules: Hit an error while pushing:
Loading the pushed modules encountered the following
    error:
Failed to analyze emails.js: Uncaught SyntaxError: Unexpected token '<'

I've also added : "jsx": "react-jsx" under the compilerOptions in my /convex/tsconfig.json Here is the code:

// emails.tsx

export const sendWelcomeEmail = async ({
  email,
  name,
}: {
  email: string;
  name: string;
}) => {
  const { error } = await resend.emails.send({
    from: "",
    to: email,
    subject: "Welcome",
    react: <WelcomeEmail name={name} />,
  });

  if (error) {
    console.error(error);
    throw new ConvexError({ message: error.message });
  }
};

// emails.tsx

export const sendWelcomeEmail = async ({
  email,
  name,
}: {
  email: string;
  name: string;
}) => {
  const { error } = await resend.emails.send({
    from: "",
    to: email,
    subject: "Welcome",
    react: <WelcomeEmail name={name} />,
  });

  if (error) {
    console.error(error);
    throw new ConvexError({ message: error.message });
  }
};

I've also tried just calling the function like this and get the same error:

react: WelcomeEmail({name})

react: WelcomeEmail({name})

Any insight would be great, thanks guys!

5 replies