Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Як побудувати Serverless GraphQL і REST APIs за допомогою AWS Amplify

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by Elen (you can also view the original English article)

AWS Amplify дозволяє розробникам швидко створювати та з'єднуватись з потужними сервісами в хмарі. В попередній статті ви дізналися, як встановити Amplify в проекті React і використовувати ідентифікацію, S3 зберігання та хостинг. Якщо вам потрібно познайомитись з AWS Amplify, спочатку ознайомтесь з цією статтею.

У даній статті ми продовжимо вивчення React та AWS Amplify, ознайомившись з такими опціями як управління шаром даних GraphQL і лямбда-виразом.

Додаємо GraphQL API

Давайте подивимося на те, як додати AWS AppSync GraphQL API в наш проект і почати використовувати його саме в нашому проекті.

API, який ми створимо, буде API ресторану, який нам подобається або який ми хотіли б відвідати.

Щоб додати GraphQL API в наш проект, ми можемо скористатися наступною командою:

Вам потрібно буде відповісти на декілька питань. Виберіть доступні опції:

  • тип сервісу: GraphQL;
  • ім'я API: TutsGraphQLAPI;
  • тип авторизації: API key;
  • анотована схема GraphQL: N;
  • guided schema creation: Y;
  • Що як найкраще описує ваш проект? Єдиний об'єкт з полями (наприклад  "Todo" з ID, назвою, описом);
  • Ви хочете змінити схему зараз? Y.

Коли з'явиться підказка, оновіть схему наступним чином і потім збережіть файл:

Це просто створить дані одного типу - Restaurant - з необхідними полями id та імені, а також додаткового опису.

Тепер давайте оновимо наш акаунт:

Тепер API створено!

Що тут щойно трапилось? AWS Amplify використав вбудовану бібліотеку GraphQL Transform, щоб створити довершений API GraphQL, включаючи додаткову схему, ресолвери та джерело даних.

Щоб в будь-який час переглядати AWS AppSync API після того, як він був створений, ви можете перейти до панелі інструментів https://console.aws.amazon.com/appsync і клікнути на API, який щойно був створений (переконайтесь,що ваш регіон указаний вірно). З панелі AWS AppSync ви можете переглядати конфігурацію API, виконувати запити і зміни даних API.

Зміна даних (Mutations) GraphQL

Далі будемо взаємодіяти з API з додатку React.

Перше, що ми хотіли б зробити, це створити мутацію, зміну даних. В GraphQL мутації є еквівалентом операцій PUTPUSH і DELETE в REST. Оскільки в нашій базі поки що немає ніяких даних, ми створимо мутацію для нового ресторану.

Для цього будемо імпортувати API і graphqlOperation з AWS Amplify, визначаючи, а потім і виконуючи мутацію, зміну даних.

Давайте поглянемо на приклад додатка, який реалізує мутацію. В App.js, спочатку ми імпортуємо React, наш додаток CSS, і необхідні компоненти AWS Amplify.

Далі визначаємо мутацію і додаємо ресторан. Ми вказуємо, що мутація приймає ім'я, опис, а також називається createRestaurant. Дана мутація була визначена автоматично, коли вище ми створили схему Restaurant. Зверніть увагу, що мутація визначена в GraphQL, на мові запитів домену.

Тепер ми створимо компонент додатка.

Далі, все ще знаходячись всередині компонента App, ми визначимо функцію для виконання мутації. Це здійснюється через виклик API.graphql, проходячи в мутацію і дані.

Далі ми виконуємо рендеринг компонента, поєднавши управління змінами і функції мутації.

На кінець, ми експортуємо компонент App з ідентифікацією.

Ви повинні мати можливість запускати цей код і створювати нові елементи ресторану з цим API.

Для перегляду фактичного джерела даних, щоб побачити, чи є там дані, відкрийте AWS AppSync dashboard, виберіть ваш API, натисніть на Data Sources в лівому меню і клікніть на Resource Name. Це відкриє таблицю Amazon DynamoDB. Ви можете бачити в ній дані на вкладці Items.

Запуск запитів GraphQL

Далі давайте подивимося, як робити запит даних з API. Ми реалізуємо це в три кроки:

  1. Визначимо запит.
  2. Виконаємо запит, коли завантажуватиметься додаток.
  3. Збережемо результат запиту і виконаємо рендеринг в UI.

Спочатку визначимо запит в новому компоненті. Для цього ми знову користуємося мовою GraphQL. Ми використовуємо запит listRestaurants, який було визначено автоматично, коли ми запустили схему Restaurants. Фрагмент, наведений нижче, вказує, що ми очікуємо отримати список елементів, кожен з яких має id, ім'я та опис.

Далі, нам потрібен додатковий початковий стан, щоб утримати масив ресторанів, який повернувся з сервера.

Нам також потрібно додати цикл componentDidMount до запиту даних з сервера GraphQL. Цей метод async оновить стан компонента, коли список ресторанів повернеться з сервера.

На кінець, ми створимо компонент, який відображатиме масив restaurants зі стану компонента в HTML.

Тепер, коли ми запустимо програму, ми побачимо, що дані з API виводяться в списку на екрані. Так чи інакше, додаток не показуватиме будь-які зміни при оновлені даних, наприклад, якщо ви додали новий ресторан.

Тому, для початківців, давайте оновимо метод  createRestaurant, щоб забезпечити оптимістичну відповідь UI. Зараз, коли ми створили новий елемент, база даних оновлюється, але UI ще не знає про новий елемент. Щоб виправити це, ми оновимо масив ресторану в методі createRestaurant, додавши до нього новий елемент:

