Guides
Realtime
Build live React screens with query objects instead of hand-written subscription plumbing.
The recommended browser stack is:
@kizaki/schemafor typed entities@kizaki/sdk/browserfor query builders@kizaki/reactforuseQuery()anduseMutation()
import { select } from "@kizaki/sdk/browser";
import { useMutation, useQuery } from "@kizaki/react";
import { createMessage } from "@kizaki/client";
import { Message } from "@kizaki/schema";
const messagesQuery = select(Message).fields(Message.id, Message.body);
export function Messages() {
const messages = useQuery(messagesQuery);
const create = useMutation(createMessage, { invalidate: [messagesQuery] });
// ...
}Why This Is The Default
- your read model is reused across initial fetch and live updates
- authorization stays in the schema
- query invalidation stays explicit in UI code
How To Think About Realtime In Kizaki
Kizaki treats realtime as an extension of the normal query model, not as a separate product area. You do not define a second subscription schema. You define the read you want, and the platform keeps that read current.
That leads to a simpler frontend architecture:
- one query object can drive loading, success, and live refresh
- the same policy model determines what the user can see
- invalidation remains explicit instead of hiding data flow behind a bespoke client cache
Recommended Usage Pattern
- use
useQuery()for screens that should stay current - use
useMutation()with invalidation for writes - keep live reads narrow with
.fields()and focused query shapes
This usually gives you the right balance of performance, readability, and correctness for the first versions of a product.