Concorde functional component — Fetch. sonic-fetch sends a GET request to serviceURL + endPoint and publishes the response under dataProvider, so its children and any subscriber of that provider can render it. In a Lit component, prefer th Doc ID: core/components/functional/fetch/fetch. Keywords: Concorde, supersoniks, core/components/functional/fetch/fetch, fetch, Fetch, functional component, sonic-fetch, web component, serviceURL, endPoint, dataProvider. URL: https://concorde.supersoniks.org/core/components/functional/fetch.

Fetch

sonic-fetch sends a GET request to serviceURL + endPoint and publishes the response under dataProvider, so its children and any subscriber of that provider can render it. In a Lit component, prefer the @get decorator; for collections, use List or Queue.

Basic example

dataProvider is required; serviceURL and dataProvider can be set on an ancestor. Children are hidden while the request is pending. With no serviceURL, requests go to the page origin.

<sonic-fetch serviceURL="/docs-mock-api" endPoint="flights?direction=departures" dataProvider="docsFetchNextDeparture" key="flights.0">
      <p data-bind ::inner-html="Next departure: <b>$code</b> to $city, gate $gate"></p>
    </sonic-fetch>

Data provider as endpoint

With no endPoint, the dataProvider value is used as the endpoint.

<sonic-fetch serviceURL="/docs-mock-api" dataProvider="flights?direction=arrivals" key="flights.0">
      <p data-bind ::inner-html="Next arrival: <b>$code</b> from $city at $time"></p>
    </sonic-fetch>

Key

key keeps only part of the response, using a dot path: with { "flights": [ … ] } and key="flights.1", the provider holds the second flight. Add preserveOtherKeys to merge the target into the parent object instead of dropping its siblings. With no key, the whole response is published.

<sonic-fetch serviceURL="/docs-mock-api" endPoint="flights?direction=departures" dataProvider="docsFetchKey" key="flights.1">
      <p data-bind ::inner-html="$code to $city ($airport), status $status"></p>
    </sonic-fetch>

Loader and skeleton

With no loader, nothing is shown during the request. Set loader (fixed overlay) or loader="inline" to show a Loader, or add a <template skeleton> child rendered in place of the content while loading.

<sonic-fetch loader="inline" serviceURL="/docs-mock-api" endPoint="flights?direction=arrivals" dataProvider="docsFetchLoader" key="flights.2">
      <template skeleton>
        <p class="text-neutral-400">Loading arrivals…</p>

Text responses

When the response type starts with text/, the provider holds { text: "…" }.

<sonic-fetch endPoint="robots.txt" dataProvider="docsFetchText">
      <pre class="max-h-40 overflow-auto text-xs" data-bind ::inner-html="$text"></pre>
    </sonic-fetch>

Reloading

endPoint is reactive: changing it fetches again. Call invalidate() on the publisher to reload the same endpoint, or set refetchEveryMs to poll. A request that fails with no data shows an error toast.

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

PublisherManager.get("docsFetchNextDeparture").invalidate();

API reference