Aller au contenu principal

32-1 Refactoring et premier essai

attention

Cette portion des modifications est effectuée dans l'application client Angular!

Vous pouvez ouvrir une autre fenêtre de projet WebStorm avec le projet Angular afin de pouvoir exécuter et modifier les deux en parallèle.

Votre projet Houdini n'a pas à être complet. Tant et aussi longtemps que vous avez fait le niveau permettant d'afficher les projets sur la page d'accueil, c'est suffisant.

Refactor de la config api axios​

Pour ne pas affecter l'entièreté du projet par le changement d'URL d'API et permettre une transition graduelle, nous allons renommer la config axios api par une config supabase-api. En utilisant le refactor de WebStorm, cela aura comme conséquence de renommer l'utilisation de cette variable dans le projet en entier.

Donc, les appels d'API à Supabase utiliseront la configuration supabaseApi. Vous pourrez remplacer graduellement les appels d'API par des appels utilisant votre serveur.

Tel que mentionné, on peut utiliser la fonctionnalité de refactoring de WebStorm pour cette tâche.

  1. Clic droit sur src/app/core/http/api.ts
  2. Refactor -> Rename
  3. Renommer pour supabase-api.ts
  4. Appuyer sur Refactor
  5. Lorsque demandé Do you also want to rename the constant, sélectionnez Yes.
  6. Appuyez sur Do Refactor dans la fenêtre qui vient de s’ouvrir dans le bas Imgur

Vous pouvez vérifier que tout est toujours fonctionnel dans votre projet Houdini. L'impact principal de ce changement est que maintenant les appels d'API dans les services font usage de subabaseApi plutôt que api.

src/app/core/services/projet-service.ts
  async obtenirTous(): Promise<Projet[]> {
    const url = "/projets";

    let reponse = await supabaseApi.get<Projet[]>(url);
    return reponse.data;
  }

Créer une nouvelle config d'API​

Ensuite, créons la configuration d'API pour communiquer avec l'API développée à l'aide de Nest

  1. Clic droit sur le dossier src/app/core/http
  2. New -> TypeScript file
  3. Nommez le fichier api.ts
  4. Ajoutez une config de base pointant sur l'URL de votre projet Nest, soit http://localhost:3000
    src/app/core/http/api.ts
    import axios from "axios";

    export const api = axios.create({
      baseURL: 'http://localhost:3000',
    });

Modifier obtenirTous() de ProjetService​

Normalement, le chemin utilisé par le service devrait être /projets, faisant en sorte de construire l'URL de destination complète http://localhost:3000/projets. Cela est parfait, mais le service fait usage de supabaseApi.

Pour utiliser votre api, utilisez la variable de configuration api lors de l'appel d'API.

src/app/core/services/projet-service.ts
async obtenirTous(): Promise<Projet[]> {
  const url = "/projets";

  let reponse = await api.get<Projet[]>(url);
  return reponse.data;
}

Démarrer et accéder à l'application client​

Démarrez l'application client Angular et le serveur côte à côte et chargez la page d'accueil de Houdini.

http://localhost:4200

Malheureusement, ça ne fonctionne pas ☹️

Vous verrez dans la console une ou plusieurs erreurs de ce genre:

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://localhost:3000/projets. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant. Code d’état : 404.

Ce qu'on doit en comprendre, c'est que le navigateur ne nous permet pas la requête à l'API (Cross-Orign Request Blocked) pour des raisons de sécurité.