@ic-reactor/mcp 0.0.0-stage → 0.0.0

package/examples/next-ssr/src/components/MyBalances.test.tsx

@@ -0,0 +1,253 @@
+// @vitest-environment jsdom
+//
+// Scenario 9: "My balances" asks nothing while nobody is signed in, reads
+// the user's own balances as the user after a sign-in, and starts from empty
+// keys after a switch of account, so one account's balance is never shown
+// for another. A row whose decimals or symbol read fails, with nothing to
+// show, shows that failure; a failed refetch keeps the balance up.
+import type { TestHandlers } from "@ic-reactor/core/testing"
+import { ReactorProvider } from "@ic-reactor/react"
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react"
+import { afterEach, describe, expect, it } from "vitest"
+import { actor, type Actor } from "@/canisters/icrc1"
+import { tokens } from "@/format"
+import { LEDGERS, type LedgerRef } from "@/ledgers"
+import {
+  BALANCES,
+  ledgerHandlers,
+  mockLedgers,
+  requestsFor,
+  SEED_1,
+  SEED_2,
+  tokenOf,
+  type MockLedgers,
+} from "@/testing/mock-ledgers"
+import { MyBalances } from "./MyBalances"
+
+const ICP = LEDGERS[0]!
+let test: MockLedgers
+afterEach(() => {
+  cleanup()
+  test.client.dispose()
+})
+
+/** @param prepare - Mocks what this test changes, before anything is read. */
+function renderSection(prepare?: (mocked: MockLedgers) => void) {
+  test = mockLedgers()
+  prepare?.(test)
+  return render(
+    <ReactorProvider client={() => test.client}>
+      <MyBalances ledgers={LEDGERS} />
+    </ReactorProvider>
+  )
+}
+
+const row = (container: HTMLElement, ledger: LedgerRef) =>
+  container.querySelector(`[data-ledger="${ledger.id}"] [data-field="balance"]`)
+    ?.textContent
+const icpRow = (container: HTMLElement) => row(container, ICP)
+const icp = (units: bigint) => tokens(units, 8, "ICP")
+
+describe("My balances", () => {
+  it("prompts to sign in and reads nothing while signed out", async () => {
+    renderSection()
+
+    expect(
+      screen.getByRole("button", { name: "Sign in with Internet Identity" })
+    ).toBeTruthy()
+    await act(() => new Promise((resolve) => setTimeout(resolve, 20)))
+    expect(requestsFor(test, "icrc1_balance_of")).toEqual([])
+  })
+
+  it("reads the user's balances as the user after a sign-in", async () => {
+    const { container } = renderSection()
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Sign in with Internet Identity" })
+    )
+
+    await waitFor(() =>
+      expect(icpRow(container)).toBe(icp(BALANCES.get(SEED_1) ?? 0n))
+    )
+    expect(
+      requestsFor(test, "icrc1_balance_of").map(({ caller }) => caller)
+    ).toEqual(LEDGERS.map(() => SEED_1))
+  })
+
+  // The balance is read, but the row cannot show it without the ledger's
+  // decimals and symbol: when one of those reads fails, the row shows that
+  // failure's kind, as for a failed balance, and not "loading" for good.
+  it.each([
+    {
+      method: "icrc1_decimals",
+      // A handler that throws traps the call: reject code 5.
+      handlers: (): TestHandlers<Actor> => ({
+        icrc1_decimals: () => {
+          throw new Error("decimals trapped")
+        },
+      }),
+    },
+    {
+      method: "icrc1_symbol",
+      handlers: (mocked: MockLedgers): TestHandlers<Actor> => ({
+        icrc1_symbol: () => mocked.reject(4, "no symbol here"),
+      }),
+    },
+  ])(
+    "shows the kind of a failed $method read, not loading, though the balance was read",
+    async ({ method, handlers }) => {
+      const { container } = renderSection((mocked) =>
+        mocked.mock<Actor>(actor, ICP.id, {
+          ...ledgerHandlers(tokenOf(ICP)),
+          ...handlers(mocked),
+        })
+      )
+
+      fireEvent.click(
+        screen.getByRole("button", { name: "Sign in with Internet Identity" })
+      )
+
+      await waitFor(() => expect(icpRow(container)).toBe("rejected"))
+      // The balance read itself succeeded and is in the cache; the failure
+      // is the other read's, asked once (a trap or a reject is not retried).
+      const { client } = test
+      const ledger = client.canister<Actor>(actor, { id: ICP.id })
+      const balance = client.queryOptions(ledger, "icrc1_balance_of", {
+        owner: SEED_1,
+        subaccount: null,
+      })
+      await waitFor(() =>
+        expect(client.queryClient.getQueryData(balance.queryKey)).toBe(
+          BALANCES.get(SEED_1)
+        )
+      )
+      expect(
+        requestsFor(test, method).filter(
+          ({ canisterId }) => canisterId === ICP.id
+        )
+      ).toHaveLength(1)
+      // The other ledgers answer as usual.
+      await waitFor(() => {
+        for (const other of LEDGERS.slice(1)) {
+          const token = tokenOf(other)
+          expect(row(container, other)).toBe(
+            tokens(BALANCES.get(SEED_1) ?? 0n, token.decimals, token.symbol)
+          )
+        }
+      })
+    }
+  )
+
+  // A refetch that fails while the row already shows a balance (TanStack
+  // keeps the earlier answer) leaves the balance up: only a read with nothing
+  // to show turns the row into its failure.
+  it("keeps showing the balance when a later decimals read fails", async () => {
+    let decimalsReads = 0
+    const { container } = renderSection((mocked) =>
+      mocked.mock<Actor>(actor, ICP.id, {
+        ...ledgerHandlers(tokenOf(ICP)),
+        icrc1_decimals: () => {
+          decimalsReads += 1
+          if (decimalsReads > 1) throw new Error("decimals trapped")
+          return tokenOf(ICP).decimals
+        },
+      })
+    )
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Sign in with Internet Identity" })
+    )
+    const shown = icp(BALANCES.get(SEED_1) ?? 0n)
+    await waitFor(() => expect(icpRow(container)).toBe(shown))
+
+    const { client } = test
+    const ledger = client.canister<Actor>(actor, { id: ICP.id })
+    await act(() =>
+      client.queryClient.invalidateQueries({
+        queryKey: client.queryKey(ledger, "icrc1_decimals"),
+      })
+    )
+
+    await waitFor(() => expect(decimalsReads).toBe(2))
+    const decimals = client.queryOptions(ledger, "icrc1_decimals")
+    await waitFor(() =>
+      expect(client.queryClient.getQueryState(decimals.queryKey)?.status).toBe(
+        "error"
+      )
+    )
+    expect(icpRow(container)).toBe(shown)
+  })
+
+  it("starts from empty keys after a switch: never one account's balance for another", async () => {
+    const { container } = renderSection()
+    fireEvent.click(
+      screen.getByRole("button", { name: "Sign in with Internet Identity" })
+    )
+    await waitFor(() =>
+      expect(icpRow(container)).toBe(icp(BALANCES.get(SEED_1) ?? 0n))
+    )
+    // From now on the ICP ledger holds every balance read until released,
+    // while it answers decimals and symbol at once.
+    let release!: () => void
+    const held = new Promise<void>((resolve) => {
+      release = resolve
+    })
+    test.mock<Actor>(actor, ICP.id, {
+      ...ledgerHandlers(tokenOf(ICP)),
+      icrc1_balance_of: async ({ owner }) => {
+        await held
+        return BALANCES.get(owner) ?? 0n
+      },
+    })
+
+    act(() => {
+      test.auth.switchTo(2)
+    })
+
+    // Seed 2's decimals and symbol arrive; seed 2's balance does not. The
+    // row has nothing to show for seed 2, and shows nothing of seed 1's.
+    await waitFor(() =>
+      expect(
+        requestsFor(test, "icrc1_symbol").filter(
+          ({ caller, canisterId }) => caller === SEED_2 && canisterId === ICP.id
+        )
+      ).toHaveLength(1)
+    )
+    await act(() => new Promise((resolve) => setTimeout(resolve, 20)))
+    expect(icpRow(container)).toBe("loading")
+
+    release()
+    await waitFor(() =>
+      expect(icpRow(container)).toBe(icp(BALANCES.get(SEED_2) ?? 0n))
+    )
+    expect(
+      requestsFor(test, "icrc1_balance_of")
+        .slice(LEDGERS.length)
+        .map(({ caller }) => caller)
+    ).toEqual(LEDGERS.map(() => SEED_2))
+  })
+
+  it("prompts again after a sign-out", async () => {
+    const { container } = renderSection()
+    fireEvent.click(
+      screen.getByRole("button", { name: "Sign in with Internet Identity" })
+    )
+    await waitFor(() => expect(icpRow(container)).toBeDefined())
+
+    fireEvent.click(screen.getByRole("button", { name: "Sign out" }))
+
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "Sign in with Internet Identity" })
+      ).toBeTruthy()
+    )
+    expect(icpRow(container)).toBeUndefined()
+  })
+})

