React

@raquery/react adds shared materializations and React hooks without changing the relational query language.

pnpm add @raquery/query @raquery/react react

import { relation, where } from "@raquery/query";
import { useRaq } from "@raquery/react";

export function ProductList() {
  const result = useRaq(
    where(relation("products"), "price > 100"),
    { endpoint: "/products" }
  );

  if (result.status === "loading") return <p>Loading…</p>;
  if (result.error) return <p>{result.error.message}</p>;

  return result.rows.map((product) => (
    <article key={product.id}>{product.name}</article>
  ));
}

Equivalent queries share a materialization. Pending reads with the same endpoint and context may be batched, and catalog change messages refresh only affected relations.

After an application-owned write, pass the returned catalog diff to applyCatalogDiff(...). RAQ maps the write’s physical lineage to public relations; it does not generate the mutation itself. See Mutations and live updates for the complete path and a working mutation example.

The lower-level @raquery/react/runtime entrypoint is available for custom reactive integrations and transport injection.