Core Query Usage

Use generated query proxies to retrieve data in React with strong typing and predictable state.

Proxy Generation

Arc generates query proxies from backend queries (controller-based and model-bound). These proxies expose static React helpers such as .use() and .useWithPaging().

See Backend Proxy Generation for setup details.

Basic Query Hook

From a React component, call the generated static use() method:

export const MyComponent = () => {
    const [accounts, queryAccounts] = AllAccounts.use();

    return (
        <>
        </>
    );
};

All results are strongly typed from backend metadata.

Return Tuple

For standard request/response queries, the tuple contains two elements:

Query result
Delegate for issuing the query again

Observable queries differ and are covered in Observable Queries.

QueryResultWithState

The query result type in React is QueryResultWithState, which extends QueryResult with React-focused state.

From QueryResult:

Property	Description
`data`	The actual data returned in the expected type.
`isSuccess`	Whether the query completed successfully.
`isAuthorized`	Whether the query was authorized.
`isValid`	Whether the query input was valid.
`validationResults`	Validation errors returned by the backend.
`hasExceptions`	Whether exceptions were returned.
`exceptionMessages`	Exception messages from the backend.
`exceptionStackTrace`	Exception stack trace when available.
`paging`	Paging metadata (page, size, totals) when paging is enabled.

Additional properties from QueryResultWithState:

Property	Description
`hasData`	Whether the result currently holds data.
`isPerforming`	Whether the query is currently fetching data.

Query Parameters

Queries can expose parameters through backend attributes (for example [FromQuery] and route parameters). These become typed arguments on generated proxies.

[HttpGet("starting-with")]
public IEnumerable<DebitAccount> StartingWith([FromQuery] string? filter)
{
    var filterDocument = Builders<DebitAccount>
        .Filter
        .Regex("name", $"^{filter ?? string.Empty}.*");

    return _collection.Find(filterDocument).ToList();
}

Use the parameterized proxy from React:

export const MyComponent = () => {
    const [accounts, queryAccounts] = StartingWith.use({ filter: '' });

    return (
        <>
        </>
    );
};

HTTP Headers

Queries automatically include HTTP headers from the httpHeadersCallback configured in Arc. This lets you attach auth tokens, cookies, or custom headers for every query call without per-query setup.