DataStore — CRUD (Create Read Update Delete)

Прощай Redux, MobX, Apollo! Грань между бэкендом и фронтендом сломана! Инновационый шаг эволюции стейт менеджеров.

Published in

react-native-init

8 min readMay 25, 2020

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

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

Amplify DataStore позволяет разработчикам писать приложения, используя распределенные данные, без написания дополнительного кода для автономного или онлайн-сценария.

Вы можете использовать Amplify DataStore для автономного использования в режиме «только локальный» без учетной записи AWS или предоставить весь бэкэнд с помощью AWS AppSync и Amazon DynamoDB.

DataStore включает в себя Delta Sync с использованием вашего бэкенда GraphQL и несколько стратегий разрешения конфликтов.

Преимущества DataStore от AWS Amplify над Redux, MobX, Apollo, Relay, селектрорами, деселекторами и прочими флаксами:

Сравнивать AWS Amplify с Redux, MobX не корректно, так как AWS Amplify это не только стейт-менеджер, но и клиент-сервер, поэтому в классе клиент-сервер мы будем сравнивать его с Apollo и Relay.

#1. Real time из коробки.

Не думаю, что можно считать бизнес серьезным, если у его мобильного приложения отсустствуют события подписок реализованых на технологии web sockets. А многие ли приложения в наше время работают на web sockets? Думаю нет, по причине того, что real time это дополнительная работа разработчиков на бэке и фронтенде. Для нас же, fullStack serverless разработчиков на AWS Amplify, real time идет из коробки, как на фронте так и на бэке и нам не надо писать код реализации для интеграции вэбсокетов на каждую модель, так как он генерируется автоматически, также как и написание документации для всего нашего сгенерированого кода, имплементированого в наш проект на основоании инструкции GraphQL схемы. Чтобы не пугать громкими словами, я покажу вам пример, из прошлого урока, того как в AWS Amplify определяется Store:

Так определяется модель в сторе, не только для фронтенда, но и для бэкенда. Один источник правды для фронтенда и для бэкенда. Да да, вижу я, что еще не раз повтрою это в своей жизни, так как это киллер фича и панч лайн vs Redux, MobX, Apollo, Relay.

Вот именно эта отличная от Redux, MobX, Apollo архитектура, стерает грань между бэкендом и фронтендом. И ставит AWS Amplify DataStore над всеми

Все!!! Если вы с бэкенда, то вам больше не нужно писать резолверы к базе данных и тащить подписки на каждую модель данных.

Serverless — это когда разработчикам бэкенда пришла пора учить фронтенд, так как их услуги нужны исключительно легаси проектам, не шагающим в ногу со временем, от чего и не живущими real time.

2. Генерация кода.

Что такое кодогенерация вы можете прочитать и без меня в википедии, если конечно же не знаете его значения, которое и в этом панче напоминает нам о себе. Old schoolщик? Юзаем fetch или axios? Отправляя запросы в дремучий лес API, который еще и сами пишим в связке с Redux, MobX, Apollo, Relay. Так вот вам еще одна новость дня! Вам больше не нужно писать эти запросы к API, вам их нужно только вызвать. Это значит, что больше не нужно создавать эту немаленькую папочку с кодом запроса к серверу, так как в AWS Amplify DataStore они также генерируются в вашем проекте на основании вашего стора, определенго все той же GraphQL схемы их первого пункта. И вполняется это одной командой:

npm run amplify-modelgen

В итоге получаем папку models с генерированным кодом.

И папка graphql после пуша на сервер, со всем запросом во Flow, TS или ваниле JavaScript.

3. Offline data & cloud sync

