Frontend Query Mutation
langflow-ai/langflow
Guide for implementing Langflow frontend query and mutation patterns with Axios and TanStack React Query v5.
Writes Convex queries, mutations, actions, and internal functions in the object form with args and returns validators, correct ctx usage, runtime boundaries, and error handling.
$ npx skills add waynesutton/builder-skills --skill convex-functions -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install waynesutton/builder-skills convex-functions --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/waynesutton/builder-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/convex-functions .claude/skills/convex-functions && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "convex-functions" agent skill from https://github.com/waynesutton/builder-skills/tree/main/skills/convex-functions into .claude/skills/convex-functions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "convex-functions", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/waynesutton/builder-skills/tree/main/skills/convex-functionsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add waynesutton/builder-skills --skill convex-functions -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install waynesutton/builder-skills convex-functions --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/waynesutton/builder-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/convex-functions .agents/skills/convex-functions && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "convex-functions" agent skill from https://github.com/waynesutton/builder-skills/tree/main/skills/convex-functions into .agents/skills/convex-functions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "convex-functions", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add waynesutton/builder-skills --skill convex-functions -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install waynesutton/builder-skills convex-functions --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/waynesutton/builder-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/convex-functions .cursor/skills/convex-functions && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "convex-functions" agent skill from https://github.com/waynesutton/builder-skills/tree/main/skills/convex-functions into .cursor/skills/convex-functions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "convex-functions", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/waynesutton/builder-skills.git --path skills/convex-functions--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add waynesutton/builder-skills --skill convex-functions -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install waynesutton/builder-skills convex-functions --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/waynesutton/builder-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/convex-functions .gemini/skills/convex-functions && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "convex-functions" agent skill from https://github.com/waynesutton/builder-skills/tree/main/skills/convex-functions into .gemini/skills/convex-functions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "convex-functions", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install waynesutton/builder-skills convex-functionsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add waynesutton/builder-skills --skill convex-functions -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/waynesutton/builder-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/convex-functions .github/skills/convex-functions && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "convex-functions" agent skill from https://github.com/waynesutton/builder-skills/tree/main/skills/convex-functions into .github/skills/convex-functions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "convex-functions", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add waynesutton/builder-skills --skill convex-functions -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install waynesutton/builder-skills convex-functions --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/waynesutton/builder-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/convex-functions .opencode/skills/convex-functions && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "convex-functions" agent skill from https://github.com/waynesutton/builder-skills/tree/main/skills/convex-functions into .opencode/skills/convex-functions/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "convex-functions", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
convex-functionsWrites Convex queries, mutations, actions, and internal functions in the object form with args and returns validators, correct ctx usage, runtime boundaries, and error handling.
Convex Functions is an agent skill from waynesutton/builder-skills. Writes Convex queries, mutations, actions, and internal functions in the object form with args and returns validators, correct ctx usage, runtime boundaries, and error handling. Use when adding or changing anything in convex/.ts that exports a function, or when deciding between query, mutation, and action.
Its SKILL.md is about 2.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including assets (for example `agents/openai.yaml`).
The repository describes itself as: Builder skills for Convex apps. Convex patterns plus a PRD, task.md, changelog, and files.md workflow for Claude Code, Codex, Cursor, and OpenCode. The licence is Apache-2.0.
Read from SKILL.md and the folder at commit 82d1ce2. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Links to these hosts (documentation or services it may open):
docs.convex.devFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Convex Functions loads about 2.8k tokens when it runs. Until then it costs about 81 tokens; SKILL.md has 895 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from waynesutton/builder-skills at commit 82d1ce2, republished under its Apache-2.0 licence (© waynesutton). 895 words, ~2,754 tokens.
.claude/skills/convex-functions/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.Every exported function in convex/ uses the object form with args and returns validators. Pick the type by what the handler touches: queries read, mutations write, actions call out.
| Type | Database | External calls | Callable by | Use for |
|---|---|---|---|---|
query | Read | No | Clients, other functions | Reads. Cached and reactive. |
mutation | Read and write | No | Clients, other functions | Writes. One transaction. |
action | Only via runQuery and runMutation | Yes | Clients, scheduler, other actions | fetch, third party SDKs, Node APIs |
internalQuery, internalMutation, internalAction | Same as the public form | Same | Only other Convex functions | Scheduled work, crons, privileged writes |
httpAction | Only via runQuery and runMutation | Yes | HTTP requests in convex/http.ts | Webhooks, REST endpoints |
Default to query or mutation. Reach for an action only when the handler must talk to something outside Convex.
Declare args and returns on every function. A function that returns nothing declares returns: v.null() and returns null. Hoist a shared document validator when several functions return the same shape.
// convex/tasks.ts
import { query, mutation } from "./_generated/server";
import { v } from "convex/values";
const taskValidator = v.object({
_id: v.id("tasks"),
_creationTime: v.number(),
userId: v.id("users"),
title: v.string(),
completed: v.boolean(),
});
export const get = query({
args: { taskId: v.id("tasks") },
returns: v.union(taskValidator, v.null()),
handler: async (ctx, args) => {
return await ctx.db.get(args.taskId);
},
});
export const remove = mutation({
args: { taskId: v.id("tasks") },
returns: v.null(),
handler: async (ctx, args) => {
await ctx.db.delete(args.taskId);
return null;
},
});Use ctx.db.get(id) for one document by id. For everything else use withIndex against an index defined in convex/schema.ts. Never call .filter() on a table query; it scans the whole table.
export const listByUser = query({
args: { userId: v.id("users") },
returns: v.array(taskValidator),
handler: async (ctx, args) => {
return await ctx.db
.query("tasks")
.withIndex("by_user", (q) => q.eq("userId", args.userId))
.order("desc")
.take(50);
},
});Pick the terminal method by how many documents you expect:
| Method | Returns | Use when |
|---|---|---|
.unique() | One doc or null, throws on more than one | The index guarantees at most one match |
.first() | First doc or null | You want the newest or oldest match |
.take(n) | Up to n docs | A bounded list such as a recent feed |
.collect() | Every match | The result set is small and stays small |
.paginate(opts) | A page plus cursor | The table is unbounded |
Paginated queries take paginationOpts: paginationOptsValidator (from convex/server) as an argument.
| Method | What it does |
|---|---|
ctx.db.insert("tasks", doc) | Inserts and returns the new id |
ctx.db.patch(id, fields) | Shallow merges fields. Throws if the doc is missing |
ctx.db.replace(id, doc) | Replaces the whole doc. Throws if missing |
ctx.db.delete(id) | Deletes the doc |
Patch directly when you do not need the old value. Reading first widens the window for write conflicts. Make mutations safe to retry.
export const rename = mutation({
args: { taskId: v.id("tasks"), title: v.string() },
returns: v.null(),
handler: async (ctx, args) => {
await ctx.db.patch(args.taskId, { title: args.title });
return null;
},
});query, mutation, and action are public. Anyone with the deployment URL can call them. Use internalQuery, internalMutation, and internalAction for code that should only run from other Convex code: scheduled jobs, crons, webhook handlers, privileged writes.
Reference functions through the generated objects in ./_generated/api:
api.tasks.get points at a public function in convex/tasks.tsinternal.tasks.markPaid points at an internal function in the same fileconvex/billing/invoices.ts gives api.billing.invoices.listAlways schedule internal.*. Scheduled functions and crons run without a client, so a public reference there skips the auth checks a client call would hit.
// convex/messages.ts
import { mutation, internalMutation } from "./_generated/server";
import { internal } from "./_generated/api";
import { v } from "convex/values";
export const send = mutation({
args: { channelId: v.id("channels"), content: v.string() },
returns: v.id("messages"),
handler: async (ctx, args) => {
const messageId = await ctx.db.insert("messages", args);
await ctx.scheduler.runAfter(0, internal.messages.notifySubscribers, {
channelId: args.channelId,
messageId,
});
return messageId;
},
});
export const notifySubscribers = internalMutation({
args: { channelId: v.id("channels"), messageId: v.id("messages") },
returns: v.null(),
handler: async (ctx, args) => {
const subs = await ctx.db
.query("subscriptions")
.withIndex("by_channel", (q) => q.eq("channelId", args.channelId))
.collect();
await Promise.all(
subs.map((sub) =>
ctx.db.insert("notifications", {
userId: sub.userId,
messageId: args.messageId,
read: false,
}),
),
);
return null;
},
});Actions have no ctx.db. They read through ctx.runQuery and write through ctx.runMutation. Each call is its own transaction, so keep the count low and do related reads and writes inside one mutation.
fetch works in the default runtime. Add "use node"; as the first line of a file only when an action needs Node built ins or a Node only SDK. A "use node" file can export actions only; queries and mutations go in a separate file.
// convex/orders.ts (default runtime)
import { action } from "./_generated/server";
import { internal } from "./_generated/api";
import { v, ConvexError } from "convex/values";
import { Doc } from "./_generated/dataModel";
export const charge = action({
args: { orderId: v.id("orders") },
returns: v.null(),
handler: async (ctx, args) => {
// Same file call: annotate the result so TypeScript does not hit a circular type
const order: Doc<"orders"> | null = await ctx.runQuery(
internal.orders.getForCharge,
{ orderId: args.orderId },
);
if (!order) {
throw new ConvexError("Order not found");
}
const res = await fetch("https://api.payments.example/charge", {
method: "POST",
body: JSON.stringify({ amount: order.total }),
});
await ctx.runMutation(internal.orders.setStatus, {
orderId: args.orderId,
status: res.ok ? "paid" : "failed",
});
return null;
},
});Doc and Id come from ./_generated/dataModel. The annotation is only needed when the called function lives in the same file.
Throw ConvexError from convex/values for anything a client should read. Its data reaches the client; a plain Error message is redacted in production. Return null for expected absences such as a lookup that finds nothing. Throw for real failures: not authenticated, not authorized, invalid input.
import { ConvexError } from "convex/values";
throw new ConvexError({ code: "NOT_FOUND", message: "Task not found" });Keep handlers short. Put auth lookups, validation, and business logic in plain async functions that take ctx first, then call them from the wrapper. Plain helpers are testable and shared between queries and mutations without a ctx.runQuery hop.
import { QueryCtx, MutationCtx } from "./_generated/server";
import { ConvexError } from "convex/values";
export async function getCurrentUser(ctx: QueryCtx | MutationCtx) {
const identity = await ctx.auth.getUserIdentity();
if (!identity) {
throw new ConvexError("Not authenticated");
}
const user = await ctx.db
.query("users")
.withIndex("by_token", (q) =>
q.eq("tokenIdentifier", identity.tokenIdentifier),
)
.unique();
if (!user) {
throw new ConvexError("User not found");
}
return user;
}From a query or mutation, call the helper directly. ctx.runQuery and ctx.runMutation are for actions and component boundaries.
| Mistake | Why it breaks | Do instead |
|---|---|---|
No returns validator | Return shape drifts and client types lie | Declare returns, use v.null() for nothing |
.filter() on a table query | Full table scan | Add an index, use withIndex |
ctx.db inside an action | Actions have no database handle | ctx.runQuery and ctx.runMutation |
fetch inside a query or mutation | Transactions must be deterministic | Move it to an action |
Scheduling api.* | Runs public code without a client, skips auth | Schedule internal.* |
"use node" in a file with queries | Bundler rejects the file | Split actions into their own file |
Date.now() in a query | Breaks caching and reactivity | Pass time as an arg or store a status field |
Many runQuery calls from one action | Each is a separate transaction, races appear | One mutation that does the related work |
Plain Error for user messages | Message is hidden in production | ConvexError |
Missing await on ctx.db or scheduler | Write may not commit | Await every ctx call |
args and returns on every exported functionreturns: v.null() and return null when there is nothing to returnctx.db.get(id) or withIndex, never .filter().paginate() or .take(n), not .collect()internal.*ctx.db"use node" only in files that export actions and need NoderunQuery and runMutation results have a type annotationConvexErrorctx.* promise is awaited© waynesutton, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 3 other files (assets) in skills/convex-functions of waynesutton/builder-skills.
Open the folder on GitHubat commit 82d1ce2
Convex Functions next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Convex Functions this skillwaynesutton/builder-skills | 404 | — | ~2.8k | Automated safety check: Pass | Apache-2.0 | |
| Frontend Query Mutationlangflow-ai/langflow | 156k | — | ~979 | Automated safety check: Pass | MIT | |
| Convexdavila7/claude-code-templates | 32k | 3 repos | ~6.4k | Automated safety check: Notes | MIT | |
| Convexopenclaw/clawhub | 9.5k | — | ~2.4k | Automated safety check: Pass | MIT | |
| Internal Commsalirezarezvani/claude-skills | 28k | — | ~3.4k | Automated safety check: Pass | MIT | |
| Internal Communicationsickn33/agentic-awesome-skills | 47k | 1 repos | ~3.4k | Automated safety check: Pass | MIT |
langflow-ai/langflow
Guide for implementing Langflow frontend query and mutation patterns with Axios and TanStack React Query v5.
davila7/claude-code-templates
Convex reactive backend expert: schema design, TypeScript functions, real-time subscriptions, auth, file storage, scheduling, and deployment.
openclaw/clawhub
Convex is the backend agents get right on the first try: an all-TypeScript reactive platform where the database, server functions, scheduling, file storage, auth, and realtime sync are one type-safe…
alirezarezvani/claude-skills
A skill your agent uses when a Head of People Ops, BizOps lead, or Internal Communications owner needs to draft and sequence an internal-only change-management communication — a re-org announcement…
sickn33/agentic-awesome-skills
Internal communication log: title, type, date, department, host and attendees, agenda, action items, follow-up date, meeting link and delivery status.
netdata/netdata
Query or explain direct Netdata Agent APIs and Functions; review direct-query recipes or helpers; troubleshoot bearer authentication.
waynesutton/builder-skills
Builds AI agents on the Convex agent component: threads, messages, tools that call queries and mutations, streaming, RAG with vector search, and workflows for multi step jobs.
waynesutton/builder-skills
Production patterns for Convex apps and the rules the @convex-dev/eslint-plugin enforces: validators, indexes, idempotent mutations, avoiding OCC conflicts, thin function wrappers, error handling.
waynesutton/builder-skills
Creates reusable Convex components with defineComponent, a clean client wrapper, their own schema, and an npm publish setup.
waynesutton/builder-skills
Schedules work in Convex: cron jobs in convex/crons.ts, one off scheduled functions with runAfter and runAt, batching large jobs, and cancelling or inspecting the queue.
waynesutton/builder-skills
Adds HTTP endpoints in convex/http.ts: webhook receivers with signature checks, REST style routes, CORS, auth headers, streaming responses, and file uploads over HTTP.
waynesutton/builder-skills
Changes a live Convex schema without downtime: make a field optional, backfill in batches, flip the validator, then clean up.
Writes Convex queries, mutations, actions, and internal functions in the object form with args and returns validators, correct ctx usage, runtime boundaries, and error handling. Convex Functions is an agent skill from waynesutton/builder-skills. Writes Convex queries, mutations, actions, and internal functions in the object form with args and returns validators, correct ctx usage, runtime boundaries, and error handling.
Convex Functions fits situations like: changing anything in convex/.ts that exports a function; deciding between query.
Run `npx skills add waynesutton/builder-skills --skill convex-functions -a claude-code`. Or copy the skill folder (skills/convex-functions in waynesutton/builder-skills) into .claude/skills/convex-functions in your project. Claude Code loads it when a task matches its description.
Run `npx skills add waynesutton/builder-skills --skill convex-functions -a codex`. Or copy the skill folder (skills/convex-functions in waynesutton/builder-skills) into .agents/skills/convex-functions in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add waynesutton/builder-skills --skill convex-functions -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/convex-functions, .gemini/skills/convex-functions, .github/skills/convex-functions and .opencode/skills/convex-functions in your project.
SKILL.md names no scripts, command-line tools or credentials: Convex Functions is instructions for the agent only.
SKILL.md names 1 domain. As links in the text: docs.convex.dev. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Convex Functions is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.8k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Convex Functions: Frontend Query Mutation (langflow-ai/langflow, 156k stars), Convex (davila7/claude-code-templates, 32k stars), Convex (openclaw/clawhub, 9.5k stars) and Internal Comms (alirezarezvani/claude-skills, 28k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
waynesutton (a GitHub user) maintains it in waynesutton/builder-skills, which has 404 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on September 28, 2026.
Source: waynesutton/builder-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.