# Fetch
The **sonic-fetch** component is used to request and store data from an API.
Fetch extends the mixins Fetcher and [Subscriber](#docs/_core-concept/subscriber.md/subscriber)





## Basic usage
In order to work properly the <b>sonic-fetch</b> component needs at least the following attributes.  
- **serviceURL** : A base service url. This attribute can be inherited from an ancestor.
  *ex : https://reqres.in*
- **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-code>
  <template>
    <sonic-fetch serviceURL="https://reqres.in" endPoint="api/users?page=2" dataProvider="myDataObj"></sonic-fetch>
    <sonic-button dataProvider="myDataObj" debug>Hover to see the data</sonic-button>
  </template>
</sonic-code>

## DataProvider as an endPoint
If no **endPoint** is specified it will be filled by the **dataProvider ID** instead  

<sonic-code>
  <template>
    <sonic-fetch serviceURL="https://reqres.in" dataProvider="api/users?page=2" ></sonic-fetch>
    <sonic-button dataProvider="api/users?page=2" debug>Hover to see the data</sonic-button>
  </template>
</sonic-code>

## HeadersDataProvider

<sonic-alert status="error" background>Deprecated</sonic-alert>

## 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-code>
  <template>
    <sonic-fetch serviceURL="https://reqres.in" dataProvider="api/users/2" ></sonic-fetch>
    <sonic-button dataProvider="api/users/2" debug>dataProvider object</sonic-button>
    <!-- Get the user ID -->
    <sonic-fetch serviceURL="https://reqres.in" 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="https://reqres.in" 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="https://reqres.in" 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="https://reqres.in" dataProvider="email" endPoint="api/users/2" key="data.email"></sonic-fetch>
    <sonic-button dataProvider="email" debug>data.email</sonic-button>
  </template>
</sonic-code>

## 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-code>
  <template>
    <sonic-fetch endPoint="README.md" dataProvider="fetchText"></sonic-fetch>
    <sonic-button dataProvider="fetchText" debug>Hover to see the data</sonic-button>
  </template>
</sonic-code>

## NoLoader

The noLoader attribute disables display of the default loader

<sonic-code>
  <template>
    <sonic-fetch noLoader serviceURL="https://reqres.in" endPoint="api/users?page=2" dataProvider="myDataObj"></sonic-fetch>
    <sonic-button dataProvider="myDataObj" debug>Basic fetch with noLoader attribute</sonic-button>
  </template>
</sonic-code>




<!--
 ## Summary
 Extends mixins : Fetcher, [Subscriber](#core/components/functional/subscriber/subscriber.md/subscriber)
 
 ### Configuration via les attributs

| nom          | sur quelle balise | Description | Exemple de valeur | défaut / requis |
|-----|-----|---|---|---|
| serviceURL   |Fetcher ou un de ses parents | URL de base des services. | http://la-billetterie.net/api/v2 | domain du site |
| endpoint   |Fetcher | point d'accès d'un service | user/2 | valeur de l'attribut dataProvider |
| dataProvider  |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données, voir [subscriber](#core/components/functional/subscriber/subscriber.md/subscriber). | billetterie/user/2 | *REQUIS* |
| headersDataProvider  |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données destinées à être envoyées en entêtes de la requetes | MyCoockieHEaders | null |
| key  |Fetcher  | extrait une sous propriété de la donnée chargée avant de l'assignée à son publisher | ma.data | null |

 *Si la données est `{ma:{data:{a:1,b:2}}}` et `key="ma.data"`, la données disponible dans le composant sera `{a:1, b:2}`*
 
 ### Intégration auto de basic auth (pour tester une api qui nécessite une authentification) 

 Fetch utilise le service pour générer le token et l'ajoute au header de l'appel qui récupère les données.

| nom           | sur quelle balise | Description | Exemple de valeur | défaut / requis |
|-----|-----|---|---|---|
| userName      | Fetcher ou un de ses parents | Nom de l'utilisateur | DjuDju | null |
| password      | Fetcher ou un de ses parents | mot de passe | pom_549 | null |
| tokenProvider | Fetcher ou un de ses parents | point d'accès du service fournissant le token | auth | null |
| token | Fetcher ou un de ses parents | A fournir à la place des autres attributs si on le possède | q<d34gb | null |

 ### Autres choses utiles
 L'attribut *noLoader* du composant permet de désactiver l'affichage du loader par défaut.
 On peut appeler la methode invalidate() sur le publisher associé au  composant pour declencher le rechargement des données.
 endPoint est une propriété réctive, par conséquent, sa modification, manuelle via template ou data binbding provoque la mise à jour du contenu.
-->