La communication et le transfert de données entre le front-end et le backend de toute application se font via des API (Application Programming Interface). Il existe de nombreux types d'API différents utilisés pour communiquer entre les applications front-end et back-end comme l'API RESTful, l'API SOAP, l'API GraphQL, etc. L'API GraphQL est une technologie relativement nouvelle, et elle est beaucoup plus rapide que les autres types d'API disponibles. La récupération des données de la base de données à l'aide de l'API GraphQL est beaucoup plus rapide que l'API REST. Lors de l'utilisation de l'API GraphQL, le client a le contrôle de récupérer uniquement les données requises au lieu d'obtenir tous les détails ; c'est pourquoi l'API GraphQL fonctionne plus rapidement que l'API REST.
Installation de packages
Nous allons construire un nœud.js utilisant l'API GraphQL, nous devons donc installer le nœud.js et npm pour cela avant de démarrer le projet.
[email protected]:~$ sudo apt-get update -y[email protected] :~$ sudo apt-get install nodejs
[email protected] :~$ sudo apt-get install npm
Mise en place du projet
Nous utiliserons le framework 'express' de node.js pour construire notre application. Créez un répertoire nommé 'graphql' et lancez le projet.
[email protégé] :~$ mkdir graphql[email protégé]:~$ cd graphql/
[email protégé] :~$ npm init -y
Configuration de MongoDB
Dans notre projet GraphQL, nous utiliserons MongoDB comme base de données. MongoDB est une base de données sans schéma et stocke les données sous forme de paires de clés. Pour installer mongoDB, suivez les étapes indiquées.
Importer la clé publique GPG pour MongoDB.
[email protégé] :~$ wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key ajouter -
Créer le fichier de liste pour mongodb.
Mettre à jour les référentiels locaux.
[email protected]:~$ sudo apt-get update -yInstaller le paquet mongodb.
[email protected]:~$ sudo apt-get install -y mongodb-orgDémarrer et activer mongod.un service.
[email protected]:~$ sudo systemctl start mongod.un service[email protected]:~$ sudo systemctl enable mongod.un service
Installation des modules npm
Pour notre application GraphQL, nous devons installer des packages npm. Nous installerons des cors, express, body-parser, mangouste, etc.
[email protégé]:~$ cd graphql/[email protected]:~$ npm install cors express body-parser mangoose --save
Pour créer une api GraphQL, nous devons installer un package npm supplémentaire nommé 'apollo-server-express.' Ce package npm est utilisé pour exécuter le serveur graphQL avec tous les nœuds.js frameworks HTTP comme 'express.'
[email protected]:~$ npm install apollo-server-express --saveDéfinir le schéma MongoDB
Nous avons maintenant configuré notre environnement pour notre application GraphQL dans Node.js, et il est temps de définir un schéma pour notre application. Créer un fichier 'modèles/élève.js' dans le répertoire racine du projet.
// définition du schéma étudiantconst mangouste = require('mangouste');
const studentSchema = nouvelle mangouste.Schéma(
Nom:
type : chaîne,
requis : vrai
,
classer:
tapez : Nombre,
requis : vrai
,
Majeur:
type : chaîne,
requis : vrai
,
horodatages : vrai
);
const Etudiant = mangouste.model('Etudiant', StudentSchema);
module.exports = Student, studentSchema
Dans le schéma défini ci-dessus, chaque étudiant doit avoir un nom, une classe et une majeure.
Construire l'API GraphQL
Après avoir créé le schéma Student, nous allons maintenant construire l'API GraphQL. Créer un 'schéma.js' pour écrire les paramètres GraphQL. Il existe deux paramètres, « types » et « résolveurs », utilisés dans l'API GraphQL. Dans 'types', nous préciserons notre schéma, les requêtes (e.g., Faire des requêtes GET) et des mutations (e.g., Faire des requêtes UPDATE ou DELETE) au schéma spécifié. Nous écrirons les différentes méthodes définies dans 'types' pour lier les requêtes et mutations avec la base de données dans 'résolveurs.'
// importation du schéma et du moduleconst gql = require('apollo-server-express');
const Etudiant = require('./modèles/élève').Élève;
// Définition du schéma, de la requête et du type de mutation
const typeDefs = gql '
tapez Étudiant
J'ai fait!,
nom : chaîne!,
classe : Int!,
majeur : chaîne!
tapez Requête
getStudents : [Étudiant],
getStudentById(id : ID!): Élève
tapez Mutation
addStudent( nom : chaîne!, classe : Int!, majeur : chaîne! ): Élève
updateStudent( nom : String!, classe : Int!, majeur : chaîne! ): Élève
deleteStudent( id: ID! ): Élève
'
// Définition des résolveurs
résolveurs const =
Mettre en doute:
getStudents : (parent, arguments) =>
retour Étudiant.trouve();
,
getStudentById : (parent, arguments) =>
retour Étudiant.findById(args.identifiant);
,
Mutation :
addStudent : (parent, arguments) =>
let étudiant = nouvel étudiant(
nom : args.Nom,
classe : args.classer,
majeur : args.Majeur
);
étudiant de retour.sauvegarder();
,
updateStudent : (parent, arguments) =>
si(!arguments.id) retour ;
retour Étudiant.findOneAndUpdate(
_id : arguments.identifiant
,
$set :
nom : args.Nom,
classe : args.classer,
majeur : args.Majeur
,
nouveau : vrai , (err, étudiant) =>
si (erreur)
console.log(err);
autre ;
)
module.exportations =
typeDefs,
résolveurs
Création du serveur d'API GraphQL
Maintenant, nous avons presque fini de créer l'application GraphQL. La seule étape restante est de créer le serveur. Créez un fichier nommé 'app.js' pour configurer les paramètres du serveur.
// importation des packages requisconst express = require('express');
const mangouste = require('mangouste');
const bodyParser = require('body-parser');
const cors = require('cors');
const ApolloServer = require('apollo-server-express');
// importation du schéma
const typeDefs, résolveurs = require('./schéma');
// connexion à MongoDB
const url = "mongodb://127.0.0.1:27017/étudiants » ;
const connect = mangouste.connect(url, useNewUrlParser: true );
relier.then((db) =>
console.log('Connexion réussie');
, (err) =>
console.log(err);
);
// création du serveur
const server = new ApolloServer(
typeDefs: typeDefs,
résolveurs : résolveurs
);
const app = express();
application.use(bodyParser.json());
application.use('*', cors());
serveur.applyMiddleware( app );
application.écouter( 8000, () =>
console.log('écoute 8000');
)
Tester l'API GraphQL
Nous avons notre serveur graphQL opérationnel sur le port 8000, et il est temps de tester l'API GraphQL. Ouvrez la page Web GraphQL dans le navigateur en visitant l'URL suivante.
http://localhost:8000/graphql
Et il ouvrira la page Web suivante.
Ajouter l'étudiant à la base de données à l'aide de l'API graphQL.
De même, ajoutez plus d'étudiants, et après avoir ajouté l'étudiant, faites en sorte que tous les étudiants utilisent l'API GraphQL.
Notez l'ID de l'un des étudiants et obtenez l'étudiant spécifique en utilisant son identifiant.
Conclusion
La récupération des données de la base de données à l'aide de l'API REST standard ralentit la requête car nous obtenons parfois plus de données que nécessaire. En utilisant GraphQL, nous pouvons récupérer exactement les données requises qui accélèrent l'API GraphQL. Dans ce projet de démonstration, nous n'avons qu'un seul schéma, nous avons donc créé l'API GraphQL pour ce schéma unique. Aussi, nous avons défini trois à quatre méthodes pour le schéma. Vous pouvez créer plusieurs requêtes ou mutations selon votre application.