TOC

Comment construire et déployer un serveur GraphQL avec Node.js et MongoDB sur Ubuntu 18.04

L’auteur a sélectionné le Wikimedia Foundation pour recevoir un don dans le cadre du programme Write for DOnations .

introduction

GraphQL a été publié par Facebook en 2015 en tant que langage de requête pour les API facilitant l’interrogation et la mutation de données à partir de différentes collections de données. À partir d’un seul point de terminaison, vous pouvez interroger et muter plusieurs sources de données avec une seule requête POST. GraphQL résout certains des défauts de conception courants dans les architectures d’API REST, tels que les situations dans lesquelles le système d’extrémité renvoie plus d’informations que nécessaire. En outre, il est possible, lors de l’utilisation d’API REST, d’envoyer des demandes à plusieurs noeuds finaux REST pour collecter toutes les informations requises - une situation appelée problème n + 1. Un exemple de cela serait lorsque vous souhaitez afficher les informations d’un utilisateur, mais que vous devez collecter des données telles que des informations personnelles et des adresses de différents points de terminaison.

Ces problèmes ne s’appliquent pas à GraphQL car il n’a qu’un seul noeud final, qui peut renvoyer des données provenant de plusieurs collections. Les données renvoyées dépendent du query que vous envoyez à ce noeud final. Dans cette requête, vous définissez la structure des données que vous souhaitez recevoir, y compris les collections de données imbriquées. En plus d’une requête, vous pouvez également utiliser une mutation pour modifier les données sur un serveur GraphQL et une subscription pour surveiller les modifications apportées aux données. Pour plus d’informations sur GraphQL et ses concepts, vous pouvez visiter documentation sur le site officiel.

GraphQL étant un langage de requête extrêmement flexible, il se combine particulièrement bien avec des bases de données basées sur des documents telles que MongoDB. Les deux technologies sont basées sur des schémas hiérarchiques et typés et sont populaires au sein de la communauté JavaScript. De plus, les données de MongoDB étant stockées sous forme d’objets JSON, aucune analyse supplémentaire n’est nécessaire sur le serveur GraphQL.

Dans ce didacticiel, vous allez créer et déployer un serveur GraphQL avec Node.js pouvant interroger et transformer des données à partir d’une base de données MongoDB exécutée sur Ubuntu 18.04. À la fin de ce didacticiel, vous pourrez accéder aux données de votre base de données à l’aide d’un seul point de terminaison, à la fois en envoyant des requêtes au serveur directement via le terminal et en utilisant l’interface de jeu GraphiQL préconçue. Avec ce terrain de jeu, vous pouvez explorer le contenu du serveur GraphQL en envoyant des requêtes, des mutations et des abonnements. Vous pouvez également trouver des représentations visuelles des schémas définis pour ce serveur.

À la fin de ce didacticiel, vous utiliserez le terrain de jeu GraphiQL pour vous connecter rapidement à votre serveur GraphQL:

image: https: //assets.digitalocean.com/articles/cart_64864/GraphiQL_1.png [Le terrain de jeu GraphiQL en action]

Conditions préalables

Avant de commencer ce guide, vous aurez besoin des éléments suivants:

Étape 1 - Configuration de la base de données MongoDB

Avant de créer le serveur GraphQL, assurez-vous que votre base de données est configurée correctement, que l’authentification est activée et qu’elle contient des exemples de données. Pour cela, vous devez vous connecter au serveur Ubuntu 18.04 exécutant la base de données MongoDB à partir de votre invite de commande. Toutes les étapes de ce tutoriel auront lieu sur ce serveur.

Une fois la connexion établie, exécutez la commande suivante pour vérifier si MongoDB est actif et en cours d’exécution sur votre serveur:

sudo systemctl status mongodb

La sortie suivante apparaît sur votre terminal, indiquant que la base de données MongoDB est en cours d’exécution:

Output● mongodb.service - An object/document-oriented database
  Loaded: loaded (/lib/systemd/system/mongodb.service; enabled; vendor preset: enabled)
   since Sat 2019-02-23 12:23:03 UTC; 1 months 13 days ago
    Docs: man:mongod(1)
Main PID: 2388 (mongod)
   Tasks: 25 (limit: 1152)
  CGroup: /system.slice/mongodb.service
          └─2388 /usr/bin/mongod --unixSocketPrefix=/run/mongodb --config /etc/mongodb.conf

