Введение
Apollo Server — это библиотека, которая помогает вам подключить схему GraphQL к HTTP-серверу в Node.js. Мы попытаемся объяснить это на примере, ссылка, используемая для клонирования этого проекта, указана ниже: -
git clone https://[email protected]/prwl/apollo-tutorial.git
Эта технология и ее концепции могут быть лучше всего объяснены, как показано ниже.
Вызов
Здесь одной из основных целей является создание каталога и установка пакетов. Это в конечном итоге приведет нас к реализации нашей первой подписки на GraphQL с сервером Apollo и PubSub.
Решение
Для этого первый шаг включает в себя создание новой папки в вашем рабочем каталоге. Текущий каталог изменяется на эту новую папку, и создается новая папка для хранения кода вашего сервера и его запуска. Это создаст для нас файл package.json. После этого устанавливаем несколько библиотек. После установки этих пакетов следующим шагом будет создание файла index.js в корневом каталоге сервера.
Создать каталог Установить пакеты
npm install apollo-server-express express graphql nodemon apollo-server
Подключение к серверу Apollo
Сначала Index.js подключается к серверу Apollo. Каждая библиотека настроена на начало работы с исходным кодом в файле index.js. Для этого вам сначала нужно импортировать необходимые компоненты для начала работы с Apollo Server в Express. Используя метод applyMiddleware() сервера Apollo, вы можете выбрать любое промежуточное ПО, в данном случае это Express.
import express from 'express';
import { ApolloServer, gql } from '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}`)
);
Схема GraphQL, предоставленная серверу Apollo, является единственными доступными данными для чтения и записи данных через GraphQL. Это может произойти с любым клиентом, использующим GraphQL API. Схема состоит из определений типов, которые начинаются с обязательного типа Query верхнего уровня для чтения данных, за которым следуют поля и вложенные поля. В спецификации GraphQL сервер Apollo имеет различные скалярные типы для определения строк (String), логических значений (Boolean), целых чисел (Int) и т. д.
В схеме GraphQL для настройки сервера Apollo распознаватели используются для возврата данных для полей из схемы. Источник данных не имеет значения, потому что данные могут быть жестко закодированы, могут поступать из базы данных или из другой конечной точки API (RESTful).
Мутации
До сих пор мы определяли только запросы в нашей схеме GraphQL. Помимо типа Query существуют также типы Mutation и Subscription. Там вы можете сгруппировать все свои операции GraphQL для записи данных вместо их чтения.
Как видно из приведенного выше фрагмента кода. В этом случае мутация createMessage принимает в качестве аргумента ненулевой текстовый ввод и возвращает созданное сообщение в виде строки.
Опять же, вам нужно реализовать резолвер как аналог для мутации так же, как и с предыдущими запросами, что происходит в части мутации карты резолвера:
Преобразователь мутации имеет доступ к тексту во втором аргументе. Родительский аргумент не используется.
На данный момент мутация создает строку сообщения и возвращает ее в API. Однако у большинства мутаций есть побочные эффекты, поскольку они записывают данные в ваш источник данных или выполняют другое действие. Чаще всего это будет операция записи в вашу базу данных, но в данном случае мы просто возвращаем текст, переданный нам в качестве аргумента.
Это первая мутация. Вы можете попробовать это прямо сейчас в GraphQL Playground:
mutation {
createMessage (text: "Hello GraphQL!")
}
Результат запроса должен выглядеть следующим образом в соответствии с вашими определенными примерными данными:
Подписки
До сих пор вы использовали GraphQL для чтения и записи данных с помощью запросов и мутаций. Это две основные операции GraphQL, необходимые для подготовки сервера GraphQL к операциям CRUD. Далее вы узнаете о подписках GraphQL для связи в реальном времени между клиентом GraphQL и сервером.
Настройка подписки на сервер Apollo
Поскольку мы используем Express в качестве промежуточного программного обеспечения, предоставьте подписки с расширенной настройкой HTTP-сервера в файле index.js:
import http from 'http'; ... server.applyMiddleware({ app, path: '/graphql' }); const httpServer = http.createServer(app);httpServer.listen({ port: 8000 }, () => {...
server.installSubscriptionHandlers(httpServer);
console.log('Apollo Server on http://localhost:8000/graphql');
});
Чтобы завершить настройку подписки, вам потребуется использовать один из доступных механизмов PubSub для публикации и подписки на события. Сервер Apollo поставляется со своим собственным по умолчанию.
Давайте реализуем конкретную подписку на создание сообщения. Другой клиент GraphQL должен иметь возможность прослушивать создание сообщений.
Создайте файл с именем subscription.js в корневом каталоге вашего проекта и вставьте в него следующую строку:
import { PubSub } from 'apollo-server'; export const CREATED = 'CREATED'; export const EVENTS = {export default new PubSub();
MESSAGE: CREATED,
};
Единственная недостающая часть — это использование события и экземпляра PubSub в вашем преобразователе.
Также обновите схему для вновь созданной подписки:
Подписка в качестве распознавателя обеспечивает аналог подписки в схеме сообщения. Однако, поскольку для событий используется механизм издатель-подписчик (PubSub), вы реализовали только подписку, а не публикацию. Клиент GraphQL может прослушивать изменения, но пока нет опубликованных изменений. Лучшее место для публикации вновь созданного сообщения — в том же файле, что и созданное сообщение:
Мы реализовали вашу первую подписку на GraphQL с помощью Apollo Server и PubSub. Чтобы проверить это, создайте новое сообщение на вкладке в игровой площадке Apollo. На другой вкладке мы можем прослушать нашу подписку.
В первой вкладке выполняем подписку:
Во второй вкладке выполните мутацию createMessage:
mutation {
createMessage(text: "My name is John.")
}
Теперь проверьте первую вкладку (подписка) на наличие такого ответа:
Мы внедрили подписки на GraphQL.
