Convex Has a Free API: The Backend That Replaces Your Database, Server, and WebSocket Layer

#webdev #javascript #convex #backend

What if your database queries automatically updated the UI in real-time? No WebSockets. No polling. No cache invalidation.

That's Convex.

What Is Convex?

Convex is a reactive backend platform. You write server functions, Convex handles the database, real-time subscriptions, caching, and deployment.

// convex/tasks.ts — server function
import { query, mutation } from "./_generated/server"
import { v } from "convex/values"

export const list = query({
  handler: async (ctx) => {
    return await ctx.db.query("tasks").order("desc").collect()
  },
})

export const create = mutation({
  args: { text: v.string() },
  handler: async (ctx, args) => {
    await ctx.db.insert("tasks", { text: args.text, completed: false })
  },
})

// React component — automatically updates when data changes
import { useQuery, useMutation } from "convex/react"
import { api } from "../convex/_generated/api"

function TaskList() {
  const tasks = useQuery(api.tasks.list)  // Real-time subscription!
  const createTask = useMutation(api.tasks.create)

  return (
    <div>
      <button onClick={() => createTask({ text: "New task" })}>Add</button>
      {tasks?.map(task => <div key={task._id}>{task.text}</div>)}
    </div>
  )
}

When ANY client creates a task, ALL connected clients see it instantly. Zero code for real-time sync.

Why Convex

1. Reactive by default — useQuery subscribes to changes. When data changes, UI updates automatically.

2. ACID transactions — Mutations are transactions. No partial writes. No race conditions.

3. Type safety — Server functions are fully typed. Call them from React with full TypeScript inference.

4. File storage — Built-in:

const uploadUrl = await generateUploadUrl()
// Upload file, get storage ID, use in documents

5. Scheduled functions — Cron jobs and delayed execution:

export const cleanup = internalMutation({
  handler: async (ctx) => {
    // Runs on schedule
  },
})
// crons.ts: crons.interval("cleanup", { hours: 1 }, internal.tasks.cleanup)