Avant de créer la base de données sur laquelle vous allez stocker les exemples de données, vous devez d’abord créer un utilisateur * admin *, car les utilisateurs normaux sont étendus à une base de données spécifique. Vous pouvez le faire en exécutant la commande suivante qui ouvre le shell MongoDB:

mongo

Avec le shell MongoDB, vous aurez un accès direct à la base de données MongoDB et pourrez créer des utilisateurs ou des bases de données et interroger des données. Dans ce shell, exécutez la commande suivante qui ajoutera un nouvel utilisateur * admin * à MongoDB. Vous pouvez remplacer les mots-clés en surbrillance par votre propre combinaison de nom d’utilisateur et de mot de passe, mais n’oubliez pas de les écrire quelque part.

use admin
db.createUser({
   user: "",
   pwd: "",
   roles: [{ role: "root", db: "admin"}]
})

La première ligne de la commande précédente sélectionne la base de données appelée + admin +, qui est la base de données où sont stockés tous les rôles d’administrateur. Avec la méthode + db.createUser () + vous pouvez créer l’utilisateur réel et définir son nom d’utilisateur, son mot de passe et ses rôles.

L’exécution de cette commande retournera:

OutputSuccessfully added user: {
   "user" : "",
   "roles" : [
       {
           "role" : "root",
           "db" : "admin"
       }
   ]
}

Vous pouvez maintenant fermer le shell MongoDB en tapant + exit +.

Ensuite, connectez-vous à nouveau au shell MongoDB, mais cette fois-ci avec le nouvel utilisateur * admin *:

mongo -u "" -p "" --authenticationDatabase "admin"

Cette commande ouvrira le shell MongoDB en tant qu’utilisateur spécifique, où l’indicateur + -u + spécifie le nom d’utilisateur et l’indicateur + -p + le mot de passe de cet utilisateur. Le drapeau supplémentaire + - authenticationDatabase + indique que vous souhaitez vous connecter en tant que * admin *.

Ensuite, vous basculerez vers une nouvelle base de données, puis utiliserez la méthode + db.createUser () + pour créer un nouvel utilisateur disposant des autorisations lui permettant d’apporter des modifications à cette base de données. Remplacez les sections en surbrillance par vos propres informations, en veillant à bien noter ces informations d’identification.

Exécutez la commande suivante dans le shell MongoDB:

use
db.createUser({
   user: "",
   pwd: "",
   roles: ["readWrite"]
})

Cela retournera ce qui suit:

OutputSuccessfully added user: { "user" : "", "roles" : ["readWrite"] }

Après avoir créé la base de données et l’utilisateur, remplissez cette base de données avec des exemples de données pouvant être interrogées par le serveur GraphQL ultérieurement dans ce didacticiel. Pour cela, vous pouvez utiliser l’exemple bios collection du site Web MongoDB. En exécutant les commandes du fragment de code suivant, vous insérerez une version plus petite de cet ensemble de données de collection + bios + dans votre base de données. Vous pouvez remplacer les sections surlignées par vos propres informations, mais pour les besoins de ce tutoriel, nommez la collection ++:

db..insertMany([
  {
      "_id" : 1,
      "name" : {
          "first" : "John",
          "last" : "Backus"
      },
      "birth" : ISODate("1924-12-03T05:00:00Z"),
      "death" : ISODate("2007-03-17T04:00:00Z"),
      "contribs" : [
          "Fortran",
          "ALGOL",
          "Backus-Naur Form",
          "FP"
      ],
      "awards" : [
          {
              "award" : "W.W. McDowell Award",
              "year" : 1967,
              "by" : "IEEE Computer Society"
          },
          {
              "award" : "National Medal of Science",
              "year" : 1975,
              "by" : "National Science Foundation"
          },
          {
              "award" : "Turing Award",
              "year" : 1977,
              "by" : "ACM"
          },
          {
              "award" : "Draper Prize",
              "year" : 1993,
              "by" : "National Academy of Engineering"
          }
      ]
  },
  {
      "_id" : ObjectId("51df07b094c6acd67e492f41"),
      "name" : {
          "first" : "John",
          "last" : "McCarthy"
      },
      "birth" : ISODate("1927-09-04T04:00:00Z"),
      "death" : ISODate("2011-12-24T05:00:00Z"),
      "contribs" : [
          "Lisp",
          "Artificial Intelligence",
          "ALGOL"
      ],
      "awards" : [
          {
              "award" : "Turing Award",
              "year" : 1971,
              "by" : "ACM"
          },
          {
              "award" : "Kyoto Prize",
              "year" : 1988,
              "by" : "Inamori Foundation"
          },
          {
              "award" : "National Medal of Science",
              "year" : 1990,
              "by" : "National Science Foundation"
          }
      ]
  }
]);

