32-3 Format de requête Supabase vs. votre API

Un des avantages de développer sa propre API, c'est qu'on en possède le plein contrôle!

Observez la requête pour obtenir un élément à l'aide de Supabase. Particulièrement params:

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

async obtenir(id: number): Promise<Projet> {
  const url = "/projets";
  const config: AxiosRequestConfig = {
    params: {
      id: `eq.${id}`
    },
    headers: {
      'Accept': 'application/vnd.pgrst.object+json'
    }
  }

  try {
    const reponse = await supabaseApi.get<Projet>(url, config);
    return reponse.data;
  } catch (error) {
    if(isAxiosError(error) && error.response?.status === 406) {
      throw new NotFoundError();
    }
    throw error;
  }
}

Cela n'est plus nécessaire puisque notre API utilise des URL du type /projets/:id.

Ainsi, on peut remplacer par:

async obtenir(id: number): Promise<Projet> {
  const url = `/projets/${id}`;

  try {
    const reponse = await api.get<Projet>(url);
    return reponse.data;
  } catch (error) {
    if(isAxiosError(error) && error.response?.status === 406) {
      throw new NotFoundError();
    }
    throw error;
  }
}

Gestion de l'erreur 404

Notre API retourne maintenant une bonne vieille erreur 404 lorsque l'élément n'existe pas, eh bien on peut modifier notre code client en conséquence:

async obtenir(id: number): Promise<Projet> {
  const url = `/projets/${id}`;

  try {
    const reponse = await api.get<Projet>(url);
    return reponse.data;
  } catch (error) {
    if(isAxiosError(error) && error.response?.status === 404) {
      throw new NotFoundError();
    }
    throw error;
  }
}

Retrait des headers Accept et Prefer

Notez que les en-têtes suivantes, dans créer et modifier...

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

  //...

... ne sont plus nécessaires. Notre API retourne automatiquement le nouvel objet créé!