Data Subscriptions в режимі реального часу

Далі, ми хотіли б працювати з даними в режимі реального часу. В GraphQL підписки дають вам можливість це реалізувати. Коли доступні нові дані, загорається підписка, і нові дані передаються через неї. Обробка нових даних залежить від нас, на стороні клієнта.

В нашому додатку ми зробимо підписку на масив ресторанів і створимо підписку onCreateRestaurant, яка загоратиметься щоразу, коли створюватиметься новий ресторан. Потім ми візьмемо з підписки новий елемент, оновимо наш існуючий масив і викличемо setState, щоб зробити ререндеринг UI з новими даними.

Як і для мутацій та запитів ми почнемо з визначення підписки в GraphQL на мові домену.

Підписку буде створено в методі циклу componentDidMount або перед, або після запиту GraphQL, який ми вже налаштували.

Тепер, якщо ви відкриєте два вікна браузера, то зможете зробити мутацію, зміну даних, в одному екрані, а в усіх інших вікнах побачите оновлення даних.

Якщо ви подивитеся на метод .filter, який ми використовували при створенні нового масиву ресторанів в підписці, то побачите, що ми перевіряємо чи не має однакових імен і описів. Можливо, найкращий спосіб це зробити - створити унікальний клієнтський ID, який також зберігається в базі даних і фільтрі на основі цього ідентифікатора.

Створення REST API з AWS лямбда

GraphQL - прекрасна передова технологія, але іноді наш проект бажатиме, щоб ми створили традиційні REST API. З AWS лямбда і Amplify так легко створювати serverless REST APIs за допомогою CLI.

Коли ми створили GraphQL API, ми використовували команду amplify create api0. Вона дає нам можливість створювати або GraphQL API, або REST API. REST API може бути налаштована для використання або автономної serverless функції Express, або serverless функції JavaScript, яка попередньо налаштована для роботи з операціями Amazon DynamoDB CRUD.

Для даного API ми будемо використовувати функцію serverless Express.

Давайте рухатися далі і додамо нову функцію:

Як завжди, вам буде запропоновано вказати деякі деталі конфігурації. Задайте наступне:

  • вид послуги: REST;
  • введіть ім'я ресурсу, який буде використовуватися в рамках проекту: наприклад, amplifyrestapi;
  • введіть шлях для REST endpoints: e.g. /people;
  • джерело лямбда: Create a new Lambda function;
  • Ім'я функції лямбда AWS: amplifyrestapifunction;
  • шаблон функції: Serverless express function (Integration with Amazon API Gateway);
  • редагувати локальну функцію лямбда зараз? Y

Тепер ви можете локально редагувати функцію лямбда. В файлі ми замінимо існуючий метод app.get('/people') наступним:

Це просто повертає постійний список імен для цілей демо. Збережіть цей файл і продовжуйте давати наступні відповіді:

  • обмежити доступ до API? Yes;
  • хто повинен мати доступ? Authenticated users only (тільки авторизовані користувачі);
  • який саме доступу ви хочете надати авторизованим користувачам? read;
  • додати інший шлях? N.

Це створило нову функцію лямбда локально і ми зможемо оновлювати за потреби наш акаунт. Код для цієї функції знаходиться в amplify/backend/function/amplifyrestapi/src.

Тепер давайте внесемо оновлення в наш акаунт:

Запит REST API зі сторони клієнта

Тепер наша функція лямбда запущена і ми можемо почати з нею взаємодіяти.

Спочатку, давайте зробимо запит на дані з нового API і відобразимо його в UI. Для цього, ми скористаємося класом API з Amplify, який називається API.get. В попередньому розділі ми використовували API.graphql для запитів до GraphQL API, проте є дуже багато методів, доступних в класі API. Ви можете дізнатися більше про класи API з їх офіційної документації.

Тепер ми можемо запустити додаток, збирати дані людей з нашого API і виводи їх на екрані.

Оновлення функції лямбда з CLI.

Окрім створення нової функції лямбда, ми також можемо оновлювати її з CLI.

Давайте змінимо функцію, щоб звернутися до API і зібрати дані замість важкого кодування констант. Для цього ми скористаємося бібліотекою axios для створення HTTP-запитів, також зберемо дані з Star Wars API.

Щоб використовувати axios, нам потрібно перейти в amplify/backend/function/amplifyrestapi/src. Axios встановлено в папці проекта функції лямбда, а не в основній папці додатку, тому що він запускатиметься в функції лямбда на стороні сервера.

Тепер, коли axios встановлено, ми оновимо функцію лямбда для збору даних з Star Wars API:

Тепер збережіть файл і запустіть amplify push з основної папки проекта, щоб оновити функцію лямбда в хмарі:

Тепер наш API оновлений і готовий до роботи!

Коли ми оновимо додаток, то побачимо дані зі Star Wars API.

Закінчення

В цій статті ви дізналися, як почати працювати в AWS Amplify і додавати його в проект React, а також як додавати ідентифікацію, збереження, хостинг і GraphQL чи REST API - і все без ручного написання коду і підтримки сервера. Це вже досить багато для розробника додатків!

Сподіваюсь, що цей пост надихнув вас на створення власних веб-додатків, які використовують технології serverless та AWS Amplify! напишіть нам, що ви думаєте з цього приводу в коментарях.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.