GraphQL - Umgebungs-Setup

In diesem Kapitel erfahren Sie mehr über das Umgebungssetup für GraphQL. Um die Beispiele in diesem Tutorial auszuführen, benötigen Sie Folgendes:

Ein Computer unter Linux, MacOS oder Windows.
Ein Webbrowser, vorzugsweise die neueste Version von Google Chrome.
Eine neuere Version von Node.js wurde installiert. Die neueste LTS-Version wird empfohlen.
Visual Studio Code mit der Erweiterung GraphQL für VSCode oder einem Code-Editor Ihrer Wahl.

So erstellen Sie einen GraphQL-Server mit Nodejs

Wir werden einen detaillierten schrittweisen Ansatz zum Erstellen eines GraphQL-Servers mit Nodejs durchlaufen, wie unten gezeigt -

Schritt 1 - Überprüfen Sie die Knoten- und Npm-Versionen

Überprüfen Sie nach der Installation von NodeJs die Version von Node und npm mit den folgenden Befehlen auf dem Terminal:

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

C:\Users\Admin>npm -v
5.6.0

Schritt 2 - Erstellen Sie einen Projektordner und öffnen Sie ihn in VSCode

Der Stammordner des Projekts kann als Test-App bezeichnet werden.

Öffnen Sie den Ordner mit dem Visual Studio Code Editor, indem Sie die folgenden Anweisungen befolgen -

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

Schritt 3 - Erstellen Sie package.json und installieren Sie die Abhängigkeiten

Erstellen Sie eine package.json-Datei, die alle Abhängigkeiten der GraphQL-Serveranwendung enthält.

{
   "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"
   }
}

Installieren Sie die Abhängigkeiten mit dem folgenden Befehl:

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

Schritt 4 - Erstellen Sie eine Flatfile-Datenbank im Datenordner

In diesem Schritt verwenden wir Flatfiles zum Speichern und Abrufen von Daten. Erstellen Sie Ordnerdaten und fügen Sie zwei Dateien hinzustudents.json und colleges.json.

Es folgt die colleges.json Datei -

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

Es folgt die students.json Datei -

[
   {
      "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"
   }
]

Schritt 5 - Erstellen Sie eine Datenzugriffsschicht

Wir müssen einen Datenspeicher erstellen, der den Inhalt des Datenordners lädt. In diesem Fall benötigen wir Sammlungsvariablen, Studenten und Hochschulen . Wann immer die Anwendung Daten benötigt, verwendet sie diese Erfassungsvariablen.

Erstellen Sie die Datei db.js mit im Projektordner wie folgt:

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

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

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

Schritt 6 - Schemadatei erstellen, schema.graphql

Erstellen Sie eine Schemadatei im aktuellen Projektordner und fügen Sie den folgenden Inhalt hinzu:

type Query  {
   test: String
}

Schritt 7 - Resolver-Datei erstellen, resolvers.js

Erstellen Sie eine Resolver-Datei im aktuellen Projektordner und fügen Sie den folgenden Inhalt hinzu:

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

Schritt 8 - Erstellen Sie Server.js und konfigurieren Sie GraphQL

Erstellen Sie eine Serverdatei und konfigurieren Sie GraphQL wie folgt:

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}`
   )
);

Schritt 9 - Führen Sie die Anwendung aus und testen Sie sie mit GraphiQL

Überprüfen Sie die Ordnerstruktur der Projekttest-App wie folgt:

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

Führen Sie den Befehl npm start wie unten angegeben aus -

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

Der Server läuft im 9000-Port, sodass wir die Anwendung mit dem GraphiQL-Tool testen können. Öffnen Sie den Browser und geben Sie die URL http: // localhost: 9000 / graphiql ein. Geben Sie die folgende Abfrage in den Editor ein -

{
   Test 
}

Die Antwort vom Server ist unten angegeben -

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