[Перевод] Создайте сервер GraphQL с помощью NodeJS

Оригинальный адрес:Creating a GraphQL server with NodeJS

Оригинальный автор:Aman Mittal

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…

Переводчик:Raoul1996

Корректор:KarthusLorin, weibinzhu,leviding

Привет мир! В этом руководстве по GraphQL вы узнаете, как создать сервер GraphQL на основе NodeJS и Experss с использованием библиотеки Apollo Server версии 2.0.

Когда дело доходит до сетевых запросов между клиентами и серверами приложений, REST (Переходы состояний уровня представления) — один из самых распространенных вариантов их соединения. существуетREST APIВ мире все вращается вокруг наличия ресурсов в виде доступных URL-адресов. Затем мы выполним операции CURD (создание, чтение, обновление, удаление), которые являются основными методами HTTP, такими как GET, POST, PUT и DELETE, для взаимодействия с данными.

Вот пример типичного запроса REST:

// 请求示例
https://swapi.co/api/people/

// 上面请求的 JSON 格式响应
{
	"results": [
		{
			"name": "Luke Skywalker",
			"gender": "male",
			"homeworld": "https://swapi.co/api/planets/1/",
			"films": [
				"https://swapi.co/api/films/2/",
				"https://swapi.co/api/films/6/",
				"https://swapi.co/api/films/3/",
				"https://swapi.co/api/films/1/",
				"https://swapi.co/api/films/7/"
			],
    }
		{
			"name": "C-3PO",
			"gender": "n/a",
			"homeworld": "https://swapi.co/api/planets/1/",
			"films": [
				"https://swapi.co/api/films/2/",
				"https://swapi.co/api/films/5/",
				"https://swapi.co/api/films/4/",
				"https://swapi.co/api/films/6/",
				"https://swapi.co/api/films/3/",
				"https://swapi.co/api/films/1/"
			],
		}
  ]
}

Формат ответа REST API не обязательно будет JSON, но сегодня это предпочтительный метод для большинства API.В дополнение к REST появился еще один подход к обработке сетевых запросов: GraphQL. Открытый исходный код в 2015 году, он меняет способ, которым разработчики пишут API на стороне сервера и обрабатывают их на стороне клиента.. и разрабатывается и активно поддерживается Facebook.

Недостатки ОТДЫХА

GraphQL — это язык запросов для разработки API. В отличие от REST (архитектура или «один из способов ведения дел»), GraphQL был разработан на основе идеи о том, что клиент за один раз запрашивает с сервера только тот набор элементов, который ему нужен.

В приведенном выше примере используется REST или другая подобная архитектура. Когда мы спросили о фильме, в котором Люк Скайуокер появился во франшизе «Звездных войн», мы получили список电影илиhomeworld, они также содержат разные URL-адреса API, которые ведут нас к сведениям о разных наборах данных JSON. Это определенно пример чрезмерной выборки. Чтобы получить подробную информацию о персонаже Люке Скайуокере, появляющемся в фильме, и название его родной планеты, клиент может сделать несколько запросов к серверу.

С GraphQL это можно разбить на один сетевой запрос. Перейдите по URL-адресу API:https://graphql.github.io/swapi-graphql/, см. выполнение следующего запроса (запроса), чтобы увидеть.

Примечание. В приведенных ниже примерах вы можете игнорировать то, как GraphQL API работает за кулисами. Позже в этом руководстве я расскажу о создании вашего собственного (возможно, первого) GraphQL API.

{
	allPeople {
		edges {
			node {
				name
				gender
				homeworld {
					name
				}
				filmConnection {
					edges {
						node {
							title
						}
					}
				}
			}
		}
	}
}

Мы получим необходимые данные. например, имя персонажа, его пол (gender),домой(homeworld), и фильмы, в которых они появляются (films)заглавие. Запустив приведенный выше запрос, вы получите следующие результаты:

{
	"data": {
		"allPeople": {
			"edges": [
				{
					"node": {
						"name": "Luke Skywalker",
						"gender": "male",
						"homeworld": {
							"name": "Tatooine"
						},
						"filmConnection": {
							"edges": [
								{
									"node": {
										"title": "A New Hope"
									}
								},
								{
									"node": {
										"title": "The Empire Strikes Back"
									}
								},
								{
									"node": {
										"title": "Return of the Jedi"
									}
								},
								{
									"node": {
										"title": "Revenge of the Sith"
									}
								},
								{
									"node": {
										"title": "The Force Awakens"
									}
								}
							]
						}
					}
				},
				{
					"node": {
						"name": "C-3PO",
						"gender": "n/a",
						"homeworld": {
							"name": "Tatooine"
						},
						"filmConnection": {
							"edges": [
								{
									"node": {
										"title": "A New Hope"
									}
								},
								{
									"node": {
										"title": "The Empire Strikes Back"
									}
								},
								{
									"node": {
										"title": "Return of the Jedi"
									}
								},
								{
									"node": {
										"title": "The Phantom Menace"
									}
								},
								{
									"node": {
										"title": "Attack of the Clones"
									}
								},
								{
									"node": {
										"title": "Revenge of the Sith"
									}
								}
							]
						}
					}
				}
			]
		}
	}
}

Если клиент приложения запускает вышеуказанный URL-адрес GraphQL, ему нужно только сделать запрос в сети, чтобы получить желаемый результат. Это исключает любую возможность избыточной выборки или отправки нескольких запросов.

предпосылки

Чтобы пройти этот курс, вам просто нужно установить на свой локальный компьютерnodejsиnpmВот и все.

Nodejs ^8.12.0
npm ^6.4.1

Коротко о GraphQL

короче,GraphQLэто способ описать, как запроситьdataсинтаксис, обычно используемый для получения данных от клиента (также известный какquery) или изменить его (также известный какmutation).

GraphQL имеет несколько определяющих характеристик:

Это позволяет клиенту точно указать, какие данные требуются. Это также известно как декларативное извлечение данных.
Нет особых требований к сетевому уровню
Легче объединять данные из нескольких источников
Он использует строгую систему типов при объявлении структур данных в форме схемы и запроса. Это помогает проверять запросы перед отправкой сетевых запросов.

Строительные блоки для API GraphQL

GraphQL API состоит из четырех строительных блоков:

schema
query
mutations
resolvers

SchemaОпределяется на сервере как объект. Каждый объект соответствует типу данных, чтобы запрашивать их. Например:

type User {
	id: ID!
	name: String
	age: Int
}

Приведенная выше схема определяет, как выглядит пользовательский объект. где обязательные поляidиспользовать!Идентификация символа. Также содержит другие поля, такие какstringТипnameиintegerТипage. Это также будет использоваться при запросе данных.schemaаутентификация.

Queries— это метод, который вы используете для выполнения запросов к GraphQL API. Например, в нашем примере выше это похоже на получение данных, связанных со «Звездными войнами». Давайте упростим: если вы делаете запрос в GraphQL, вы запрашиваете конкретное поле объекта. Например, используя тот же API, что и выше, мы можем получить имена всех персонажей «Звездных войн». Ниже вы можете увидеть разницу, слева на картинке запрос, а справа результат. (Примечание переводчика: исходный текст находится справа от изображения, которое переводчик считает не очень подходящим)

Преимущество использования запросов GraphQL заключается в том, что они могут быть вложены сколь угодно глубоко. Это сложно сделать в REST API. Операции (в REST API) становятся намного сложнее.

Вот пример более сложного вложенного запроса:

Mutations:В архитектуре REST для изменения данных мы либо используемPOSTдобавить данные или использоватьPUTдля обновления данных существующего поля. В GraphQL общая концепция аналогична. Вы можете отправить запрос на выполнение операций записи на сервере. но. Эта форма запроса называется мутацией.

ResolversЯвляется связующим звеном между схемой и данными. Они предоставляют функциональные возможности, которые можно использовать для взаимодействия с базой данных посредством различных операций.

В этом уроке вы научитесь использовать компоненты, которые мы только что изучили.NodejsСоздайте сервер GraphQL.

Привет мир! Использование GraphQL

Теперь давайте напишем наш первый сервер GraphQL. В этом уроке мы будем использоватьApollo Server. Нам нужно установить три пакета для Apollo Server, чтобы использовать существующее приложение Express в качестве промежуточного программного обеспечения. Прелесть Apollo Server в том, что его можно использовать с несколькими популярными фреймворками для Node.js: Express,KoaиHapi. Сам Apollo не зависит от библиотек, поэтому он может взаимодействовать со многими сторонними библиотеками в клиентских и серверных приложениях.

Откройте терминал и установите следующие зависимости:

# 首先新建一个空文件夹
mkdir apollo-express-demo

# 然后初始化
npm init -y

# 安装需要的依赖
npm install --save graphql apollo-server-express express

Давайте кратко разберемся, что делают эти зависимости.

graphqlэто вспомогательная библиотека, а в нашем случае необходимый модуль
добавлено в существующее приложениеapollp-server-expressсоответствующий пакет поддержки HTTP-сервера
expressЭто Nodejs веб-каркас

Вы можете видеть на изображении ниже, что я установил все зависимости без каких-либо ошибок.

В корневом пути вашего проекта создайте новый файл с именемindex.js, файл, содержащий следующий код.

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');

const typeDefs = gql`
	type Query {
		hello: String
	}
`;

const resolvers = {
	Query: {
		hello: () => 'Hello world!'
	}
};

const server = new ApolloServer({ typeDefs, resolvers });

const app = express();
server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
	console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);

Это отправная точка для файлов нашего сервера. Для начала нам просто нужноexpressмодуль.gql— литеральный тег шаблона для записи схем GraphQL в виде типов. Схема состоит из определений типов и обязательно должна включать тип Query для чтения данных. Он также может содержать поля и вложенные поля, представляющие другие поля данных. В нашем примере выше мы определилиtypeDefsнаписать схему graphQL.

потомresolversВойди в поле зрения. Resolver используется для возврата данных поля из схемы. В нашем примере мы определяем преобразователь, который принимает функциюhello()Сопоставляется с реализацией на нашей схеме. Далее мы создаемserver, который используетApolloServerкласс для создания экземпляра и запуска сервера. Поскольку мы используем Express, нам нужно интегрироватьApolloServerсвоего рода. пройти черезapplyMiddleware()в видеappчтобы передать его, чтобы добавить промежуточное программное обеспечение для сервера Apollo. здесьapp— это экземпляр Express, представляющий существующее приложение.

Наконец, мы используемapp.listen()для загрузки сервера. Чтобы запустить сервер, просто откройте терминал и выполните командуnode index.js. Теперь перейдите по ссылке из окна браузера:http://localhost:4000/graphqlДавайте посмотрим на это в действии.

Сервер Apollo настраивает игровую площадку GraphQL, чтобы вы могли быстро запускать запросы и изучать схемы, как показано ниже.

Чтобы выполнить запрос, отредактируйте пустой раздел слева и введите следующий запрос. Затем нажмите кнопку ▶ (воспроизведение) посередине.

Карта схемы справа описывает наш запросhelloтип данных. Это происходит непосредственно из определения на нашем сервереtypeDefs.

вуаля! Вы только что создали свой первый сервер GraphQL. Теперь давайте расширим наше понимание реального мира.

Создание API с помощью GraphQL

Пока что мы разобрали все необходимые модули вместе с необходимыми терминами, которые к ним прилагаются. В этом разделе мы будем использовать сервер Apollo для создания небольшогоStar Wars API. Как вы могли догадаться, сервер Apollo — это библиотека, которая помогает вам подключить вашу схему GraphQL к HTTP-серверу с помощью Nodejs. Он не ограничивается конкретной инфраструктурой Node. Например, в предыдущем разделе мы использовали ExpressJS. Поддержка серверов АполлонаKoa,Hapiи лямбда. Для нашего API мы продолжаем использовать Express.

Компиляция с помощью Babel

Если вы хотите начать с нуля, вперед. отHello World! With GraphQLраздел для установки всех библиотек. Вот все зависимости, которые мы установили в предыдущем разделе:

"dependencies": {
		"apollo-server-express": "^2.1.0",
		"express": "^4.16.4",
		"graphql": "^14.0.2"
	}

Я буду использовать тот же проект и те же файлыindex.jsПерейдите к запуску загрузочного сервера. Но прежде чем мы создадим наш API, я хочу показать вам, как использовать модули ES6 в нашем демонстрационном проекте. Для использования интерфейсных библиотек, таких как React и Angular, они уже поддерживают функции ES6. Напримерimportиexport defaultтакое заявление. Nodejs версия8.x.xрешил эту проблему. Все, что нам нужно, — это транспилятор, который позволит нам писать JavaScript с использованием функций ES6. Вы можете полностью пропустить этот шаг и использовать старыйrequire()утверждение.

Так что жепреобразовательШерстяная ткань?

преобразователь(Transpiler), также известный как «компилятор исходного кода», считывает код из исходного кода, написанного на одном языке программирования, и преобразует его в эквивалентный код на другом языке.

В случае с Nodejs мы не меняем языки программирования, а используем новые функции на языках, которые не поддерживаются LTS-версией Node, которую я сейчас использую. я установлюBabel переводчики включите его в нашем проекте в следующем процессе настройки.

Во-первых, вам нужно установить некоторые зависимости, не забудьте использовать-Dпараметр. Потому что мы будем использовать эти зависимости только в среде разработки.

npm install -D babel-cli babel-preset-env babel-watch

Как только вы их успешно установили, добавьте.babelrcфайл и добавьте следующую конфигурацию:

{
	"presets": [env]
}

Завершающим этапом процесса настройки являетсяpackage.jsonдобавитьdev 脚本（script）. Компилятор babel запустится автоматически, как только (файл проекта) изменится. Это поbabel-watchЗаканчивать. В то же время он также отвечает за перезапускNodejsСетевой сервер.

"scripts": {
	"dev": "babel-watch index.js"
}

Чтобы увидеть его в действии, добавьте следующий код вindex.js, и посмотреть, все ли в порядке.

import express from 'express';

const app = express();

app.get('/', (req, res) => res.send('Babel Working!'));

app.listen({ port: 4000 }, () =>
	console.log(`🚀 Server ready at http://localhost:4000`)
);

введите в терминалеnpm run dev, не удивительно, можно увидеть следующую информацию:

Вы также можете посетить в своем браузереhttp://localhost:4000/увидеть его в действии.

добавить схему

Нам нужна схема для запуска нашего GraphQL API. впусти насapiСоздайте каталог с именемapi/schema.jsновый файл. Добавьте следующую схему.

import { gql } from 'apollo-server-express';

const typeDefs = gql`
	type Person {
		id: Int
		name: String
		gender: String
		homeworld: String
	}
	type Query {
		allPeople: [Person]
		person(id: Int!): Person
	}
`;

export default typeDefs;

Наша схема содержит всего два запроса. первыйallPeople, с помощью которого мы можем перечислить все символы в API. второй запросpersonзаключается в том, чтобы получить человека, используя его идентификатор. Оба типа запросов основаны наPersonПользовательский тип для объекта, который содержит четыре свойства.

Добавить преобразователь

Мы видели важность резольверов. Он основан на простом механизме связывания схемы и данных. Resolver содержит логику и функции для запросов или мутаций. Затем используйте их для извлечения данных и возврата их по соответствующему запросу.

Если вы построили свой сервер до использования Express, вы можете думать о преобразователях как о контроллерах, каждый из которых создан для определенного маршрута. Поскольку мы не используем базу данных за сервером, мы должны предоставить некоторые фиктивные данные для имитации нашего API.

Создатьresolvers.jsНовый файл и добавьте файл ниже.

const defaultData = [
	{
		id: 1,
		name: 'Luke SkyWaler',
		gender: 'male',
		homeworld: 'Tattoine'
	},
	{
		id: 2,
		name: 'C-3PO',
		gender: 'bot',
		homeworld: 'Tattoine'
	}
];

const resolvers = {
	Query: {
		allPeople: () => {
			return defaultData;
		},
		person: (root, { id }) => {
			return defaultData.filter(character => {
				return (character.id = id);
			})[0];
		}
	}
};

export default resolvers;

Во-первых, мы определяемdefaultDataМассив, содержащий сведения о двух персонажах «Звездных войн». Согласно нашей схеме, эти два объекта в массиве имеют четыре свойства. Далее нашresolversобъект, который содержит две функции. можно использовать здесьallPeople()извлекатьdefaultDataВсе данные в массиве.person()Стрелочные функции используют параметрыidдля получения объекта человека с идентификатором запроса. Это уже определено в нашем запросе.

