GraphQL - Configuration de l'environnement

Dans ce chapitre, nous allons découvrir la configuration environnementale de GraphQL. Pour exécuter les exemples de ce didacticiel, vous aurez besoin des éléments suivants:

• Un ordinateur exécutant Linux, macOS ou Windows.

• Un navigateur Web, de préférence la dernière version de Google Chrome.

• Une version récente de Node.js installée. La dernière version LTS est recommandée.

• Visual Studio Code avec l'extension GraphQL pour VSCode installé ou tout éditeur de code de votre choix.

Comment créer un serveur GraphQL avec Nodejs

Nous allons passer par une approche détaillée par étapes pour construire un serveur GraphQL avec Nodejs comme indiqué ci-dessous -

Étape 1 - Vérifier les versions Node et Npm

Après avoir installé NodeJs, vérifiez la version de node et npm à l'aide des commandes suivantes sur le terminal -

C:\Users\Admin>node -v
v8.11.3

C:\Users\Admin>npm -v
5.6.0

Étape 2 - Créer un dossier de projet et ouvrir dans VSCode

Le dossier racine du projet peut être nommé test-app.

Ouvrez le dossier à l'aide de l'éditeur de code de Visual Studio en utilisant les instructions ci-dessous -

C:\Users\Admin>mkdir test-app
C:\Users\Admin>cd test-app
C:\Users\Admin\test-app>code.

Étape 3 - Créez package.json et installez les dépendances

Créez un fichier package.json qui contiendra toutes les dépendances de l'application serveur GraphQL.

{
   "name": "hello-world-server",
   "private": true,
   "scripts": {
      "start": "nodemon --ignore data/ server.js"
   },
   
   "dependencies": {
      "apollo-server-express": "^1.4.0",
      "body-parser": "^1.18.3",
      "cors": "^2.8.4",
      "express": "^4.16.3",
      "graphql": "^0.13.2",
      "graphql-tools": "^3.1.1"
   },
   
   "devDependencies": {
      "nodemon": "1.17.1"
   }
}

Installez les dépendances en utilisant la commande comme indiqué ci-dessous -

C:\Users\Admin\test-app>npm install

Étape 4 - Créer une base de données de fichiers plats dans le dossier de données

Dans cette étape, nous utilisons des fichiers plats pour stocker et récupérer des données. Créez un dossier de données et ajoutez deux fichiersstudents.json et colleges.json.

Voici le colleges.json fichier -

[
   {
      "id": "col-101",
      "name": "AMU",
      "location": "Uttar Pradesh",
      "rating":5.0
   },
   
   {
      "id": "col-102",
      "name": "CUSAT",
      "location": "Kerala",
      "rating":4.5
   }
]

Voici le students.json fichier -

[
   {
      "id": "S1001",
      "firstName":"Mohtashim",
      "lastName":"Mohammad",
      "email": "[email protected]",
      "password": "pass123",
      "collegeId": "col-102"
   },
   
   {
      "id": "S1002",
      "email": "[email protected]",
      "firstName":"Kannan",
      "lastName":"Sudhakaran",
      "password": "pass123",
      "collegeId": "col-101"
   },
   
   {
      "id": "S1003",
      "email": "[email protected]",
      "firstName":"Kiran",
      "lastName":"Panigrahi",
      "password": "pass123",
      "collegeId": "col-101"
   }
]

Étape 5 - Créer une couche d'accès aux données

Nous devons créer un magasin de données qui charge le contenu du dossier de données. Dans ce cas, nous avons besoin de variables de collecte, d' étudiants et de collèges . Chaque fois que l'application a besoin de données, elle utilise ces variables de collecte.

Créez le fichier db.js avec dans le dossier du projet comme suit -

const { DataStore } = require('notarealdb');

const store = new DataStore('./data');

module.exports = {
   students:store.collection('students'),
   colleges:store.collection('colleges')
};

Étape 6 - Créer un fichier de schéma, schema.graphql

Créez un fichier de schéma dans le dossier de projet actuel et ajoutez le contenu suivant -

type Query  {
   test: String
}

Étape 7 - Créer un fichier de résolution, resolvers.js

Créez un fichier de résolution dans le dossier du projet actuel et ajoutez le contenu suivant -

const Query = {
   test: () => 'Test Success, GraphQL server is up & running !!'
}
module.exports = {Query}

Étape 8 - Créez Server.js et configurez GraphQL

Créez un fichier serveur et configurez GraphQL comme suit -

const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');
const db = require('./db');

const port = process.env.PORT || 9000;
const app = express();

const fs = require('fs')
const typeDefs = fs.readFileSync('./schema.graphql',{encoding:'utf-8'})
const resolvers = require('./resolvers')

const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs, resolvers})

app.use(cors(), bodyParser.json());

const  {graphiqlExpress,graphqlExpress} = require('apollo-server-express')
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

app.listen(
   port, () => console.info(
      `Server started on port ${port}`
   )
);

Étape 9 - Exécutez l'application et testez avec GraphiQL

Vérifiez la structure des dossiers du projet test-app comme suit -

test-app /
   -->package.json
   -->db.js
   -->data
      students.json
      colleges.json
   -->resolvers.js
   -->schema.graphql
   -->server.js

Exécutez la commande npm start comme indiqué ci-dessous -

C:\Users\Admin\test-app>npm start

Le serveur fonctionne sur le port 9000, nous pouvons donc tester l'application à l'aide de l'outil GraphiQL. Ouvrez le navigateur et entrez l'URL http: // localhost: 9000 / graphiql. Tapez la requête suivante dans l'éditeur -

{
   Test 
}

La réponse du serveur est donnée ci-dessous -

{
   "data": {
      "test": "Test Success, GraphQL server is running !!"
   }
}