Fermer

février 13, 2020

Comment faire une requête GraphQL


Apollo Angular vous permet d'extraire des données de votre serveur GraphQL et de les utiliser dans la création d'interfaces réactives à l'aide du framework Angular. Dans cet article, je vais vous montrer comment créer une requête GraphQL dans Angular à l'aide d'Apollo Angular.

GraphQL est une spécification qui définit un système de type, un langage de requête et un langage de schéma pour la création d'API Web. La spécification est indépendante du langage, mais dans cet article, vous utiliserez une API GraphQL intégrée à JavaScript pour créer une application angulaire qui communiquera avec l'API. Nous travaillerons avec Apollo Angular qui est une intégration client Apollo pour Angular. Il vous permet d'interroger n'importe quel serveur GraphQL et de créer une interface utilisateur réactive à l'aide du cadre angulaire.

Ce que nous allons construire

Nous allons créer une application angulaire qui peut interroger et créer des livres. Nous utiliserons un serveur GraphQL déjà construit que vous pouvez télécharger sur GitHub puis suivez les instructions de configuration pour le configurer et le démarrer.

Prérequis

Cet article suppose une certaine connaissance de GraphQL , Angular et comment travailler avec la CLI Angular. Si vous ne les connaissez pas, je vous ai couvert! J'ai récemment écrit sur les concepts fondamentaux GraphQL et comment construire une API GraphQL . Cela vous aidera à travers la spécification et le langage de requête. J'ai également écrit sur Angular et comment utiliser la CLI . Si vous êtes à l'aise avec ceux-ci, vous pouvez continuer à lire.

Ajout du client Angular Apollo

Nous allons commencer maintenant avec l'application Angular. Nous travaillerons avec une application angulaire amorcée. L'application a déjà configuré le bootstrap avec un en-tête de navigation. Suivez les instructions ci-dessous pour le configurer.

  1. Ouvrez votre application de ligne de commande et basculez vers le répertoire dans lequel vous souhaitez conserver l'application.
  2. Exécutez git clone https://github.com/pmbanugo /graphql-angular-intro.git pour cloner le référentiel.
  3. Exécutez cd graphql-angular-intro pour basculer vers le répertoire du projet.
  4. Exécutez git checkout base pour basculer vers le répertoire de base sur lequel le bootstrap, un composant home et le routage sont activés.
  5. Exécutez npm install pour installer les dépendances.

Pour ajouter Angular Apollo au projet, nous ' ll utilise la commande ng add . Pendant que vous êtes toujours sur la ligne de commande, exécutez la commande ng add apollo-angular pour ajouter la bibliothèque au projet. Cela installera les dépendances nécessaires et modifiera également le projet en ajoutant un module nommé graphql.module.ts .

Nous devons définir l'URL du serveur GraphQL dans le GraphQLModule module. Ouvrez src / app / graphql.module.ts et modifiez la valeur de la variable uri comme suit:

 const uri = "http: // localhost: 4000";

Récupération des données

Vous avez installé le client Angular Apollo et l'avez configuré avec la façon dont il doit initialiser le client et quel est le point de terminaison pour le serveur. L'étape suivante consiste à interroger le serveur pour récupérer des données. Pour ce faire, utilisez le service Apollo . Ce service est un service Angular régulier qui est utilisé pour interroger l'API, avec les données renvoyées diffusées via Observables.

Nous utiliserons le service Apollo pour récupérer des données et les afficher dans l'accueil . composant. Ouvrez src / app / home / home.component.html et ajoutez-y les instructions d'importation ci-dessous.

 import {Apollo} de "apollo-angular";
importer gql depuis "graphql-tag";

Remplacer le code de la ligne 11 par l'énoncé suivant:

 books: any [];
chargement = vrai;

constructeur (apollo privé: Apollo) {}

Nous avons mis à jour le constructeur afin que le service Apollo puisse être injecté et créé une variable pour contenir les données renvoyées.

