17-7 Fonction creer() de ProjetService

Il nous faudra faire une requête d'API de type POST pour créer une nouvelle entrée dans Supabase.

Nous avons déjà un service qui contient des méthodes pour obtenir tous les projets ou un projet individuel, mais créons une nouvelle fonction pour créer un projet.

Ajouter creer() à ProjetService et définir l'URL de base

Pour une requête POST de création de ressource, la convention REST recommande une requête vers la racine de la collection (/projets).

De plus, la fonction retournera un Projet (le projet nouvellement créé) sous forme de Promise puisqu'il s'agit d'une fonction asynchrone.

src/app/core/services/projet-service.ts

//...

  async creer(projet: ProjetCreerRequete): Promise<Projet> {
    const url = "/projets";
  }

//...

Préparer la requête Supabase

Ensuite, on peut exécuter la requête. Le format est sensiblement le même que pour get, la différence étant qu'on envoie un objet en paramètre et qu'on soit spécifier Prefer: return=representation afin que l'objet nous soit retourné.

src/app/core/services/projet-service.ts

async creer(projet: ProjetCreerRequete): Promise<Projet> {
  const url = "/projets";
  const config: AxiosRequestConfig = {
    headers: {
      'Accept': 'application/vnd.pgrst.object+json',
      'Prefer': 'return=representation'
    }
  }
}

Effectuer la requête axios

La requête axios est sensiblement sous le même format que les autres, mais la fonction appelée sera post et prendra en argument le body de la requête.

1. Appelez post sur la variable api permettant de faire des appels d'API en passant l'URL, ainsi que l'objet de requête.
   src/app/core/services/projet-service.ts

   async creer(projet: ProjetCreerRequete): Promise<Projet> {
     const url = "/projets";
     const config: AxiosRequestConfig = {
       headers: {
         'Accept': 'application/vnd.pgrst.object+json',
         'Prefer': 'return=representation'
       }
     }
   
     const reponse = await api.post(url, projet, config)
   }

   info

   On passe à la requête projet, soit le corps de la requête, en plus de passer l'objet de configuration.

2. Typez le retour de l'API pour un <Projet>.
   src/app/core/services/projet-service.ts

   async creer(projet: ProjetCreerRequete): Promise<Projet> {
     const url = "/projets";
     const config: AxiosRequestConfig = {
       headers: {
         'Accept': 'application/vnd.pgrst.object+json',
         'Prefer': 'return=representation'
       }
     }
   
     const reponse = await api.post<Projet>(url, projet, config)
   }

3. Finalement, on retourne data sur la réponse, soit le body de la réponse.
   src/app/services/projet.service.ts

   async creer(projet: ProjetCreerRequete): Promise<Projet> {
     const url = "/projets";
     const config: AxiosRequestConfig = {
       headers: {
         'Accept': 'application/vnd.pgrst.object+json',
         'Prefer': 'return=representation'
       }
     }
   
     const reponse = await api.post<Projet>(url, projet, config)
     
     return reponse.data;
   }