Création d’une API GraphQL avec Apollo Server

Dans cet article, nous passons en revue le processus de construction d’une API GraphQL dans Node.js à l’aide de la bibliothèque Apollo Server. Nous apprendrons comment définir des schémas, implémenter des résolveurs et exploiter l’interface Apollo Sandbox pour exécuter des opérations GraphQL sur le Web.

GraphQL est un langage de requête permettant d’envoyer des requêtes aux API. Avec GraphQL, le client indique au serveur exactement ce dont il a besoin et le serveur répond avec les données qui ont été demandées. Pour mieux comprendre certains des éléments qui rendent GraphQL spécial, assurez-vous de lire l’article précédent : GraphQL vs REST : quel est le meilleur choix pour la conception d’API ?.

Il y a deux côtés à l’utilisation de GraphQL : en tant qu’auteur d’une application Web client ou frontale, et en tant qu’auteur d’un serveur GraphQL. Dans ce chapitre, nous allons nous concentrer entièrement sur ce dernier point, en suivant un exercice simple sur la manière de créer une API de serveur GraphQL.

Serveur Apollo

Il est important de toujours garder à l’esprit que GraphQL est un spécification, pas une implémentation directe. Cela signifie qu’une API GraphQL peut être créée dans de nombreux langages de programmation différents :
Rubis, Java, Python et ainsi de suite. Nous nous concentrerons sur la création d’une API GraphQL avec JavaScript et nous utiliserons le Serveur Apollo bibliothèque pour nous aider à y parvenir.

Nous allons créer une API GraphQL avec Node.js. Nous supposons que vous disposez de Node et du npm gestionnaire de paquets déjà installé.

Création d’une API GraphQL

Nous allons commencer par un dossier vide appelé graphql-api/.

graphql-api/

package.json

Dans le graphql-api/ dossier, nous allons créer un package.json déposer. Le package.json Le fichier est l’endroit où l’on peut fournir des métadonnées sur une application Node, répertorier les packages dont dépend l’application et créer des scripts pour exécuter l’application.

graphql-api/
  package.json

Dans le package.json fichier, nous présenterons name et version champs pour décrire le projet que nous avons l’intention de créer. Nous nommerons notre projet « graphql-api » et spécifierons la version comme « 0.1.0 ».

{
  "name": "graphql-api",
  "version": "0.1.0"
}

Nous allons maintenant installer le @apollo/server paquet et le graphql Bibliothèque JavaScript dans notre projet.

• @apollo/server sera utilisé pour créer notre API GraphQL et aider à instancier un serveur.
• graphql est une dépendance homologue requise par le package Apollo Server.

Dans notre terminal, nous installerons ces nouveaux packages en tant que dépendances d’application.

graphql-api $: npm install @apollo/server graphql

Données simulées

Nous allons créer un index.js fichier dans notre répertoire de projet qui sera l’emplacement où nous créons notre API GraphQL.

graphql-api/
  index.js
  package.json

Dans le index.js fichier, nous préparerons des données fictives que nous utiliserons pour interroger notre API GraphQL. Nos données fictives seront un tableau de listes où chaque élément de liste aura les champs :id,
title et city.

const listings = [
  { id: "001", title: "Large ensuite condo", city: "Toronto" },
  { id: "002", title: "Beverly Hills Mansion", city: "Los Angeles" },
  { id: "003", title: "Small chic bedroom", city: "Dubai" },
];

Schéma GraphQL

La première chose que nous ferons pour créer notre API GraphQL est de préparer le GraphQL schéma. Un schéma GraphQL décrit toutes les données possibles qui peuvent être demandées. Nous pouvons considérer un schéma comme le modèle d’une API GraphQL. Nous allons créer le schéma avec le langage de schéma GraphQL qui est une syntaxe simple et indépendante du langage.

Le schéma GraphQL est l’endroit où nous spécifions le les types des champs que nous voudrons interroger depuis l’API. Nous allons construire un schéma dans lequel nous pourrons interroger un listings champ qui renverra une liste de listes du tableau de données fictives que nous avons préparé.

Avec le schéma que nous avons en tête préparé, notre index.js le fichier ressemblera désormais à ceci :

const listings = [
  { id: "001", title: "Large ensuite condo", city: "Toronto" },
  { id: "002", title: "Beverly Hills Mansion", city: "Los Angeles" },
  { id: "003", title: "Small chic bedroom", city: "Dubai" },
];

const typeDefs = `#graphql
  type Listing {
    id: String!
    title: String!
    city: String!
  }

  type Query {
    listings: [Listing!]!
  }
`;

Qu’est-ce qu’il se passe ici?

