React with ATMX

Generate the client

axiom pull --contract organization/project/1.2.0 --framework atmx-react

Use the generated config and query definitions rather than hand-writing endpoint IDs.

Establish the runtime boundary

AxiomProvider accepts an in-memory config or a configUrl, initializes the Wasm engine once, and renders its fallback until ready.

import { AxiomProvider } from 'atmx-react';
import { AxiomDefaultConfig } from './generated/sdk';

export function App() {
  return (
    <AxiomProvider
      config={AxiomDefaultConfig}
      fallback={<p>Starting data runtime…</p>}
    >
      <Dashboard />
    </AxiomProvider>
  );
}

An initialization error is rendered by the current provider. Add an application error boundary if you need custom recovery or diagnostics.

Query with a hook

useAxiomQuery takes a generated AxiomQueryDef, not an arbitrary function. It returns data, isLoading, isFetching, source, error, the raw state, and refetch.

import { useAxiomQuery } from 'atmx-react';
import { sdk } from './generated/sdk';

function Profile({ id }: { id: number }) {
  const query = useAxiomQuery(sdk.users.getUser({ id }));

  if (query.isLoading) return <p>Loading…</p>;
  if (query.error) return <p>{query.error.message}</p>;
  if (!query.data) return null;

  return <h2>{query.data.name}</h2>;
}

The precise generated factory may differ with the contract and generator version. TypeScript output is authoritative.

Compose query state

AxQuery supplies its state to nested ATMX components and also supports a render function:

<AxQuery call={sdk.users.getUser({ id: 42 })}>
  {({ data, state, refetch }) => (
    <section>
      {state.status === 'error' && <p>{state.error?.message}</p>}
      {data && <h2>{data.name}</h2>}
      <button onClick={refetch}>Refresh</button>
    </section>
  )}
</AxQuery>

Browser and security checks

• serve the Wasm asset and contract from origins allowed by your application;
• configure backend CORS for the browser origin;
• provide paired signature and public-key proof when the config declares a signed contract;
• keep bearer or API tokens in application-controlled memory or secure session handling, not generated source; and
• test hydration with an empty and populated sessionStorage cache.

Do not describe Wasm as a security sandbox for untrusted generated JavaScript. Application code, the ATMX layer, and the browser origin remain part of the client trust boundary.