Учебники

GraphQL — Настройка среды

Январь 27, 2019

В этой главе мы узнаем о настройке среды для GraphQL. Для выполнения примеров из этого урока вам понадобится следующее:

  • Компьютер под управлением Linux, macOS или Windows.

  • Веб-браузер, желательно последняя версия Google Chrome.

  • Установлена ​​последняя версия Node.js. Последняя версия LTS рекомендуется.

  • Visual Studio Code с установленным расширением GraphQL для VSCode или любой другой редактор кода на ваш выбор.

Компьютер под управлением Linux, macOS или Windows.

Веб-браузер, желательно последняя версия Google Chrome.

Установлена ​​последняя версия Node.js. Последняя версия LTS рекомендуется.

Visual Studio Code с установленным расширением GraphQL для VSCode или любой другой редактор кода на ваш выбор.

Как построить сервер GraphQL с Nodejs

Мы рассмотрим подробный пошаговый подход к созданию сервера GraphQL с Nodejs, как показано ниже —

Шаг 1 — Проверка версий узла и Npm

После установки NodeJs проверьте версию узла и npm, используя следующие команды на терминале: 

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

C:\Users\Admin>npm -v
5.6.0

Шаг 2 — Создайте папку проекта и откройте в VSCode

Корневая папка проекта может называться test-app.

Откройте папку с помощью редактора кода Visual Studio, используя инструкции ниже — 

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

Шаг 3 — Создайте package.json и установите зависимости

Создайте файл package.json, который будет содержать все зависимости приложения сервера 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"
   }
}

Установите зависимости с помощью команды, приведенной ниже — 

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

Шаг 4 — Создание базы данных плоских файлов в папке данных

На этом этапе мы используем плоские файлы для хранения и извлечения данных. Создайте папку data и добавьте два файла student.json и colleges.json .

Ниже приведен файл colleges.json — 

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

Ниже приведен файл Students.json — 

[
   {
      "id": "S1001",
      "firstName":"Mohtashim",
      "lastName":"Mohammad",
      "email": "mohtashim.mohammad@tutorialpoint.org",
      "password": "pass123",
      "collegeId": "col-102"
   },
   
   {
      "id": "S1002",
      "email": "kannan.sudhakaran@tutorialpoint.org",
      "firstName":"Kannan",
      "lastName":"Sudhakaran",
      "password": "pass123",
      "collegeId": "col-101"
   },
   
   {
      "id": "S1003",
      "email": "kiran.panigrahi@tutorialpoint.org",
      "firstName":"Kiran",
      "lastName":"Panigrahi",
      "password": "pass123",
      "collegeId": "col-101"
   }
]

Шаг 5 — Создание уровня доступа к данным

Нам нужно создать хранилище данных, которое загружает содержимое папки данных. В этом случае нам нужны переменные коллекции, студенты и колледжи . Всякий раз, когда приложению нужны данные, оно использует эти переменные коллекции.

Создайте файл db.js в папке проекта следующим образом: 

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

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

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

Шаг 6 — Создайте файл схемы, schema.graphql

Создайте файл схемы в папке текущего проекта и добавьте следующее содержимое: 

type Query  {
   test: String
}

Шаг 7 — Создание файла резолвера resolvers.js

Создайте файл распознавателя в папке текущего проекта и добавьте следующее содержимое: 

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

Шаг 8 — Создайте Server.js и настройте GraphQL

Создайте файл сервера и настройте GraphQL следующим образом: 

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

Шаг 9 — Запустите приложение и протестируйте с GraphiQL

Проверьте структуру папок проекта test-app следующим образом: 

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

Запустите команду npm start, как показано ниже — 

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

Сервер работает в порту 9000, поэтому мы можем протестировать приложение с помощью инструмента GraphiQL. Откройте браузер и введите URL-адрес http: // localhost: 9000 / graphiql. Введите следующий запрос в редакторе — 

{
   Test 
}

Ответ от сервера приведен ниже — 

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

45
Share: