Bext Query (signals)

Reactive data cache on bext signals — TanStack-shaped API (createQuery, createMutation, invalidateQueries, dehydrate/hydrate) without React. The page prefetches /api/poll server-side, dehydrates the cache into the island marker, and the island hydrates its client cache before the first createQuery call — so first paint shows real data, no loading flash.

Tip

Server-side cache dehydration (client.dehydrate()) is serialised into the island marker and shipped in the initial HTML — no extra request needed on mount. Use staleTime to control when the client re-fetches.

Output

Manual query (staleTime 5s)

status: success · fetching: no · stale: no

now = —

Live query (refetchInterval 3s)

tick = —

src/components/QueryDemo.tsxTSX

"use signals";
/** @jsxImportSource @bext-stack/framework/signals */

import {
  createQueryClient, createQuery, createMutation,
  type DehydratedState,
} from "@bext-stack/framework/query";

export default function QueryDemo(props: { dehydrate?: DehydratedState }) {
  const client = createQueryClient();
  client.hydrate(props.dehydrate);

  const poll = createQuery<{ now: string }>(client, {
    queryKey: ["poll"],
    queryFn: async ({ signal }) => (await fetch("/api/poll", { signal })).json(),
    staleTime: 5_000,
  });

  return (
    <div>
      <p>status: {poll.status.value} · fetching: {poll.isFetching.value ? "yes" : "no"}</p>
      <p>now = {poll.data.value?.now ?? "—"}</p>
      <button onClick={() => poll.refetch()}>refetch</button>
    </div>
  );
}

src/app/examples/query/page.tsxTSX

import { signalsIsland } from "@bext-stack/framework/signals";
import { createQueryClient } from "@bext-stack/framework/query";
import QueryDemo from "../../../components/QueryDemo";

export default async function Page() {
  const client = createQueryClient();
  // Server-side prefetch — populates the cache before the island renders.
  await client.prefetchQuery({
    queryKey: ["poll"],
    queryFn: async () =>
      (await fetch("https://demo.bext.dev/api/poll")).json(),
  });
  return signalsIsland("QueryDemo", QueryDemo, {
    dehydrate: client.dehydrate(),
  });
}

Bext Query (signals)

Output

Related documentation