Не нужно писать дополнительный код, для отправки запроса на сервер, после выхода приложения в онлайн. Иногда вы попадаете в ненадежную ситуацию, но вам лучше подождать дольше, чем явно провалить операцию. У Apollo есть apollo-link-retry который обеспечивает экспоненциальный откат и запросы на сервер между попытками по умолчанию. Правда он (в настоящее время) не обрабатывает повторы для ошибок GraphQL в ответе, только для сетевых ошибок. У Redux, MobX понятное дело под капотом этого решения нет так как они не клиенты и приходится задествовать сторние мидлвари, по причине того, что REST как дедушка на пенсии с поддержкой любимых внуков. Подробный разбор GraphQL vs REST. У AWS Amplify DataStore есть не только аналог apollo-link-retry , но и встроенная в него и настраиваемая привычную знакомая модель программирования с автоматическим контролем версий, обнаружением конфликтов и разрешением в облаке.

Из минусов AWS Amplify хочу назвать то, что хуки Apollo c его loading и error из коробки сокращают количество написаного кода на фронте, поэтому написал open source библиотеку, которая решает это недоразумение.

Официальная документация

В конце этого урока мы соберем с вами это мобильное приложение c использованием Amplify DataStore:

Поехали!

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

Чат поддержки AWS Amplify: Telegram

Финальный код этой части можно найти на Github.

Клонируем репозиторий

Если вы продолжаете прошлый урок, то можете сразу перейти к шагу 5

git clone https://github.com/fullstackserverless/startup.git

Переходим в папку проекта

cd startup

Install dependencies

yarn

npm install

Регистрируем свой AWS account

Шаг для тех, кто еще не зарегистрирован на AWS Регестрируемся согласно этой инструкции 📃 и по видео учебнику 📺 чекаем все 5 шагов.

Внимание!!!

Потребуется банковская карта 💳, где должно быть более 1$ 💵

Там же смотрим и ставим Amplify Command Line Interface (CLI)

Инициализация AWS Amplify в проект React Native

В корневой директории проекта React Native инициализируем наш AWS Amplify проект

amplify init

Отвечаем на вопросы:

Проект инициализацировался 🚀

Подключаем плагин аутентификации

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

Командой

amplify add auth

подключаем функцию аутентификации. Выбираем конфигурацию по умолчанию. Это добавляет конфигурации ресурсов auth локально в ваш каталог ampify/backend/auth

#Выбираем профиль, который мы хотим использовать. default. Enter и как пользователи будут входить в систему. Email(За SMS списывают деньги).

Отправляем изменения в облако 💭

amplify push

✔ All resources are updated in the cloud

Собераем проект и проверяем работоспособность аутентификации.

amplify-app

Самый быстрый способ начать работу c DataStore — использовать npx-скрипт amplify-app.

npx amplify-app@latest

Установка зависимостей

Подробная установка здесь

Если у вас React Native Cli, то

yarn add @aws-amplify/datastore @react-native-community/netinfo @react-native-community/async-storage

И если вы используете React Native> 0.60, то выполните следующую команду для iOS:

cd ios && pod install && cd ..

Подключаем плагин API(App Sync)

Если подключали его в прошлом уроке, то пропускаем этот шаг. Если нет то, подключаем плагин API

amplify add api

После выбранных пунктов откроется схема GraphQL в amplify/backend/api/<datasourcename>/schema.graphql куда вставляем эту модель:

Подробней о ней здесь

Генерация моделей

Моделирование ваших данных и создание моделей, используемых DataStore, — это первый шаг к началу работы. GraphQL используется в качестве общего языка для JavaScript, iOS и Android для этого процесса, а также используется в качестве сетевого протокола при синхронизации с облаком. GraphQL также поддерживает некоторые функции, такие как Automerge в AppSync. Генерация модели может быть выполнена с помощью сценария NPX или из командной строки с помощью Amplify CLI.

Вам не нужна учетная запись AWS для ее запуска и локального использования DataStore, однако, если вы хотите синхронизироваться с облаком, рекомендуется установить и настроить Amplify CLI как в прошлом уроке.

Так как схему мы описали в прошлом уроке, то сейчас нам достаточно запустить команду