Table of Contents

Observable Queries

Observable queries provide real-time updates in React through useObservableQuery() and generated proxy helpers. Arc supports both centralized hub routing and direct per-query connections.

For backend implementation patterns, see Controller-based Observable Queries, Model-bound Observable Queries, and Observable Query Hub.

Observable Query Transport

By default, observable queries connect through centralized hub endpoints. Two props on the <Arc> component control this behavior.

queryTransportMethod

Selects the transport protocol used for the hub connection.

Value Description
QueryTransportMethod.ServerSentEvents SSE hub — one EventSource per query, routed through /.cratis/queries/sse (default).
QueryTransportMethod.WebSocket WebSocket hub transport. 
import { Arc } from '@cratis/arc.react';
import { QueryTransportMethod } from '@cratis/arc/queries';

export const App = () => (
    <Arc
        microservice="my-app"
        queryTransportMethod={QueryTransportMethod.ServerSentEvents}
    >
        <MyRoutes />
    </Arc>
);

queryDirectMode

Controls whether observable queries connect directly to each query's own URL or route through the centralized hub.

  • When false (default): queries are routed through the centralized hub endpoint (/.cratis/queries/sse or /.cratis/queries/ws depending on queryTransportMethod).
  • When true: each observable query opens its own connection directly to the per-query URL, bypassing the hub entirely. This is useful during local development or when connecting to services that do not expose the centralized hub.
import { Arc } from '@cratis/arc.react';

export const App = () => (
    <Arc
        microservice="my-app"
        queryDirectMode={true}
    >
        <MyRoutes />
    </Arc>
);
Prop Type Default Description
queryTransportMethod QueryTransportMethod ServerSentEvents Transport used for observable query connections.
queryDirectMode boolean false When true, bypasses the hub and connects directly per query.