package/examples/next-ssr/src/components/MyBalances.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+// Scenario 9: signing in after hydration, in the browser.
+//
+// Rules:
+// - `useAuth()` says who calls; the server render and the hydrating first
+//   render say "anonymous", so this section first renders the sign-in prompt
+//   everywhere, and a tab that holds a session switches right after.
+// - A read is keyed by its caller. Signed out, there is nothing to ask
+//   (`skipToken` would do; here the rows are not rendered at all). Signed in,
+//   each balance is `useQuery(client.queryOptions(ledger, "icrc1_balance_of",
+//   account))` with keys that hold the user's principal: they are new keys,
+//   empty until read as the user. Nothing read anonymously (the server's
+//   render included) is reused for them, and nothing carries data across
+//   keys (no `keepPreviousData`, no cross-key `initialData`).
+// - A sign-in with Internet Identity happens in the browser only; on a server
+//   the client never builds its auth.
+import { principal } from "@meantjs/schema"
+import { isReactorError } from "@ic-reactor/core"
+import { useAuth, useClient } from "@ic-reactor/react"
+import { useQuery } from "@tanstack/react-query"
+import { useState } from "react"
+import { actor, type Actor } from "@/canisters/icrc1"
+import { tokens } from "@/format"
+import type { LedgerRef } from "@/ledgers"
+import { SERVER_DATA } from "./server-data"
+
+export function MyBalances({ ledgers }: { ledgers: readonly LedgerRef[] }) {
+  const { status, principal: caller, signIn, signOut } = useAuth()
+  const [problem, setProblem] = useState<string>()
+  const run = (action: () => Promise<void>) => {
+    setProblem(undefined)
+    action().catch((error: unknown) =>
+      setProblem(error instanceof Error ? error.message : String(error))
+    )
+  }
+
+  return (
+    <section className="mine" data-status={status}>
+      <h2>My balances</h2>
+      {status === "signed-in" ? (
+        <>
+          <p className="muted">
+            Signed in as <code>{caller}</code>. Each balance is read as you,
+            under keys that hold your principal.
+          </p>
+          <table className="balances">
+            <tbody>
+              {ledgers.map((ledger) => (
+                <MyBalance key={ledger.id} ledger={ledger} owner={caller} />
+              ))}
+            </tbody>
+          </table>
+          <button type="button" onClick={() => run(() => signOut())}>
+            Sign out
+          </button>
+        </>
+      ) : (
+        <>
+          <p className="muted">
+            {status === "expired"
+              ? "Your session expired. "
+              : "The server rendered this page for nobody in particular. "}
+            Sign in with Internet Identity to read your own balances, in this
+            tab.
+          </p>
+          <button
+            type="button"
+            className="primary"
+            onClick={() => run(() => signIn())}
+          >
+            Sign in with Internet Identity
+          </button>
+        </>
+      )}
+      {problem && <p className="error">{problem}</p>}
+    </section>
+  )
+}
+
+/** The default account of `owner` on one ledger, read as the caller. */
+function MyBalance({
+  ledger: ref,
+  owner,
+}: {
+  ledger: LedgerRef
+  owner: string
+}) {
+  const client = useClient()
+  const ledger = client.canister<Actor>(actor, { id: ref.id })
+  const account = { owner: principal(owner), subaccount: null }
+  const balance = useQuery(
+    client.queryOptions(ledger, "icrc1_balance_of", account)
+  )
+  const decimals = useQuery({
+    ...client.queryOptions(ledger, "icrc1_decimals"),
+    ...SERVER_DATA,
+  })
+  const symbol = useQuery({
+    ...client.queryOptions(ledger, "icrc1_symbol"),
+    ...SERVER_DATA,
+  })
+  // The row needs all three reads, and each fails on its own: a failed
+  // decimals or symbol read leaves nothing to show, as a failed balance does.
+  // A read that failed while it still holds an earlier answer (a refetch in
+  // the background) does not hide the balance, as in LedgerCard.
+  const failure = [balance, decimals, symbol].find(
+    (read) => read.data === undefined && read.error !== null
+  )?.error
+
+  return (
+    <tr data-ledger={ref.id}>
+      <th scope="row">{ref.label}</th>
+      <td data-field="balance">
+        {failure ? (
+          <span className="error">
+            {isReactorError(failure) ? failure.kind : "error"}
+          </span>
+        ) : balance.data === undefined ||
+          decimals.data === undefined ||
+          symbol.data === undefined ? (
+          <span className="muted">loading</span>
+        ) : (
+          tokens(balance.data, decimals.data, symbol.data)
+        )}
+      </td>
+    </tr>
+  )
+}

