Table of Contents

Queries

Queries in the frontend is divided into the following:

  • The underlying IQueryFor<>, IObservableQueryFor<> interfaces
  • The React hooks; useQuery() and `useObservableQuery()``
  • Proxy generator that generates TypeScript from the C# code to leverage the constructs.

Proxy Generation

Starting with the latter; the proxy generator you'll get the queries generated directly to use in the frontend. The proxies generated can be imported directly into your code.

Query

From a React component you can now use the static use() method:

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

    return (
        <>
        </>
    )
};

Note: All data resulting from a query will be strongly typed based on the metadata provided by the proxy generator. You can read more about how serialization works here.

Return tuple

If the query is a regular request / response type of query, the tuple returned contains two elements. If it is an observable query, it only returns the first element of the tuple.

The return values are:

  • The query result
  • Delegate for issuing the query again

QueryResultWithState

The query result returned is a type called QueryResultWithState this is a sub type of QueryResult adding properties that are relevant when working in React.

From the base QueryResult one gets the following properties:

Property Description
data The actual data returned in the type expected.
isSuccess Boolean telling whether or not the query was successful or not.
isAuthorized Boolean telling whether or not the query was authorized or not.
isValid Boolean telling whether or not the query was valid or not.
ValidationResult Collection with any validation errors.
hasExceptions Boolean telling whether or not the query had exceptions or not.
exceptionMessages Collection with any exception messages.
exceptionStackTrace The stack trace for the exception if there was one.
paging Contains paging information, with current page number, page size, total number of items and total number pages

On top of this QueryResultWithState adds the following properties:

Property Description
hasData Boolean indicating whether or not there is data in the result.
isPerforming Boolean that is true when an operation is working to get data from the server.

Parameters

Queries can have parameters they can be used for instance for filtering. Lets say you have a query called StartingWith:

[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();
}

The filter parameter will be part of the generated proxy, since it has the [FromQuery] attribute on it. Using the proxy requires you to now specify the parameter as well:

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

    return (
        <>
        </>
    )
};

Note: Route values will also be considered parameters and generated when adorning a method parameter with [HttpPost].