useLiveQuery
import { useLiveQuery } from "@rindle/react";
const { rows, status, error } = useLiveQuery<Note>(db, "/api/notes");Keeps a component rendering a live query. Re-renders when the rows change, and stops the query on unmount.
It takes three forms:
| Call | db is |
Second argument |
|---|---|---|
useLiveQuery(db, endpoint) |
A browser client | Your query endpoint |
useLiveQuery(db, sql, params?) |
A server client | Rindle SQL and its parameters |
useLiveQuery(endpoint) |
From RindleProvider |
Your query endpoint |
Returns:
rows |
The current rows. Empty until they arrive. |
status |
"loading", "complete" or "error". |
error |
An Error, when status is "error". If your endpoint answered with an error status, a LiveQueryError with that status. |
Passing null for db or the query runs nothing and returns status: "loading". Use it while a
client is being created, or to wait on an argument.
Changing the endpoint, SQL or params stops the old query and starts the new one. Until the new
one answers, rows is empty and status is "loading". Params are compared by value, so an
inline array is fine.
On the server, inside a provider given an SSR client, the hook suspends until the rows arrive. That needs React 19.
RindleProvider
import { RindleProvider } from "@rindle/react";
<RindleProvider client={db}>
<App />
</RindleProvider>Makes db available to useLiveQuery(endpoint) below it. client is a browser client or an SSR
client. A server-rendered app needs it, because each request has its own client; see
Server-Side Rendering.