package/examples/next-ssr/src/components/SessionBadge.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+// Who the tab calls as, in the header. `useAuth()` is "anonymous" in the
+// server render and in the browser's first render (the server snapshot), so
+// a signed-in tab shows "anonymous" in its HTML and switches right after
+// hydration.
+import { useAuth } from "@ic-reactor/react"
+
+export function SessionBadge() {
+  const { status, principal } = useAuth()
+  return (
+    <span className="pill" data-status={status} title={principal}>
+      {status === "signed-in"
+        ? `signed in: ${principal.slice(0, 5)}…${principal.slice(-3)}`
+        : status}
+    </span>
+  )
+}

package/examples/next-ssr/src/components/hydration.test.tsx

@@ -0,0 +1,259 @@
+// @vitest-environment jsdom
+//
+// Scenarios 2, 3, 4, 9 and 10, through the home page's tree, the way Next
+// runs it: a request client prefetches and dehydrates
+// (src/server/prefetch-ledgers.ts); the state crosses to the browser as JSON;
+// the server renders the client components with a provider client of its
+// own, to HTML; the browser hydrates that HTML with the tab's client, signed
+// out or still signed in from an earlier visit. Three test clients, three
+// in-memory replicas: a test can see which side sent what.
+import { ReactorProvider } from "@ic-reactor/react"
+import { HydrationBoundary, type DehydratedState } from "@tanstack/react-query"
+import { act, fireEvent, screen, waitFor } from "@testing-library/react"
+import { hydrateRoot, type Root } from "react-dom/client"
+import { renderToString } from "react-dom/server"
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { toHex, tokens } from "@/format"
+import { LEDGERS, NOT_A_LEDGER, type LedgerRef } from "@/ledgers"
+import type { ErrorSummary } from "@/server/error-summary"
+import { prefetchLedgers } from "@/server/prefetch-ledgers"
+import {
+  ANONYMOUS,
+  BALANCES,
+  mockLedgers,
+  requestsFor,
+  SEED_1,
+  tokenOf,
+  type MockLedgers,
+} from "@/testing/mock-ledgers"
+import { LedgerSections } from "./LedgerSections"
+import { MyBalances } from "./MyBalances"
+import { SessionBadge } from "./SessionBadge"
+
+const SECTIONS = [...LEDGERS, NOT_A_LEDGER]
+
+/** The home page below the root layout: the same components, the same order. */
+function Page(props: {
+  test: MockLedgers
+  state: DehydratedState
+  failures: Readonly<Record<string, ErrorSummary>>
+}) {
+  return (
+    <ReactorProvider client={() => props.test.client}>
+      <SessionBadge />
+      <HydrationBoundary state={props.state}>
+        <LedgerSections ledgers={SECTIONS} failures={props.failures} />
+        <MyBalances ledgers={LEDGERS} />
+      </HydrationBoundary>
+    </ReactorProvider>
+  )
+}
+
+const tests: MockLedgers[] = []
+const newClient = (options?: Parameters<typeof mockLedgers>[0]) => {
+  const test = mockLedgers(options)
+  tests.push(test)
+  return test
+}
+let root: Root | undefined
+afterEach(() => {
+  act(() => root?.unmount())
+  root = undefined
+  document.body.innerHTML = ""
+  for (const test of tests.splice(0)) test.client.dispose()
+  vi.restoreAllMocks()
+})
+
+/** What the server sends: the dehydrated state as JSON, and the HTML. */
+async function serverRender() {
+  const request = newClient()
+  const { state, failures } = await prefetchLedgers(request.client, SECTIONS)
+  const json = JSON.stringify(state)
+  const ssr = newClient()
+  const html = renderToString(
+    <Page test={ssr} state={JSON.parse(json)} failures={failures} />
+  )
+  return { json, failures, html, ssr }
+}
+
+/**
+ * Hydrates the server's HTML with a browser client, returning what React
+ * reported and the cards the server's HTML had. `signedIn` is a tab that is
+ * still signed in from an earlier visit: its auth knows the session before
+ * the first render, as an `AuthClient` reading its stored session does.
+ */
+async function hydrate(
+  server: Awaited<ReturnType<typeof serverRender>>,
+  options: { signedIn?: boolean } = {}
+) {
+  const browser = newClient(options)
+  const container = document.createElement("div")
+  container.innerHTML = server.html
+  document.body.appendChild(container)
+  const servedCards = [...container.querySelectorAll("[data-ledger]")]
+  const recoverable: string[] = []
+  const logged = vi.spyOn(console, "error").mockImplementation(() => {})
+  await act(async () => {
+    root = hydrateRoot(
+      container,
+      <Page
+        test={browser}
+        state={JSON.parse(server.json)}
+        failures={server.failures}
+      />,
+      {
+        onRecoverableError: (error) =>
+          recoverable.push(String((error as Error).message)),
+      }
+    )
+  })
+  // Long enough for a fetch on mount, a retry or an effect to show.
+  await act(() => new Promise((resolve) => setTimeout(resolve, 50)))
+  return { browser, container, recoverable, logged, servedCards }
+}
+
+const card = (scope: ParentNode, ledger: LedgerRef) => {
+  const section = scope.querySelector(`[data-ledger="${ledger.id}"]`)
+  if (section === null) throw new Error(`no section for ${ledger.label}`)
+  return section
+}
+const readText = (scope: ParentNode, ledger: LedgerRef, method: string) =>
+  card(scope, ledger).querySelector(`[data-read="${method}"]`)?.textContent
+
+describe("the server's HTML", () => {
+  it("shows every prefetched value, with the types it was read as, and no script run", async () => {
+    const { html, ssr } = await serverRender()
+    // innerHTML runs no script: this is what a browser without JavaScript shows.
+    const page = document.createElement("div")
+    page.innerHTML = html
+
+    for (const ledger of LEDGERS) {
+      const token = tokenOf(ledger)
+      expect(readText(page, ledger, "icrc1_name")).toContain(
+        `${token.name}, read by ${ANONYMOUS}`
+      )
+      expect(readText(page, ledger, "icrc1_total_supply")).toBe(
+        `${tokens(token.supply, token.decimals, token.symbol)} bigint`
+      )
+      expect(readText(page, ledger, "icrc1_fee")).toBe(
+        `${tokens(token.fee, token.decimals, token.symbol)} bigint`
+      )
+      expect(readText(page, ledger, "icrc1_minting_account")).toBe(
+        `${token.minter.owner} principal text` +
+          `subaccount ${toHex(token.minter.subaccount ?? new Uint8Array())} Uint8Array(32)`
+      )
+      expect(readText(page, ledger, "icrc1_metadata")).toContain(
+        `test:blob 0x${toHex(token.blob)} Uint8Array(${token.blob.length})`
+      )
+      expect(readText(page, ledger, "icrc1_metadata")).toContain(
+        `test:int ${-(2n ** 64n)} bigint`
+      )
+      expect(
+        card(page, ledger)
+          .querySelector("[data-origin]")
+          ?.getAttribute("data-origin")
+      ).toBe("server")
+    }
+    expect(
+      card(page, NOT_A_LEDGER).querySelector("[data-kind]")?.textContent
+    ).toBe("rejected")
+    expect(page.querySelector(".pill")?.textContent).toBe("anonymous")
+    // The server render of the client components read nothing itself.
+    expect(ssr.requests).toEqual([])
+  })
+})
+
+describe("the browser's first render", () => {
+  it("matches the server's HTML and reads nothing, for a visitor who is not signed in", async () => {
+    const server = await serverRender()
+
+    const { browser, container, recoverable, logged } = await hydrate(server)
+
+    expect(recoverable).toEqual([])
+    expect(logged).not.toHaveBeenCalled()
+    expect(browser.requests).toEqual([])
+    // The DOM is still the server's, node for node (both parsed the same way).
+    const served = document.createElement("div")
+    served.innerHTML = server.html
+    expect(container.innerHTML).toBe(served.innerHTML)
+  })
+})
+
+describe("a reload in a tab that is still signed in", () => {
+  it("hydrates the server's HTML from the server's data, then reads every card again as the user", async () => {
+    const server = await serverRender()
+
+    const { browser, container, recoverable, logged, servedCards } =
+      await hydrate(server, { signedIn: true })
+
+    // The hydrating render built the anonymous keys the server filled, so it
+    // matched the HTML: React reported nothing and kept the server's nodes.
+    expect(recoverable).toEqual([])
+    expect(logged).not.toHaveBeenCalled()
+    expect(servedCards.length).toBe(SECTIONS.length)
+    for (const node of servedCards) expect(node.isConnected).toBe(true)
+    // Right after it, the tab shows its session, and every card reads its
+    // own keys as the user. The anonymous reads the server made are not sent
+    // again, by anyone.
+    await waitFor(() => {
+      for (const ledger of LEDGERS) {
+        expect(readText(container, ledger, "icrc1_name")).toContain(
+          `read by ${SEED_1}`
+        )
+      }
+    })
+    expect(container.querySelector(".pill")?.textContent).toMatch(
+      /^signed in: psith…4ae$/
+    )
+    expect(
+      browser.requests.filter(({ caller }) => caller === ANONYMOUS)
+    ).toEqual([])
+    expect(requestsFor(browser, "icrc1_name")).toHaveLength(LEDGERS.length)
+    for (const node of servedCards) expect(node.isConnected).toBe(true)
+  })
+})
+
+describe("signing in after hydration", () => {
+  it("reads every card again as the new caller, and signing out shows the anonymous answers again", async () => {
+    const server = await serverRender()
+    const { browser, container } = await hydrate(server)
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Sign in with Internet Identity" })
+    )
+
+    await waitFor(() => {
+      for (const ledger of LEDGERS) {
+        expect(readText(container, ledger, "icrc1_name")).toContain(
+          `read by ${SEED_1}`
+        )
+      }
+    })
+    // Every read the browser sent was signed by the new caller: the
+    // anonymous answers were neither re-read nor reused for it.
+    const sent = browser.requests.filter(({ endpoint }) => endpoint === "query")
+    expect(new Set(sent.map(({ caller }) => caller))).toEqual(new Set([SEED_1]))
+    expect(requestsFor(browser, "icrc1_name")).toHaveLength(LEDGERS.length)
+    await waitFor(() =>
+      expect(
+        container.querySelector(`.mine [data-ledger="${LEDGERS[0]!.id}"]`)
+          ?.textContent
+      ).toBe(`ICP${tokens(BALANCES.get(SEED_1) ?? 0n, 8, "ICP")}`)
+    )
+    expect(container.querySelector(".pill")?.textContent).toMatch(
+      /^signed in: psith…4ae$/
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: "Sign out" }))
+
+    await waitFor(() =>
+      expect(readText(container, LEDGERS[0]!, "icrc1_name")).toContain(
+        `read by ${ANONYMOUS}`
+      )
+    )
+    // The anonymous answers came from the cache the server filled.
+    expect(
+      browser.requests.filter(({ caller }) => caller === ANONYMOUS)
+    ).toEqual([])
+  })
+})

package/examples/next-ssr/src/components/server-data.ts

@@ -0,0 +1,10 @@
+// How long the browser keeps using data the server read, before it reads
+// again. With TanStack's default (0), every read the server hydrated would be
+// stale on arrival, and each card would fetch it again as soon as it mounted.
+// A minute after the server's read, a remount or a refocused window reads it
+// again, as the browser's own caller.
+//
+// Rule: add options by spreading them over the client's,
+// `{ ...client.queryOptions(...), ...SERVER_DATA }`; never by building a key
+// or a query function by hand.
+export const SERVER_DATA = { staleTime: 60_000 } as const