Concorde functional component — Fetch. > New apps: prefer @get for a typed GET on a component, or List / Queue with fetch for collections. Use Local API demos (serviceURL="/docs-mock-api") to try examples offline. Doc ID: core/components/functional/fetch/fetch. Keywords: Concorde, supersoniks, core/components/functional/fetch/fetch, fetch, Fetch, functional component, sonic-fetch, web component, serviceURL="/docs-mock-api", {my:{data:{a:1,b:2}}}, key="my.data", {a:1 , b:2}. URL: https://concorde.supersoniks.org/crawl/core/components/functional/fetch/fetch.html.

Fetch

New apps: prefer @get for a typed GET on a component, or List / Queue with fetch for collections. Use Local API demos (serviceURL="/docs-mock-api") to try examples offline.

The sonic-fetch component requests and stores API data. It extends the Fetcher and Subscriber mixins.

Basic usage

In order to work properly the sonic-fetch component needs at least the following attributes.

• serviceURL : A base service url. This attribute can be inherited from an ancestor. ex : /docs-mock-api
• endPoint : the specific location where requests for information are sent (see the api docs).
  ex : api/users | api/users?page=2 | api/users/2
• dataProvider (Required) : An ID that is used as a reference to the object storing the data returned by the API. This attribute can be inherited from an ancestor.

<sonic-fetch serviceURL="/docs-mock-api" endPoint="api/users?page=2" dataProvider="myDataObj"></sonic-fetch>
    <sonic-button dataProvider="myDataObj" debug>Hover to see the data</sonic-button>

DataProvider as an endPoint

If no endPoint is specified it will be filled by the dataProvider ID instead

<sonic-fetch serviceURL="/docs-mock-api" dataProvider="api/users?page=2" ></sonic-fetch>
    <sonic-button dataProvider="api/users?page=2" debug>Hover to see the data</sonic-button>

HeadersDataProvider

Deprecated

Key

When the key attribute is present, only a sub-part of the data received is injected into the dataProvider. We can use the dot syntax to target what we want to keep.

For example if the data is {my:{data:{a:1,b:2}}} and the key is key="my.data", the data available in the dataProvider will be {a:1 , b:2}

<sonic-fetch serviceURL="/docs-mock-api" dataProvider="api/users/2" ></sonic-fetch>
    <sonic-button dataProvider="api/users/2" debug>dataProvider object</sonic-button>
    <!-- Get the user ID -->
    <sonic-fetch serviceURL="/docs-mock-api" dataProvider="id" endPoint="api/users/2" key="data.id"></sonic-fetch>
    <sonic-button dataProvider="id" debug>data.id</sonic-button>
    <!-- Get the user First name -->
    <sonic-fetch serviceURL="/docs-mock-api" dataProvider="first_name" endPoint="api/users/2" key="data.first_name"></sonic-fetch>
    <sonic-button dataProvider="first_name" debug>data.first_name</sonic-button>
    <!-- Get the user Last name -->
    <sonic-fetch serviceURL="/docs-mock-api" dataProvider="last_name" endPoint="api/users/2" key="data.last_name"></sonic-fetch>
    <sonic-button dataProvider="last_name" debug>data.last_name</sonic-button>
    <!-- Get the user email -->
    <sonic-fetch serviceURL="/docs-mock-api" dataProvider="email" endPoint="api/users/2" key="data.email"></sonic-fetch>
    <sonic-button dataProvider="email" debug>data.email</sonic-button>

Text mode

if the mime type of the content returned by the service begins with text/, then the dataProvider has a key named "text" which contains the text returned by the service.

<sonic-fetch endPoint="README.md" dataProvider="fetchText"></sonic-fetch>
    <sonic-button dataProvider="fetchText" debug>Hover to see the data</sonic-button>

NoLoader

The noLoader attribute disables display of the default loader

<sonic-fetch noLoader serviceURL="/docs-mock-api" endPoint="api/users?page=2" dataProvider="myDataObj"></sonic-fetch>
    <sonic-button dataProvider="myDataObj" debug>Basic fetch with noLoader attribute</sonic-button>