1. Nous créons un schéma GraphQL et l’attribuons à une constante nommée typeDefs.
2. Dans le schéma, nous créons un Listing type d’objet qui représente la forme d’un objet de liste unique. Le Listing l’objet est d’avoir trois champs dont tous doivent être des chaînes :id, title et city.
3. Enfin, nous définissons un Query type d’objet dans notre schéma qui représente les champs de niveau racine qui peuvent être interrogés auprès du client. Nous avons déclaré listings être un champ qui peut être interrogé et une fois résolu, il renverra une liste de Listing types d’objets.

Résolveurs GraphQL

Notre schéma représente simplement le forme de données pouvant être interrogées. Pour définir comment les champs du schéma sont traités, nous allons créer nos résolveurs GraphQL. Les résolveurs d’une API GraphQL sont des fonctions chargées de résoudre une opération GraphQL en données.

Nous préciserons un resolvers carte pour dicter comment le listings le champ est à résoudre. Nous aurons le listings Le champ renvoie simplement le tableau de listes fictives que nous avons créé.

const resolvers = {
  Query: {
    listings: () => listings,
  },
};

Instanciation du serveur Apollo

Une fois notre schéma, nos résolveurs et nos données fictives définis, nous pouvons maintenant créer notre instance Apollo Server. Pour ce faire, nous importerons et utiliserons le ApolloServer fonction constructeur du @apollo/server bibliothèque.

Le ApolloServer le constructeur prend un options objet qui nous oblige à transmettre des valeurs pour un typeDefs champ (c’est-à-dire le schéma GraphQL) et un resolvers champ (c’est-à-dire la carte des fonctions qui se résolvent en données concrètes).

Nous allons exécuter le ApolloServer constructeur, passez le typeDefs et resolvers valeurs constantes que nous avons créées et assignons le résultat à une constante appelée server.

const { ApolloServer } = require("@apollo/server");



const server = new ApolloServer({ typeDefs, resolvers });

Avec l’Apollon server instance désormais disponible, nous pouvons démarrer notre serveur Web en exécutant le startStandaloneServer() fonction à notre disposition à partir du @apollo/server/standalone emballer.

Le startStandaloneServer() La fonction est une fonction asynchrone qui, une fois résolue, reçoit le url du serveur en cours d’exécution. Nous enregistrerons un message sur la console avec ceci url valeur.

Notre index.js Le fichier dans son intégralité ressemblera désormais à ce qui suit.

import { ApolloServer } from "@apollo/server";
import { startStandaloneServer } from "@apollo/server/standalone";

const listings = [
  { id: "001", title: "Large ensuite condo", city: "Toronto" },
  { id: "002", title: "Beverly Hills Mansion", city: "Los Angeles" },
  { id: "003", title: "Small chic bedroom", city: "Dubai" },
];

const typeDefs = `#graphql
  type Listing {
    id: String!
    title: String!
    city: String!
  }
  type Query {
    listings: [Listing!]!
  }
`;

const resolvers = {
  Query: {
    listings: () => listings,
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

startStandaloneServer(server).then(({ url }) => {
  console.log(`Server is running at ${url}`);
});

Démarrage de notre serveur

Dans notre terminal, nous exécuterons node index.js au sein de graphql-api/ dossier pour exécuter le contenu du index.js fichier et démarrez notre serveur Web.

graphql-api $: node index.js

Avec le serveur fonctionnant correctement, nous devrions voir le message attendu sur la console.

Notre API GraphQL fonctionne désormais sur http://localhost:4000!

Bac à sable Apollo

Si nous naviguons vers http://localhost:4000 dans notre navigateur, nous lancerons le Bac à sable Apollo.

Bac à sable Apollo est un outil Web permettant d’exécuter des opérations GraphQL.

Avec le bac à sable, nous pouvons interroger le champ des listes et spécifier que nous voulons le id, title et city pour chaque objet de liste à retourner.

query {
  listings {
    id
    title
    city
  }
}

Lorsque nous exécutons la requête, nous obtiendrons tous les objets de liste de nos données fictives avec les champs que nous avons spécifiés.

Et si nous voulions seulement récupérer le id de chaque annonce ? Notre requête reflétera cela en interrogeant uniquement le id champ au sein du listings champ parent.

query {
  listings {
    id
  }
}

Et c’est tout! Nous avons créé une API GraphQL en quelques minutes avec laquelle nous pouvons demander au client de dicter les données qu’il souhaite recevoir du serveur.

Testez ce qui précède dans ce Codesandbox lien.

Conclure

Dans ce didacticiel, nous avons abordé les principes fondamentaux de la création d’une API GraphQL à l’aide d’Apollo Server. Avec Apollo Server, nous avons pu définir notre schéma, implémenter des résolveurs et enfin exécuter notre serveur GraphQL, ce qui nous a permis d’interroger nos listes fictives via l’interface utilisateur d’Apollo Sandbox.

Restez à l’écoute pour notre article de suivi qui explique comment nous pouvons interroger une API GraphQL dans une application React !