Вы должны экспортировать объекты преобразователя и схемы, чтобы использовать их с промежуточным программным обеспечением Apollo Server.

Сервер реализации

Теперь, когда мы определили схему и преобразователь, мы собираемсяindex.jsСервер реализован в файле. Первый изapollo-server-expressИмпортируйте Apollo-Server. Нам также нужно изapi/Папка импортирует нашу схему и объекты распознавателей. Затем создайте экземпляр GraphQL API с помощью промежуточного программного обеспечения GraphQL из библиотеки Apollo Server Express.

import express from 'express';
import { ApolloServer } from 'apollo-server-express';

import typeDefs from './api/schema';
import resolvers from './api/resolvers';

const app = express();

const PORT = 4000;

const SERVER = new ApolloServer({
	typeDefs,
	resolvers
});

SERVER.applyMiddleware({ app });

app.listen(PORT, () =>
	console.log(`🚀 GraphQL playground is running at http://localhost:4000`)
);

Наконец, мы используемapp.listen()для загрузки нашего экспресс-сервера. Теперь вы можете выполнять команды из терминалаnpm run devдля запуска сервера. После запуска узла сервера появится сообщение об успешном завершении, указывающее, что сервер запущен.

Теперь, чтобы протестировать наш GraphQL API, перейдите в окно браузера.http://localhost:4000/graphqlURL и выполните следующий запрос.

{
  allPeople {
    id
    name
    gender
    homeworld
  }
}

нажмитеplayкнопку, и вы увидите знакомый результат в правом разделе, как показано ниже.

Все работает нормально из-за нашего типа запросаallPeopleС пользовательской бизнес-логикой все данные могут быть получены с помощью преобразователя (в нашем случае мы находимся вresolvers.jsданные моделирования представлены как данные в ). Чтобы получить объект одного человека, попробуйте выполнить другой запрос, подобный этому. Помните, что требуется удостоверение личности.

{
	person(id: 1) {
		name
		homeworld
	}
}

Запустите приведенный выше запрос, и в результате вы можете получить значение каждого поля/свойства, которое вы получаете для запроса. Ваш результат будет похож на следующий.

Идеально! Я считаю, что вы, должно быть, освоили создание запроса GraphQL и его выполнение. Библиотека Apollo Server очень мощная. Это позволяет нам редактировать игровые площадки.Предположим, мы хотим отредактировать тему детской площадки? Все, что нам нужно сделать, это создатьApolloServerпредоставить опцию при создании экземпляра, в нашем случае это былоSERVER.

const SERVER = new ApolloServer({
	typeDefs,
	resolvers,
	playground: {
		settings: {
			'editor.theme': 'light'
		}
	}
});

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

После смены темы получаем результат ниже.

в заключении

Если вы пройдете обучение шаг за шагом, топоздравляю!🎉

Вы узнали, как настроить сервер Express с помощью библиотеки Apollo для настройки собственного API GraphQL. Apollo Server — это проект с открытым исходным кодом и одно из самых стабильных решений для создания API-интерфейсов GraphQL для полнофункциональных приложений. Он также поддерживает React, Vue, Angular, Meteor и Ember на стороне клиента из коробки, а также нативную мобильную разработку с использованием Swift и Java. Дополнительную информацию об этом можно найти наздесьоказаться.

Ознакомьтесь с полным кодом руководства в этом репозитории Github 👇

amandeepmittal/apollo-express-demo: Сервер Аполлон Экспресс. Внесите свой вклад в разработку amandeepmittal/apollo-express-demo, создав учетную запись на Github.

Запускаете новый проект Node.js или ищете разработчика Node?

Crowdbotics помогает компаниям создавать классные вещи с помощью Node(Кроме). Если у вас есть проект Node и вам нужны другие ресурсы для разработчиков, напишите нам. Crowbotics может помочь вам оценить время сборки для заданной функциональной спецификации продукта и предоставить выделенных разработчиков Node в соответствии с вашими потребностями.Если вы строите с помощью Node,Посмотреть Crowdbotics.

благодарныйWilliam WickeyОказать помощь в редактировании.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на .内容覆盖Android,iOS,внешний интерфейс,задняя часть,блокчейн,продукт,дизайн,искусственный интеллекти другие поля, если вы хотите видеть больше качественных переводов, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.