GraphQL - Настройка среды
В этой главе мы узнаем о настройке среды для GraphQL. Для выполнения примеров в этом руководстве вам понадобится следующее:
Компьютер под управлением Linux, macOS или Windows.
Веб-браузер, желательно последнюю версию Google Chrome.
Установлена последняя версия Node.js. Рекомендуется последняя версия LTS.
Visual Studio Code с установленным расширением GraphQL для VSCode или любым редактором кода по вашему выбору.
Как создать сервер GraphQL с помощью Nodejs
Мы рассмотрим подробный пошаговый подход к созданию сервера GraphQL с помощью Nodejs, как показано ниже -
Шаг 1. Проверьте версии узла и Npm
После установки NodeJs проверьте версию node и 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 и добавьте два файлаstudents.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": "[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"
}
]
Шаг 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 /
-->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 !!"
}
}