Ce bloc de code est un tableau composé de plusieurs objets contenant des informations sur des scientifiques réussis du passé. Après avoir exécuté ces commandes pour entrer cette collection dans votre base de données, vous recevrez le message suivant indiquant que les données ont été ajoutées:

Output{
   "acknowledged" : true,
   "insertedIds" : [
       1,
       ObjectId("51df07b094c6acd67e492f41")
   ]
}

Après avoir vu le message de réussite, vous pouvez fermer le shell MongoDB en tapant + exit +. Ensuite, configurez l’installation de MongoDB pour que l’autorisation soit activée afin que seuls les utilisateurs authentifiés puissent accéder aux données. Pour éditer la configuration de l’installation de MongoDB, ouvrez le fichier contenant les paramètres de cette installation:

sudo nano /etc/mongodb.conf

Décommentez la ligne en surbrillance dans le code suivant pour activer l’autorisation:

/etc/mongodb.conf

...
# Turn on/off security.  Off is currently the default
#noauth = true

...

Pour rendre ces modifications actives, redémarrez MongoDB en lançant:

sudo systemctl restart mongodb

Assurez-vous que la base de données est à nouveau en cours d’exécution en exécutant la commande suivante:

sudo systemctl status mongodb

Cela donnera un résultat similaire à celui-ci:

Output● mongodb.service - An object/document-oriented database
  Loaded: loaded (/lib/systemd/system/mongodb.service; enabled; vendor preset: enabled)
   since Sat 2019-02-23 12:23:03 UTC; 1 months 13 days ago
    Docs: man:mongod(1)
Main PID: 2388 (mongod)
   Tasks: 25 (limit: 1152)
  CGroup: /system.slice/mongodb.service
          └─2388 /usr/bin/mongod --unixSocketPrefix=/run/mongodb --config /etc/mongodb.conf

Pour vous assurer que votre utilisateur peut se connecter à la base de données que vous venez de créer, essayez d’ouvrir le shell MongoDB en tant qu’utilisateur authentifié à l’aide de la commande suivante:

mongo -u "" -p "" --authenticationDatabase ""

Ceci utilise les mêmes indicateurs que précédemment, mais cette fois, le + - authenticationDatabase + est défini sur la base de données que vous avez créée et rempli avec les exemples de données.

Vous avez maintenant ajouté avec succès un utilisateur * admin * et un autre utilisateur disposant d’un accès en lecture / écriture à la base de données avec les exemples de données. En outre, l’autorisation est activée pour la base de données, ce qui signifie que vous avez besoin d’un nom d’utilisateur et d’un mot de passe pour y accéder. Dans l’étape suivante, vous créerez le serveur GraphQL qui sera connecté à cette base de données plus tard dans le didacticiel.

Étape 2 - Création du serveur GraphQL

Avec la base de données configurée et remplie d’exemples de données, il est temps de créer un serveur GraphQL capable d’interroger et de transformer ces données. Pour cela, vous utiliserez Express et https://graphql.org/graphql-js/express-graphql/ [+ + express-graphql +], qui courir sur Node.js. Express est un framework léger permettant de créer rapidement des serveurs HTTP Node.js. + Express-graphql + fournit un middleware permettant de créer rapidement des serveurs GraphQL.

La première étape consiste à vous assurer que votre machine est à jour:

sudo apt update

Ensuite, installez Node.js sur votre serveur en lançant les commandes suivantes. Avec Node.js, vous installerez également npm, un gestionnaire de paquets pour JavaScript qui s’exécute sur Node.js.

sudo apt install nodejs npm

Après avoir suivi le processus d’installation, vérifiez si la version de Node.js que vous venez d’installer est bien la version + v8.10.0 + ou supérieure:

node -v

Cela retournera ce qui suit:

Output

Pour initialiser un nouveau projet JavaScript, exécutez les commandes suivantes sur le serveur en tant qu’utilisateur + sudo + et remplacez les mots-clés en surbrillance par un nom pour votre projet.

Commencez par aller dans le répertoire racine de votre serveur:

