Tanstack: How to call a Convex mutation from createServerFn?

I'm lost on how I can use Convex from the serverFn in Tanstack. Here is my attempt

const convex = new ConvexHttpClient(import.meta.env.VITE_CONVEX_URL);

// Define the input schema using Zod
const suggestMilestonesInputSchema = z.object({
  userId: z.string(),
  goal: z.any(), // Allow any type for goal for now
  language: z.string(),
});

export const suggestMilestones = createServerFn({
  method: "POST",
})
  .validator((person: unknown) => {
    return suggestMilestonesInputSchema.parse(person);
  })
  .handler(async (ctx) => {
    // Call mutation inside the handler
    await convex.mutation(api.user.increaseAISuggestions, { userId: userId as Id<"user"> });

  });

const convex = new ConvexHttpClient(import.meta.env.VITE_CONVEX_URL);

// Define the input schema using Zod
const suggestMilestonesInputSchema = z.object({
  userId: z.string(),
  goal: z.any(), // Allow any type for goal for now
  language: z.string(),
});

export const suggestMilestones = createServerFn({
  method: "POST",
})
  .validator((person: unknown) => {
    return suggestMilestonesInputSchema.parse(person);
  })
  .handler(async (ctx) => {
    // Call mutation inside the handler
    await convex.mutation(api.user.increaseAISuggestions, { userId: userId as Id<"user"> });

  });

Here is my mutation

// Update user email
export const updateUserEmail = mutation({
  args: {
    userId: v.id("user"),
    email: v.string(),
  },
  handler: async (ctx, { userId, email }) => {
    await ctx.db.patch(userId, {
      email,
      updatedAt: new Date().toISOString(),
    });

    return { success: true };
  },
});

// Update user email
export const updateUserEmail = mutation({
  args: {
    userId: v.id("user"),
    email: v.string(),
  },
  handler: async (ctx, { userId, email }) => {
    await ctx.db.patch(userId, {
      email,
      updatedAt: new Date().toISOString(),
    });

    return { success: true };
  },
});

if there is any example boilerplate on how to call convex from the createServerFn handler that would be amazing. So I basically want to have some validations on the server side (does the user have enough credits) I can see there is:

import { fetchMutation, fetchQuery } from "convex/nextjs";

import { fetchMutation, fetchQuery } from "convex/nextjs";

but that requires met to set which I cannot do in a Vite project.

Error: Environment variable NEXT_PUBLIC_CONVEX_URL is not set.

Error: Environment variable NEXT_PUBLIC_CONVEX_URL is not set.

3 Replies

Convex Bot•4w 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!

mvols•4w ago

wonder if you need to set the NEXT_PUBLIC_CONVEX_URL within the convex dashboard?

erquhart•3w ago

Two examples of Convex functions in TanStack server functions: https://github.com/get-convex/templates/blob/e87673ee6eee816233c396211771b19a466e3e77/template-tanstack-start-clerk/app/utils/posts.ts#L2 https://github.com/get-convex/templates/blob/e87673ee6eee816233c396211771b19a466e3e77/template-tanstack-start-clerk/app/routes/__root.tsx#L30-L38

GitHub

templates/template-tanstack-start-clerk/app/routes/__root.tsx at e8...

Contribute to get-convex/templates development by creating an account on GitHub.

GitHub

templates/template-tanstack-start-clerk/app/utils/posts.ts at e8767...

Contribute to get-convex/templates development by creating an account on GitHub.

Tanstack: How to call a Convex mutation from createServerFn?

Did you find this page helpful?