Mutations

Three hooks cover create, update, and delete. Each automatically keeps the cache consistent on success — no manual invalidation needed.

useCreate

import { useCreate } from "@bunbase/react-sdk";

function NewPostForm() {
  const { mutate: createPost, loading, error, reset } = useCreate<Post>("posts");

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = new FormData(e.currentTarget);
    await createPost({ title: form.get("title") as string, body: form.get("body") as string });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="title" />
      <textarea name="body" />
      <button disabled={loading}>Create</button>
      {error && <p>{error.message} <button onClick={reset}>Dismiss</button></p>}
    </form>
  );
}

After success: all posts:list:* cache entries are invalidated so any active useList hooks re-fetch.

---

useUpdate

import type { BunBaseRecord } from "@bunbase/js";
import { useUpdate } from "@bunbase/react-sdk";

function EditPostForm({ post }: { post: Post & BunBaseRecord }) {
  const { mutate: updatePost, loading, error } = useUpdate<Post>("posts");

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = new FormData(e.currentTarget);
    await updatePost(post._id, { title: form.get("title") as string });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="title" defaultValue={post.title} />
      <button disabled={loading}>Save</button>
      {error && <p>{error.message}</p>}
    </form>
  );
}

After success:

• The updated record is written directly to posts:get:{id} — useRecord on any other page reflects the change immediately.
• All posts:list:* entries are invalidated so lists re-fetch.

---

useDelete

import { useDelete } from "@bunbase/react-sdk";

function DeleteButton({ postId }: { postId: string }) {
  const { mutate: deletePost, loading } = useDelete("posts");

  return (
    <button onClick={() => deletePost(postId)} disabled={loading}>
      {loading ? "Deleting…" : "Delete"}
    </button>
  );
}

After success: all posts:get:{id} and posts:list:* entries are invalidated.

---

Return value (all three hooks)

Field	Type	Description
mutate	(...args) => Promise<T>	Call to run the mutation. useDelete resolves to void
loading	boolean	True while the request is in flight
data	T | undefined	Result of the last successful mutation. Always undefined for useDelete
error	Error | null	Last error
reset	() => void	Clear data and error