Concorde decorator — @get. @get(endpoint) runs an HTTP GET on an Endpoint and stores the full ApiResult<T> in a property, or passes it to a method. It runs again when the endpoint's placeholders or the API configuration change, Doc ID: docs/decorators/get. Keywords: Concorde, supersoniks, docs/decorators/get, get, @get, decorator, @get(endpoint), ApiResult, refetch, undefined, result, ), , (the HTTP response) and , . It is reset to , serviceURL. URL: https://concorde.supersoniks.org/docs/decorators/get.

@get

@get(endpoint) runs an HTTP GET on an Endpoint and stores the full ApiResult<T> in a property, or passes it to a method. It runs again when the endpoint's placeholders or the API configuration change, and on demand through refetch. For writes, see @post, @put and @patch.

Import

import { get, Endpoint, type ApiResult } from "@supersoniks/concorde/decorators";

type FlightBoard = { flights: Flight[] };
const departuresEndpoint = new Endpoint<FlightBoard>("flights?direction=departures");

@get(departuresEndpoint)
@state()
departures?: ApiResult<FlightBoard>;

Property

The property is undefined until the first response, then holds result (typed T), response (the HTTP response) and request. It is reset to undefined when the component disconnects.

Without a configuration key, serviceURL and the token are read from the HTML scope: place the component under an element that sets them (see API configuration). The GET waits until serviceURL is available.

<docs-demo-sources for="demo-api-get"></docs-demo-sources>
    <demo-api-get></demo-api-get>

Method

Decorate a method to receive the ApiResult<T> after each GET instead of storing it.

@get(departuresEndpoint)
onDepartures(payload?: ApiResult<FlightBoard>) {
  this.boarding = payload?.result?.flights.filter((f) => f.status === "boarding") ?? [];
}

<docs-demo-sources for="demo-api-get-method"></docs-demo-sources>
    <demo-api-get-method></demo-api-get-method>

Configuration key

Pass a DataProviderKey<APIConfiguration> as the second argument to read the configuration from the store instead of the HTML scope. Any change to that publisher runs the GET again.

import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
import type { APIConfiguration } from "@supersoniks/concorde/utils/api";

const flightsApi = new DataProviderKey<APIConfiguration>("flightsApi");

@get(departuresEndpoint, flightsApi)
@state()
departures?: ApiResult<FlightBoard>;

Dynamic endpoint

${prop} placeholders in the endpoint resolve from properties of the same component; each change runs a new GET. While a placeholder is null or undefined, no request is sent and the property is undefined. Rules: Dynamic paths.

const boardEndpoint = new Endpoint<FlightBoard, { direction: string }>(
  "flights?direction=${direction}",
);

@property() direction = "departures";

@get(boardEndpoint, flightsApi)
@state()
board?: ApiResult<FlightBoard>;

<docs-demo-sources for="demo-api-get-configuration-key"></docs-demo-sources>
    <demo-api-get-configuration-key></demo-api-get-configuration-key>

Refetch

Keep the decorator in a constant to reuse it. refetch(component) runs the GET for that instance only and resolves with the new ApiResult<T> (or undefined).

const departuresGet = get(departuresEndpoint);

@departuresGet
@state()
departures?: ApiResult<FlightBoard>;

async refresh() {
  await departuresGet.refetch(this);
}

@refetch(handle) does the same around a method. By default the GET runs after the method (and after its Promise, if it returns one); use { when: "before" } to run it first. The method call resolves once the GET is done.

import { refetch } from "@supersoniks/concorde/decorators";

@refetch(departuresGet)
async showArrivals() {
  this.direction = "arrivals";
}

Polling and triggers

refetchEveryMs runs the GET again that many milliseconds after each response (default 0: off). triggerKey runs it whenever another component calls invalidate() on that publisher.

import { dp } from "@supersoniks/concorde/utils";

const boardRefresh = new DataProviderKey<number>("boardRefresh");

@get(departuresEndpoint, { refetchEveryMs: 30000, triggerKey: boardRefresh })
@state()
departures?: ApiResult<FlightBoard>;

// anywhere else
dp(boardRefresh).invalidate();

API reference

options is the second argument, or the third when a configurationKey is passed. The returned decorator exposes refetch(component): Promise<ApiResult<T> | undefined>.