GraphQL - Пример

В этой главе мы создадим простой API, который возвращает приветственное сообщение HelloWorld и будет обращаться к нему с помощью GraphiQL.

пример

Этот пример основан на сервере NodeJS, Express и Apollo. Мы научимся соединять все концепции вместе со следующими шагами -

Шаг 1 - Настройка Express

ExpressJS - это платформа веб-приложений, которая помогает создавать веб-сайты и веб-приложения. В этом примере мы создадим GraphQL API поверх платформы Express.

Следующим шагом будет создание папки hello-world-serverи перейдите в ту же папку из терминала. Добавьте package.json и дайте имя пакету. Поскольку этот пакет используется только для внутреннего использования, мы можем объявить его частным.

{
   "name":"hello-world-server",
   "private":true
}

Установите зависимости для сервера Express, как показано ниже -

C:\Users\Admin\hello-world-server>npm install express body-parser cors

body-parser - это промежуточный пакет, который помогает Express эффективно обрабатывать запросы HTTP Post. cors - еще один промежуточный пакет, который обрабатывает совместное использование ресурсов из разных источников.

Создать server.js файл в папке проекта и введите в нем следующее -

const bodyParser = require('body-parser')
   const cors = require('cors')
   const express = require('express')
   const port = process.env.PORT|| 9000
   const app = express()
   
   //register middleware
   app.use(bodyParser.json() , cors())
   app.listen(port, () =>  console.log(`server is up and running at ${port}`)

Чтобы проверить, запущен ли сервер Express, выполните следующий код в окне терминала -

C:\Users\Admin\hello-world-server>node server.js

Следующий вывод отображается в консоли сервера. Это показывает, что экспресс-сервер работает на порту 9000.

server is up and running at 9000

Если вы откроете браузер и наберете http://localhost:9000, вы получите следующий экран -

Чтобы остановить сервер, нажмите Ctrl + C.

Шаг 2 - Установите GraphQL и Apollo Server

Теперь, когда Express настроен, следующим шагом будет загрузка следующих зависимостей GraphQL:

graphql
graphql-tools
apollo-server-express@1

Мы будем использовать Apollo server v1.0, так как это стабильная версия. Введите следующие команды для установки этих зависимостей -

C:\Users\Admin\hello-world-server>npm install graphql graphql-tools apollo-server-express@1

Мы можем проверить, успешно ли установлены эти зависимости, проверив package.json файл, который мы создали ранее.

{
   "name": "hello-world-server",
   "private": true,
   
   "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"
   }
}

Шаг 3 - Определите схему

Схема GraphQL определяет, какой тип объекта может быть получен из службы и какие поля у него есть. Схема может быть определена с помощьюGraphQL Schema Definition Language. Теперь добавьте следующий фрагмент кода вserver.js файл -

// Adding Type Definitions
const typeDefinition = `
   type Query  {
      greeting: String
   }

Здесь запрос содержит атрибут приветствия, который возвращает строковое значение.

Шаг 4 - Создайте резольвер

Первым шагом в создании распознавателя является добавление кода для обработки поля запроса приветствия. Это указано вresolver. Структура функции преобразователя должна соответствовать схеме. Добавьте следующий фрагмент кода вserver.js файл.

// Adding resolver
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}

Второй шаг - связать схему и преобразователь с помощью makeExecutableSchema. Эта функция предопределена в модуле graphql-tools. Добавьте следующий фрагмент кода в server.js файл.

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

Шаг 5 - Определите маршруты для получения данных из приложения ReactJS / GraphiQL

Добавьте следующий фрагмент кода в server.js файл -

const {graphqlExpress, graphiqlExpress} = require('apollo-server-express')

   //create routes for graphql and graphiql
   app.use('/graphql',graphqlExpress({schema}))
   
   app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))

Функция graphqlExpress помогает зарегистрировать маршрутhttp://localhost:9000/graphql. Приложение ReactJS может использовать эту конечную точку для запроса данных. Точно так же функция graphqliExpress помогает зарегистрировать маршрутhttp://localhost:9000/graphiql. Это будет использоваться клиентом браузера GraphiQL для тестирования API.

Полный код server.js приведен ниже -

const bodyParser = require('body-parser')
const cors = require('cors')
const express = require('express')
const port = process.env.PORT||9000
const app = express()

app.use(bodyParser.json() , cors())
const typeDefinition = `
type Query  {
   greeting: String
}`
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}
const {makeExecutableSchema} = require('graphql-tools')

const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

const {graphqlExpress,graphiqlExpress} = require('apollo-server-express')

app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
app.listen(port, () =>  console.log(`server is up and running ${port}`))

Шаг 6 - Запустите приложение

Выполнить server.js используя Node.js следующим образом -

C:\Users\Admin\hello-world-server>node server.js

Шаг 7 - Протестируйте GraphQL API

Откройте браузер и введите http://localhost:9000/graphiql. На вкладке запроса GraphiQL введите следующее -

{
   greeting
}

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

{
   "data": {
      "greeting": "Hello GraphQL From TutorialsPoint !!"
   }
}

Следующее изображение иллюстрирует ответ -

Note - Убедитесь, что используется Apollo Server Version 1.0.