The reactive backend
in one file.

import { v } from "onebase/values";
import { mutation, query } from "./_generated/server";

export const list = query({
  args: { channel: v.id("channels") },
  handler: (ctx, { channel }) =>
    ctx.db
      .query("messages")
      .withIndex("by_channel", (q) => q.eq("channel", channel))
      .collect(),
});

export const send = mutation({
  args: { channel: v.id("channels"), body: v.string() },
  handler: async (ctx, args) => {
    const user = await ctx.auth.getUserIdentity();
    const author = user?.name ?? "anonymous";
    return ctx.db.insert("messages", { ...args, author });
  },
});

import { useMutation, useQuery } from "onebase/react";
import { api } from "../onebase/_generated/api";

export function Chat({ channel }) {
  // Re-renders whenever anyone sends a message.
  const messages = useQuery(api.messages.list, { channel });
  const send = useMutation(api.messages.send);

  return (
    <>
      {messages?.map((m) => (
        <p key={m._id}><b>{m.author}</b> {m.body}</p>
      ))}
      <button onClick={() => send({ channel, body: "hi" })}>
        Say hi
      </button>
    </>
  );
}