cd

Une fois là-bas, créez un nouveau répertoire nommé d’après votre projet:

mkdir

Déplacer dans ce répertoire:

cd

Enfin, initialisez un nouveau package npm avec la commande suivante:

sudo npm init -y

Après avoir exécuté + npm init -y +, vous recevrez un message indiquant que le fichier + package.json + suivant a été créé:

OutputWrote to /home///package.json:

{
 "name": "",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

Maintenant que vous avez initialisé le projet, installez les packages nécessaires à la configuration du serveur GraphQL:

sudo npm install --save express express-graphql graphql

Créez un nouveau fichier nommé + index.js + et ouvrez-le ensuite en lançant:

sudo nano index.js

Ensuite, ajoutez le bloc de code suivant dans le fichier nouvellement créé pour configurer le serveur GraphQL:

index.js

const express = require('express');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');

// Construct a schema, using GraphQL schema language
const schema = buildSchema(`
 type Query {
   hello: String
 }
`);

// Provide resolver functions for your schema fields
const resolvers = {
 hello: () => 'Hello world!'
};

const app = express();
app.use('/graphql', graphqlHTTP({
 schema,
 rootValue: resolvers
}));
app.listen(4000);

console.log(`🚀 Server ready at http://localhost:4000/graphql`);

Ce bloc de code est composé de plusieurs parties qui sont toutes importantes. Commencez par décrire le schéma des données renvoyées par l’API GraphQL:

index.js

...
// Construct a schema, using GraphQL schema language
const schema = buildSchema(`
 type Query {
   hello: String
 }
`);
...

Le type + Query définit quelles requêtes peuvent être exécutées et dans quel format elles renverront le résultat. Comme vous pouvez le constater, la seule requête définie est + hello + qui renvoie des données au format + String +.

La section suivante présente resolvers, où les données correspondent aux schémas que vous pouvez interroger:

index.js

...
// Provide resolver functions for your schema fields
const resolvers = {
 hello: () => 'Hello world!'
};
...

Ces résolveurs sont directement liés aux schémas et renvoient les données correspondant à ces schémas.

La dernière partie de ce bloc de code initialise le serveur GraphQL, crée le noeud final de l’API avec Express et décrit le port sur lequel le noeud final GraphQL est exécuté:

index.js

...
const app = express();
app.use('/graphql', graphqlHTTP({
 schema,
 rootValue: resolvers
}));
app.listen(4000);

console.log(`🚀 Server ready at http://localhost:4000/graphql`);

Après avoir ajouté ces lignes, sauvegardez et quittez + index.js.

Ensuite, pour exécuter le serveur GraphQL, vous devez exécuter le fichier + index.js avec Node.js. Cela peut être fait manuellement à partir de la ligne de commande, mais il est courant de configurer le fichier + package.json + pour le faire pour vous.

Ouvrez le fichier + package.json:

sudo nano package.json

Ajoutez la ligne en surbrillance suivante à ce fichier:

package.json

{
 "name": "project_name",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   ,
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

Enregistrez et quittez le fichier.

Pour démarrer le serveur GraphQL, exécutez la commande suivante dans le terminal:

npm start

Une fois que vous avez exécuté cela, l’invite du terminal disparaîtra et un message vous confirmera que le serveur GraphQL est en cours d’exécution:

Output🚀 Server ready at http://localhost:4000/graphql

Si vous ouvrez maintenant une autre session de terminal, vous pouvez vérifier si le serveur GraphQL est en cours d’exécution en exécutant la commande suivante. Cela envoie une requête + curl` + + POST` avec un corps JSON après l’indicateur + - data + qui contient votre requête GraphQL vers le point de terminaison local:

curl -X POST -H "Content-Type: application/json" --data '{ "query": "{ hello }" }' http://localhost:4000/graphql

Ceci exécutera la requête telle que décrite dans le schéma GraphQL de votre code et renverra les données dans un format JSON prévisible égal à celles renvoyées dans les résolveurs:

Output{ "data": { "hello": "Hello world!" } }

À cette étape, vous avez créé la première version du serveur GraphQL qui s’exécute maintenant sur un noeud final local accessible sur votre serveur. Ensuite, vous allez connecter vos résolveurs à la base de données MongoDB.

Étape 3 - Connexion à la base de données MongoDB

Avec le serveur GraphQL dans l’ordre, vous pouvez maintenant configurer la connexion avec la base de données MongoDB que vous aviez déjà configurée et remplie avec des données et créer un nouveau schéma qui correspond à ces données.

Pour pouvoir vous connecter à MongoDB à partir du serveur GraphQL, installez le paquet JavaScript pour MongoDB à partir de npm:

sudo npm install --save mongodb

Une fois cela installé, ouvrez + index.js dans votre éditeur de texte:

sudo nano index.js

Ensuite, ajoutez le code en surbrillance suivant à + ​​index.js + juste après les dépendances importées et remplissez les valeurs en surbrillance avec vos propres détails de connexion à la base de données MongoDB locale. Les + nom d’utilisateur +, + mot de passe _ et` + nom_base_données _` sont ceux que vous avez créés à la première étape de ce didacticiel.

index.js

const express = require('express');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');



...

Ces lignes ajoutent la connexion à la base de données locale MongoDB à une fonction appelée context. Cette fonction de contexte sera disponible pour tous les résolveurs. C’est pourquoi vous l’utilisez pour configurer les connexions à la base de données.

Ensuite, dans votre fichier + index.js +, ajoutez la fonction de contexte à l’initialisation du serveur GraphQL en insérant les lignes en surbrillance suivantes:

index.js

...
const app = express();
app.use('/graphql', graphqlHTTP({
 schema,
 rootValue: resolvers

}));
app.listen(4000);

console.log(`🚀 Server ready at http://localhost:4000/graphql`);

Vous pouvez maintenant appeler cette fonction de contexte à partir de vos résolveurs et ainsi lire les variables de la base de données MongoDB. Si vous revenez à la première étape de ce didacticiel, vous pouvez voir quelles valeurs sont présentes dans la base de données. À partir de là, définissez un nouveau schéma GraphQL correspondant à cette structure de données. Remplacez la valeur précédente pour la constante + schema + par les lignes en surbrillance suivantes:

index.js

...
// Construct a schema, using GrahQL schema language





















...

Le type + Query + a changé et renvoie maintenant une collection du nouveau type + Bio +. Ce nouveau type est composé de plusieurs types, y compris deux autres types non scalaires + Nom + et + Awards +, ce qui signifie que ces types ne correspondent pas à un format prédéfini tel que + String + ou + Float +. Pour plus d’informations sur la définition des schémas GraphQL, reportez-vous à la documentation de GraphQL.

De plus, étant donné que les résolveurs lient les données de la base de données au schéma, mettez à jour le code pour les résolveurs lorsque vous apportez des modifications au schéma. Créez un nouveau résolveur appelé + bios +, qui est égal au + Query qui se trouve dans le schéma et au nom de la collection dans la base de données. Notez que, dans ce cas, le nom de la collection dans + db.collection ('bios') + est + bios +, mais que cela changerait si vous aviez attribué un nom différent à votre collection.

Ajoutez la ligne en surbrillance suivante à + ​​index.js:

index.js

...
// Provide resolver functions for your schema fields
const resolvers = {

};
...

Cette fonction utilisera la fonction de contexte, que vous pouvez utiliser pour extraire des variables de la base de données MongoDB. Une fois que vous avez apporté ces modifications au code, enregistrez et quittez + index.js.

Pour rendre ces modifications actives, vous devez redémarrer le serveur GraphQL. Vous pouvez arrêter le processus en cours en utilisant la combinaison de touches + CTRL + + `+ + + + et démarrer le serveur GraphQL en lançant:

npm start

Vous pouvez maintenant utiliser le schéma mis à jour et interroger les données contenues dans la base de données. Si vous regardez le schéma, vous verrez que le + Query pour` + bios` renvoie le type + Bio +; Ce type pourrait également renvoyer le type + Nom +.

Pour renvoyer tous les noms et prénoms de tous les bios de la base de données, envoyez la demande suivante au serveur GraphQL dans une nouvelle fenêtre de terminal:

curl -X POST -H "Content-Type: application/json" --data '{ "query": "{ bios { name { first, last } } }" }' http://localhost:4000/graphql

Cela retournera à nouveau un objet JSON qui correspond à la structure du schéma:

Output{"data":{"bios":[{"name":{"first":"John","last":"Backus"}},{"name":{"first":"John","last":"McCarthy"}}]}}

Vous pouvez facilement extraire plus de variables du bios en étendant la requête avec l’un des types décrits dans le type de + Bio +.

En outre, vous pouvez récupérer une bio en spécifiant un + id +. Pour ce faire, vous devez ajouter un autre type au type + Query et étendre les résolveurs. Pour ce faire, ouvrez + index.js dans votre éditeur de texte:

sudo nano index.js

Ajoutez les lignes de code en surbrillance suivantes:

index.js

...
// Construct a schema, using GrahQL schema language
const schema = buildSchema(`
 type Query {
   bios: [Bio]

 }

 ...

 // Provide resolver functions for your schema fields
 const resolvers = {
   bios: (args, context) => context().then(db => db.collection('bios').find().toArray())

 };
 ...

Enregistrez et quittez le fichier.

Dans le terminal qui exécute votre serveur GraphQL, appuyez sur + CTRL + + + C + pour l’arrêter, puis exécutez la procédure suivante pour le redémarrer:

npm start

Dans une autre fenêtre de terminal, exécutez la requête GraphQL suivante:

curl -X POST -H "Content-Type: application/json" --data '{ "query": "{ bio(id: 1) { name { first, last } } }" }' http://localhost:4000/graphql

Ceci retourne l’entrée pour la bio qui a un + id + égal à + ​​1 +:

Output{ "data": { "bio": { "name": { "first": "John", "last": "Backus" } } } }

Pouvoir interroger les données d’une base de données n’est pas la seule fonctionnalité de GraphQL; vous pouvez également modifier les données de la base de données. Pour ce faire, ouvrez + index.js:

sudo nano index.js

À côté du type + Query +, vous pouvez également utiliser le type + Mutation +, ce qui vous permet de muter la base de données. Pour utiliser ce type, ajoutez-le au schéma et créez également des types d’entrée en insérant les lignes mises en surbrillance:

index.js

...
// Construct a schema, using GraphQL schema language
const schema = buildSchema(`
 type Query {
   bios: [Bio]
   bio(id: Int): Bio
 }













...

Ces types d’entrées définissent les variables pouvant être utilisées en tant qu’entrées, auxquelles vous pouvez accéder dans les résolveurs et utiliser pour insérer un nouveau document dans la base de données. Faites cela en ajoutant les lignes suivantes à + ​​index.js:

index.js

...
// Provide resolver functions for your schema fields
const resolvers = {
 bios: (args, context) => context().then(db => db.collection('bios').find().toArray()),
 bio: (args, context) => context().then(db => db.collection('bios').findOne({ _id: args.id }))

};
...

Comme pour les résolveurs des requêtes classiques, vous devez renvoyer une valeur du résolveur dans + index.js +. Dans le cas d’une + Mutation + où le type + Bio + est muté, vous renverriez la valeur du bio muté.

À ce stade, votre fichier + index.js + contiendra les lignes suivantes:

index.js

iconst express = require('express');
const graphqlHTTP = require('express-graphql');
const { buildSchema } = require('graphql');
const { MongoClient } = require('mongodb');

const context = () => MongoClient.connect('mongodb://:@localhost:27017/', { useNewUrlParser: true })
 .then(client => client.db('GraphQL_Test'));

// Construct a schema, using GraphQL schema language
const schema = buildSchema(`
 type Query {
   bios: [Bio]
   bio(id: Int): Bio
 }
 type Mutation {
   addBio(input: BioInput) : Bio
 }
 input BioInput {
   name: NameInput
   title: String
   birth: String
   death: String
 }
 input NameInput {
   first: String
   last: String
 }
 type Bio {
   name: Name,
   title: String,
   birth: String,
   death: String,
   awards: [Award]
 }
 type Name {
   first: String,
   last: String
 },
 type Award {
   award: String,
   year: Float,
   by: String
 }
`);

// Provide resolver functions for your schema fields
const resolvers = {
 bios: (args, context) =>context().then(db => db.collection('Sample_Data').find().toArray()),
 bio: (args, context) =>context().then(db => db.collection('Sample_Data').findOne({ _id: args.id })),
 addBio: (args, context) => context().then(db => db.collection('Sample_Data').insertOne({ name: args.input.name, title: args.input.title, death: args.input.death, birth: args.input.birth})).then(response => response.ops[0])
};

const app = express();
app.use('/graphql', graphqlHTTP({
 schema,
 rootValue: resolvers,
 context
}));
app.listen(4000);

console.log(`🚀 Server ready at http://localhost:4000/graphql`);

Enregistrez et quittez + index.js.

Pour vérifier si votre nouvelle mutation fonctionne, redémarrez le serveur GraphQL en appuyant sur + CTRL + + + + + + + et en exécutant + npm start + dans le terminal qui exécute votre serveur GraphQL, puis ouvrez une autre session de terminal pour exécuter la procédure suivante. `+ curl + demande. Comme pour les requêtes + curl +, le corps de l’indicateur + - data + sera envoyé au serveur GraphQL. Les parties en surbrillance seront ajoutées à la base de données:

curl -X POST -H "Content-Type: application/json" --data '{ "query": "mutation { addBio(input: { name: { first: \"\", last: \"\" } }) { name { first, last } } }" }' http://localhost:4000/graphql

Cela renvoie le résultat suivant, ce qui signifie que vous venez d’insérer une nouvelle bio dans la base de données:

Output{ "data": { "addBio": { "name": { "first": "", "last": "" } } } }

Au cours de cette étape, vous avez créé la connexion avec MongoDB et le serveur GraphQL, ce qui vous permet de récupérer et de muter les données de cette base de données en exécutant des requêtes GraphQL. Ensuite, vous exposerez ce serveur GraphQL pour un accès à distance.

Étape 4 - Autoriser l’accès à distance

Une fois la base de données et le serveur GraphQL configurés, vous pouvez maintenant configurer le serveur GraphQL pour autoriser l’accès à distance. Pour cela, vous utiliserez Nginx, que vous avez configuré dans le tutoriel préalable How to installer Nginx sur Ubuntu 18.04. Cette configuration Nginx se trouve dans le fichier + / etc / nginx / sites-available / +, où + example.com + est le nom du serveur que vous avez ajouté dans le didacticiel relatif aux prérequis.

Ouvrez ce fichier pour le modifier, en remplaçant votre nom de domaine par ++:

sudo nano /etc/nginx/sites-available/

Dans ce fichier, vous trouverez un bloc de serveur qui écoute le port + 80 +, où vous avez déjà défini une valeur pour + nom_serveur + dans le didacticiel relatif aux prérequis. Dans ce bloc de serveur, remplacez la valeur + root + par le répertoire dans lequel vous avez créé le code pour le serveur GraphQL et ajoutez + index.js + comme index. De plus, dans le bloc d’emplacement, définissez un + proxy_pass + pour pouvoir utiliser l’adresse IP de votre serveur ou un nom de domaine personnalisé pour faire référence au serveur GraphQL:

/etc/nginx/sites-available/example.com

server {
 listen 80;
 listen [::]:80;

 ;
 ;

 server_name ;

 location / {

 }
}

Assurez-vous qu’il n’y a pas d’erreur de syntaxe Nginx dans ce fichier de configuration en exécutant:

sudo nginx -t

Vous recevrez le résultat suivant:

Outputnginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Quand aucune erreur n’est trouvée pour le fichier de configuration, redémarrez Nginx:

sudo systemctl restart nginx

Désormais, vous pourrez accéder à votre serveur GraphQL à partir de n’importe quel onglet de session de terminal en exécutant et en remplaçant «++» par l’adresse IP de votre serveur ou par votre nom de domaine personnalisé:

curl -X POST -H "Content-Type: application/json" --data '{ "query": "{ bios { name { first, last } } }" }' http://

Cela renverra le même objet JSON que celui de l’étape précédente, y compris toutes les données supplémentaires que vous auriez pu ajouter en utilisant une mutation:

Output{"data":{"bios":[{"name":{"first":"John","last":"Backus"}},{"name":{"first":"John","last":"McCarthy"}},{"name":{"first":"test","last":"user"}}]}}

Maintenant que vous avez rendu votre serveur GraphQL accessible à distance, assurez-vous que votre serveur GraphQL ne s’arrête pas lorsque vous fermez le terminal ou que le serveur redémarre. Ainsi, votre base de données MongoDB sera accessible via le serveur GraphQL chaque fois que vous souhaitez faire une demande.

Pour ce faire, utilisez le package npm https://www.npmjs.com/package/forever [+ forever +], un outil de ligne de commande qui garantit que vos scripts de ligne de commande s’exécutent en permanence ou sont redémarrés en cas d’échec.

Installez + forever + avec npm:

sudo npm install forever -g

Une fois l’installation terminée, ajoutez-le au fichier + package.json:

package.json

{
 "name": "project_name",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "start": "node index.js",

   "test": "echo \"Error: no test specified\" && exit 1"
 },
 ...

Pour démarrer le serveur GraphQL avec + forever + activé, exécutez la commande suivante:

npm run deploy

Ceci démarrera le fichier + index.js + contenant le serveur GraphQL avec + forever +, et garantira qu’il continuera à fonctionner avec un temps minimum de disponibilité de 2 000 millisecondes et de 5 millisecondes entre chaque redémarrage en cas d’échec. Le serveur GraphQL s’exécutant continuellement en arrière-plan, vous n’avez plus besoin d’ouvrir un nouvel onglet lorsque vous souhaitez envoyer une demande au serveur.

Vous avez maintenant créé un serveur GraphQL qui utilise MongoDB pour stocker des données et qui est configuré pour autoriser l’accès depuis un serveur distant. Dans l’étape suivante, vous activerez le terrain de jeu GraphiQL, ce qui facilitera l’inspection du serveur GraphQL.

Étape 5 - Activer GraphiQL Playground

Pouvoir envoyer des requêtes cURL au serveur GraphQL est une bonne chose, mais il serait plus rapide d’avoir une interface utilisateur capable d’exécuter les requêtes GraphQL immédiatement, en particulier pendant le développement. Pour cela, vous pouvez utiliser GraphiQL, une interface supportée par le paquet + express-graphql +.

Pour activer GraphQL, éditez le fichier + index.js:

sudo nano index.js

Ajoutez les lignes en surbrillance suivantes:

index.js

const app = express();
app.use('/graphql', graphqlHTTP({
 schema,
 rootValue: resolvers,
 context

}));
app.listen(4000);

console.log(`🚀 Server ready at http://localhost:4000/graphql`);

Enregistrez et quittez le fichier.

Pour que ces modifications deviennent visibles, assurez-vous d’arrêter + toujours + en exécutant:

forever stop index.js

Ensuite, redémarrez + forever + pour que la dernière version de votre serveur GraphQL soit en cours d’exécution:

npm run deploy

Ouvrez un navigateur à l’URL + http: // +, en remplaçant ++ par votre nom de domaine ou l’adresse IP de votre serveur. Vous verrez le terrain de jeu GraphiQL, où vous pouvez taper des requêtes GraphQL.

image: https: //assets.digitalocean.com/articles/cart_64864/GraphiQL_2.png [Écran initial pour le terrain de jeu GraphiQL]

Sur le côté gauche de cette aire de jeu, vous pouvez taper les requêtes et les mutations GraphQL, tandis que la sortie sera affichée sur le côté droit de celle-ci. Pour vérifier si cela fonctionne, tapez la requête suivante à gauche:

query {
 bios {
   name {
     first
     last
   }
 }
}

Cela produira le même résultat sur le côté droit de la cour, toujours au format JSON:

image: https: //assets.digitalocean.com/articles/cart_64864/GraphiQL_3.png [Le terrain de jeu GraphiQL en action]

Vous pouvez désormais envoyer des requêtes GraphQL à l’aide du terminal et du terrain de jeu GraphiQL.

Conclusion

Dans ce didacticiel, vous avez configuré une base de données MongoDB ainsi que des données extraites et mutées de cette base de données à l’aide de GraphQL, Node.js et Express pour le serveur. De plus, vous avez configuré Nginx pour autoriser l’accès à distance à ce serveur. Vous pouvez non seulement envoyer des requêtes directement à ce serveur GraphQL, mais vous pouvez également utiliser GraphiQL comme interface graphique GraphQL intégrée au navigateur.

Si vous souhaitez en savoir plus sur GraphQL, vous pouvez regarder un enregistrement https://www.youtube.com/watch?v=Pmm12LtcPWs Londres}] ou visitez le site Web https://howtographql.com [howtographql.com] pour des tutoriels sur GraphQL. Pour étudier l’interaction de GraphQL avec d’autres technologies, consultez le didacticiel à l’adresse https://www.digitalocean.com/community/tutorials/how-to-manually-set-up-a-prisma-server-on-ubuntu-18- 04 [Comment configurer manuellement un serveur Prisma sur Ubuntu 18.04], et pour plus d’informations sur la construction d’applications avec MongoDB, voir https://www.digitalocean.com/community/tutorials/how-to-build-a-blog- with-nest-js-mongodb-and-vue-js [Comment créer un blog avec Nest.js, MongoDB et Vue.js].

Related