Что именно мы здесь делаем?

Мы собираемся создать схему GraphQL, которая будет переносить вызовы в существующий REST API. Эта схема будет получать и разрешать запросы GraphQL на стороне клиента.

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

Наша схема GraphQL будет действовать как слой фасада. Фасад — это просто причудливый способ сказать: «Он упрощает наш существующий REST API».

Я подготовил шаблонное репо для справки Здесь.

Что такое REST API?

RESTful API — это архитектурный стиль интерфейса прикладной программы (API), который использует HTTP-запросы для доступа и использования данных. Эти данные можно использовать для типов данных GET, PUT, POST и DELETE, которые относятся к операциям чтения, обновления, создания и удаления ресурсов.

Отметьте здесь для отличного объяснения.

Что такое GraphQL?

GraphQL — это язык запросов для вашего API и среда выполнения на стороне сервера для выполнения запросов с использованием системы типов, которую вы определяете для своих данных. GraphQL не привязан к какой-либо конкретной базе данных или механизму хранения, а вместо этого поддерживается вашим существующим кодом и данными.

Отметьте здесь для отличного объяснения.

Настройка бессерверного проекта

Шаблон для этого проекта был создан с помощью Serverless.
Руководство по настройке смотрите здесь.

Если вы просто хотите получить локально настроенный экземпляр GraphQL, вы можете пропустить этап без сервера и запустить проект с помощью узлового сервера,это будет запустите все, используя Node, Express и GraphQL.

Наш существующий REST API

Чтобы не загрязнять этот пост ненужными сложностями, мы будем использовать статический файл JSON для имитации нашего ответа REST API.

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

Резолверы, схемы и типы

Для запросов и мутаций в GraphQL вам необходимо реализовать Resolvers, Schema & Types, вот краткое описание каждого из них.

Здесь — отличный источник информации о GraphQL.

Резолверы:

Преобразователь — это набор функций, которые генерируют ответ на запрос GraphQL. Проще говоря, преобразователь действует как обработчик запросов GraphQL.

Схема:

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

Типы:

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

Что такое запрос GraphQL?

Операция GraphQL может быть операцией чтения или записи. Запрос GraphQL используется для чтения или выборки значений, в то время как мутация используется для записи или публикации значений. В любом случае операция представляет собой простую строку, которую сервер GraphQL может проанализировать и отправить в ответ данные в определенном формате. Популярным форматом ответа, который обычно используется для мобильных и веб-приложений, является JSON.

Что такое мутация GraphQL?

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

Что такое GrapiQL?

GraphiQL — это GraphQL интегрированная среда разработки (IDE), которая позволяет нам выполнять все наши запросы и мутации и проверять, все ли работает должным образом.

Чтобы получить доступ к GraphiQL для этого проекта, вам просто нужно перейти в корень /.

Оказавшись там, вы увидите интерфейс, левая сторона предназначена для ввода вашего запроса/мутации, правая сторона – это место, где будут отображаться результаты/ошибки.

В ридми шаблона я дал вам примеры запросов для использования в GraphiQL.

Пример запроса:

{
 posts{
  _id,
  title,
  subtitle
 }
}

Пример мутации:

mutation {
 addPost(
    title: "Brand New Post",
    subtitle: "This is super interesting",
    text: "The body for the new blog post"
 ) {
    title
    subtitle
    text
 }
}

Собираем все вместе

Мы создадим проект, который можно будет запускать локально на сервере Node или из экземпляра AWS Lamda. 🚀

Прежде чем продолжить, убедитесь, что у вас установлен Node.

Я создал стандартный репозиторий, чтобы сопровождать этот пост Здесь.

Чтобы запустить шаблон, просто выполните следующие 3 шага:

  • клонировать репозиторий
  • установить зависимости (yarn или npm install)
  • запустить: узел сервера

Как только он заработает, перейдите по URL-адресу, и вам будет представлен GraphiQL.

Вот небольшое объяснение основных частей этого проекта.

Настройка узла:

Чтобы запустить наш экземпляр Node, нам нужны всего два файла:

сервер.js

См. Здесь. Этот файл является базовым для запуска нашего приложения Node.

app.js

См. Здесь. Это настраивает наш экспресс-сервер и нашу конечную точку GraphQL.

Интересно отметить, что в приведенном ниже блоке graphiql: true позволяет нам использовать инструмент GraphiQL, упомянутый выше.

app.use( ‘/’, graphqlHTTP({ 
    graphiql: true, 
    schema: GraphQLSchema
}));

Настройка Lambda:

Если вы заинтересованы только в том, чтобы запустить это в Node, вы можете пропустить это.

Однако, если вы хотите, чтобы это работало на AWS, вам потребуется создать файл serverless.yml и соответствующую функцию-обработчик.

Serverless.yml

См. здесь. Этот файл настраивает все, что вам нужно для AWS API Gateway, позволяя конечным точкам использовать GraphiQL в AWS.

Это блок, который обрабатывает создание маршрутов. Самое замечательное в этом то, что он избавляет вас от необходимости входить в систему и вручную создавать маршруты.

functions:  
    getPosts:    
        handler: lambda.handler    
        events: 
          - http:          
               path: posts          
               method: get          
               cors: true      
          - http:          
               path: posts          
               method: post          
               cors: true

лямбда.js

См. Здесь. Функция обработчика будет запущена при вызове маршрутов нашего шлюза API.

Мы используем пакет npm aws-serverless-express. Это позволяет нам запускать бессерверные приложения и REST API, используя нашу существующую среду приложений Node.js поверх AWS Lambda и Amazon API Gateway. .

Настройка GraphQL:

Все необходимое для настройки схемы GraphQL можно найти в этом каталоге.

У нас есть наши запросы, преобразователи, типы и мутации, разделенные на отдельные каталоги.

схема.js

См. Здесь. Наш js-файл схемы является сердцем нашей настройки GraphQL, здесь мы указываем наши запросы и мутации, которые мы настроили.

Наш запрос (см. здесь) связан с нашим распознавателем (см. здесь). Здесь вы должны сделать вызов API для извлечения данных, в этом примере я возвращаю статический JSON. объект для имитации данных, возвращаемых из API.

Вы заметите, что в нашем Query мы ссылаемся на наш тип (см. здесь). Это гарантирует, что данные, которые мы возвращаем, являются именно теми, которые мы ожидаем, позволяя GraphQL работать. его магия и работа, как и ожидалось.

Наша мутация (см. здесь) перечисляет полезную нагрузку, которую она ожидает получить, а также типы ожидаемых данных. Если передается достаточная полезная нагрузка, она попадет в функцию разрешения.

Функция разрешения — это то, где вы должны отправить полезную нагрузку в свой API для вставки или обновления, а затем вернуть измененный ответ. В этом примере нам просто вернут отправленные нами аргументы.

Подведение итогов:

Я надеюсь, что это помогло пролить свет на то, как реализовать GraphQL.

Как было сказано выше, клонируйте шаблон и приступайте к работе.