Nous allons maintenant utiliser le service Apollo pour récupérer des données. Copiez et collez l'instruction de code ci-dessous dans la fonction ngOnInit .

 ngOnInit () {
    this.apollo
      .query  ({
        requête: gql`
          {
            livres {
              Titre
              auteurs {
                Nom
              }
            }
          }
        "
      })
      .souscrire(
        ({data, loading}) => {
          this.books = data && data.books;
          this.loading = chargement;
        }
      );
}

Nous utilisons apollo.query () pour demander des données, avec la requête spécifiée comme paramètre de la fonction. Nous utilisons la fonction gql de la bibliothèque graphql-tag pour analyser la requête en tant que document GraphQL pour le client Apollo. La fonction renvoie un observable que nous appelons subscribe afin de récupérer les données.

Ajoutez la fonction suivante qui sera utilisée pour découper le tableau des auteurs dans une chaîne.

 getAuthorNames ( auteurs) {
    si (auteurs.longueur> 1)
        return auteurs.reduce ((acc, cur) => acc.name + "," + cur.name);
    sinon retourner les auteurs [0] .name;
}

Mettez à jour le modèle du composant dans home.component.html avec ce qui suit:

Livres

Chargement ...
       
Titre Auteurs
{{book.title}} {{getAuthorNames (book.authors)}}

Avec cela, lorsque le composant est chargé, la requête est envoyée au serveur et la page affiche le Chargement ... message. Lorsque les données sont prêtes, elles sont ensuite affichées dans le tableau.

Requête pour un seul livre

L'API GraphQL que nous utilisons a une requête qui vous permet de demander un livre par son ID. La requête GraphQL pour cela prend un argument qui spécifie l'ID du livre à récupérer. Nous allons implémenter une autre page qui permettra à un utilisateur d'entrer l'ID du livre dans un champ de saisie, avec un bouton qui, lorsqu'il est cliqué, fera la demande au serveur et le résultat sera affiché sur la page.

Nous allons ajoutez un nouveau composant pour cette fonctionnalité. Ouvrez la ligne de commande et exécutez la commande ng g c find --module . Ouvrez src / app.module.ts et mettez à jour les itinéraires pour inclure un chemin vers / find .

 const routes: Routes = [
  { path: "find", component: FindComponent },
  { path: "", component: HomeComponent },
  { path: "**", redirectTo: "/", pathMatch: "full" }
];

N'oubliez pas d'ajouter la déclaration d'importation pour FindComponent .

Ouvrez find.component.html et insérez-y le code ci-dessous.

find book [19659044] Entrez l'ID du livre


Chargement ...
{{error}}

Titre: {{book.title}}

Pages: {{book.pages}}

Chapitres: [19659049] {{book.chapters}}

Auteurs: {{getAuthorNames (book.authors)}}

Le balisage ci-dessus fournit un champ de saisie et un bouton qui est lié à une fonction pour récupérer le livre. Lorsque nous obtenons le livre, il est ensuite affiché sur la page. Nous avons utilisé la directive NgModel ici, vous devez donc importer le module FormsModule pour que l'application trouve cette directive.

Ouvrez la classe du composant find.component.ts ] et le mettre à jour avec le code suivant:

 import {Component, OnInit} de "@ angular / core";
importer {Apollo} de "apollo-angular";
importer gql depuis "graphql-tag";

@Composant({
  sélecteur: "app-find",
  templateUrl: "./find.component.html",
  styleUrls: ["./find.component.css"]
})
La classe d'exportation FindComponent implémente OnInit {
  bookId: string;
  book: any = {};
  chargement = faux;
  erreur: chaîne;
  constructeur (apollo privé: Apollo) {}

  getAuthorNames (auteurs) {
    if (auteurs && auteurs.longueur> 1)
      return auteurs.reduce ((acc, cur) => acc.name + "," + cur.name);
    sinon si (auteurs && auteurs.longueur == 0) renvoie les auteurs [0] .name;
  }

  findBook () {
    this.error = "";
    this.loading = true;
    this.apollo
      .query  ({
        requête: gql`
          requête ($ id: ID!) {
            livre (id: $ id) {
              Titre
              pages
              chapitres
              auteurs {
                Nom
              }
            }
          }
        ",
        variables: {
          id: this.bookId
        }
      })
      .subscribe (({data, loading}) => {
        if (data.book) this.book = data.book;
        sinon this.error = "Le livre ne sort pas";
        this.loading = chargement;
      });
  }
}

Vous devez remarquer que la propriété variables incluse dans l'objet est passée à la fonction query et que la requête déclare une variable $ id . La variable $ id sera évaluée et la valeur sera utilisée pour interroger l'API. C'est dans la propriété variables que vous spécifiez les variables dont la requête a besoin, dans notre cas, nous avons défini id sur la valeur de bookId . C'est ainsi que vous pouvez spécifier des variables et les utiliser dans des requêtes indiquant que la valeur de l'argument est dynamique.

Nous avons écrit le code, maintenant testons l'application. Si vous êtes suivi avec ma série d'introduction à la construction de l'API GraphQL vous devriez déjà avoir des données à tester. Sinon, vérifiez l'enregistrement d'écran ci-dessous pour voir comment l'application fonctionne et restez à l'écoute pour le prochain article dans lequel vous allez créer une page pour créer des livres.

Ouvrez la ligne de commande et exécutez ng serve -o pour démarrer l'application.

 angular-graphql-query "title =" angular-graphql-query "data-openoriginalimageonclick =" true "/> </a></p>
<h2 id= Récapitulatif

Apollo Angular vous permet d'extraire des données de votre serveur GraphQL et de les utiliser pour créer des interfaces utilisateur réactives à l'aide du cadre angulaire. Vous avez appris à utiliser le query dans le service Apollo pour interroger une API Graphql.

Il existe une autre fonction nommée watchQuery qui peut être utilisée dans le même but. La watchQuery La méthode renvoie un objet QueryRef qui a la propriété valueChanges qui est une observable et peut être souscrit comme nous l'avons fait dans cet article. différence est que watchQuery mettra à jour l'interface utilisateur avec des données mises à jour si un autre composant de l'application m lance une opération de requête ou de mutation qui modifie les données déjà récupérées lors de la première exécution de la requête. Vous pouvez en savoir plus à ce sujet dans la documentation .

Vous pouvez obtenir le code source sur GitHub et la branche requête a le code de cet article.





Source link