# 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](/docs/decorators/get) decorator; for collections, use [List](/core/components/functional/list) or [Queue](/core/components/functional/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-code>
  <template>
    <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>
  </template>
</sonic-code>

## Data provider as endpoint

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

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## 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-code>
  <template>
    <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>
  </template>
</sonic-code>

## Loader and skeleton

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

<sonic-code>
  <template>
    <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>
      </template>
      <p data-bind ::inner-html="<b>$code</b> from $city: $status"></p>
    </sonic-fetch>
  </template>
</sonic-code>

## Text responses

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

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

## 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.

<sonic-code language="typescript">
  <template>
import { PublisherManager } from "@supersoniks/concorde/utils";

PublisherManager.get("docsFetchNextDeparture").invalidate();
  </template>
</sonic-code>

## API reference

| Attribute | Values | Description |
|-----------|--------|-------------|
| `dataProvider` | string | **Required.** Publisher that receives the data. Also the endpoint when `endPoint` is empty. Inherited from ancestors |
| `serviceURL` | URL (default page origin) | Base URL of the API. Inherited from ancestors |
| `endPoint` | string | Path appended to `serviceURL`. Reactive |
| `key` | dot path | Part of the response to publish |
| `preserveOtherKeys` | boolean | With `key`, keeps the sibling properties of the target |
| `loader` | `fixed` (when empty) · `inline` | Loader shown during the request. None by default |
| `lazyload` | boolean | Fetches when the element nears the viewport |
| `lazyBoundsRatio` | number (default `1`) | Viewport ratio used as margin by `lazyload` |
| `refetchEveryMs` | number (default `0`) | Polling interval in milliseconds; `0` disables it |
| `headersDataProvider` | string | Publisher whose data is sent as request headers. Inherited from ancestors |
| `token` | string | Bearer token. Inherited from ancestors |
| `userName` · `password` · `tokenProvider` | string | Basic auth used to get a token from `tokenProvider` when no `token` is set. Inherited from ancestors |
| `credentials` | `omit` · `same-origin` · `include` | `fetch` credentials mode. Inherited from ancestors |
| `cache` | `RequestCache` value | `fetch` cache mode |
| `addHTTPResponse` | boolean | Adds the HTTP response as `_sonic_http_response_` on the data. Inherited from ancestors |
| `localStorage` | `disabled` (default) · `enabled` | Persists the publisher in `localStorage` |

| Slot | Description |
|------|-------------|
| *(default)* | Content, hidden while the request is pending |

| Event | Description |
|-------|-------------|
| `loading` | The request starts |
| `load` | The data is published |