Добавьте AWS AppSync GraphQL API в свое приложение React

Введение

В предыдущем посте мы с нуля установили и настроили AWS Amplify. Затем создал приложение React и за несколько простых шагов добавил полный поток аутентификации.

Во второй части я добавлю в приложение API AWS AppSync GraphQL.

GraphQL

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

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

Вы можете узнать больше о GraphQL здесь:



GraphQL: язык запросов для API.
Узнайте о GraphQL, о том, как он работает и как его использовать, из этой серии статей. Ищу документацию о том, как… graphql.org



AWS AppSync

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

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

С помощью AppSync вы можете создавать масштабируемые приложения, в том числе требующие обновлений в реальном времени, для ряда источников данных, таких как хранилища данных NoSQL, реляционные базы данных, HTTP API и ваши собственные источники данных с помощью AWS Lambda.

Для мобильных и веб-приложений AppSync дополнительно обеспечивает локальный доступ к данным, когда устройства отключаются, и синхронизацию данных с настраиваемым разрешением конфликтов, когда они снова в сети.

Узнайте больше о AWS AppSync, посетив Руководство разработчика AWS AppSync.

Давайте начнем

Отправной точкой является законченный код из первой части.

Клонировать репо:

$ git clone [email protected]:mlomboglia/react-amplify.git
cd react-amplify
cd part1-authentication
npm install

Протестируйте свое приложение и убедитесь, что оно запущено:

npm start

Вы должны увидеть экран входа в систему:

Войдите или создайте нового пользователя для доступа к панели инструментов главного экрана.

Добавить поддержку API в приложение

Для создания API воспользуемся AWS AppSync.

AWS AppSync упрощает разработку приложений, позволяя создавать гибкий API для безопасного доступа, управления и объединения данных из одного или нескольких источников данных.

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

Давайте воспользуемся Amplify CLI, чтобы начать со следующей команды:

$ amplify add api

Это запустит ряд шагов, которые помогут нам создать первый API AWS AppSync GraphQL.

Сделайте выбор ниже и нажмите Enter, чтобы завершить создание API. Я рекомендую использовать пул пользователей Cognito , настроенный в первой части для аутентификации. Вы можете использовать ключ API для тестирования, но не рекомендуется в производственной среде.

В этом руководстве я буду использовать предложенный одиночный объект с полями (например, «Todo» с идентификатором, именем, описанием) от AWS Amplify. Файл graphql.schema будет автоматически создан по следующему пути: /amplify/backend/api/todo.

type Todo @model {
  id: ID!
  name: String!
  description: String
}

Amplify CLI поставляется с GraphQL Transformer, который преобразует аннотированные файлы схемы GraphQL в соответствующий шаблон AWS CloudFormation в соответствии с вашими требованиями к данным.

Сюда входят такие параметры, как следующие:

  • @model для хранения типов в Amazon DynamoDB.
  • @auth для определения различных стратегий авторизации.
  • @connection для определения отношений между @model типами объектов.
  • @searchable для потоковой передачи данных типа объекта @model в сервис Amazon Elasticsearch.

Вы можете узнать больше о GraphQL Transform здесь:



Преобразование GraphQL
Преобразование GraphQL предоставляет простую в использовании абстракцию, которая помогает быстро создавать серверные части для вашего Интернета и… aws-amplify.github.io



Теперь отправьте схему в AWS.

$ amplify push

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

AWS AppSync создаст AWS CloudFormation на основе вашей структуры папок. Этот процесс займет некоторое время. Мы рассмотрим локальные вызовы для ускорения разработки в будущих публикациях.

После завершения процесса он покажет вашу недавно созданную конечную точку. Вы всегда можете редактировать свою схему и вносить новые изменения.

В вашей новой структуре папок расширения теперь есть внутренняя папка с todo api и auth, ваш schema.graphql и информация AWS CloudFormation. Внутри папки src вы найдете папку graphql со всем сгенерированным кодом, готовым к использованию.

Перейдите в Консоль AWS → AWS AppSync, чтобы увидеть развернутую схему. Вы также можете запускать запросы из раздела Запросы.

В разделе Источники данных вы также можете увидеть недавно созданную таблицу TodoTable в DynamoDB. Да, это было создано автоматически для хранения ваших данных.

Если вы хотите обновить свой API, откройте backend/api/todo/schema.graphql файл своего проекта (не тот, который находится в папке backend/api/blog/build) и отредактируйте его.

Вы можете скомпилировать backend/api/todo/schema.graphql, запустив:

$ amplify api gql-compile
$ amplify push

Не забывайте продвигать новые изменения.

Добавьте Todo GraphQL в приложение React

Теперь давайте добавим Todo GraphQL в наше приложение React. Amplify CLI уже включил src/aws-exports.js конфигурацию, необходимую для AppSync API.

Добавить серверную часть GraphQL

Откройте App.js и добавьте импорт, чтобы включить как категорию API, так и метод graphqlOperation следующим образом:

import { API, graphqlOperation } from 'aws-amplify';

Измените приложение на компонент класса. Не забудьте добавить импорт вверху.

Добавьте следующий запрос и изменения в свой код перед определением class App extends Component {...} следующим образом:

Теперь внутри компонента App добавьте следующие два метода перед методом render():

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

Это ваш заполненный App.js файл:

Запустите приложение:

$ npm run start

Авторизуйтесь или создайте нового пользователя.

Теперь щелкните GraphQL Todo Mutation, чтобы добавить фиктивный элемент:

Щелкните Запрос списка GraphQL, чтобы вывести список своих элементов:

Вы можете проверить, что ваши элементы хранятся в AWS Console → DynamoDB

Следующие шаги

Это только начало использования Amplify с React. В следующих постах я расширю приложение, добавив:

  • Сделайте приложение красивее с помощью Material-UI: популярный фреймворк React UI.
  • Аналитика: прямая аналитика для отслеживания пользовательских сеансов, атрибутов и показателей в приложении.
  • Хранилище: безопасное управление пользовательским контентом в облаке или на устройстве.

Весь исходный код доступен в моем GitHub.

Обновлять

Теперь доступно создание приложения на React с помощью AWS Amplify в простых шагах (Часть 3). Добавьте аналитику и хранилище в свое приложение React.

2020–05–21: Обновлено для использования Amplify версии 3

Удачного кодирования!