Мы добавили новую экспериментальную возможность в 8base CLI (Command Line Interface), которая генерирует готовое приложение на React из вашей модели данных. Это очень удобно для начала работы с GraphQL и React, а также для быстрого создания пользовательского интерфейса приложения. Похоже на скаффолдинг в Ruby-on-Rails.
Созданное приложение основано на Create React App, использует Apollo Client для GraphQL запросов, включает в себя аутентификацию на основе Auth0, а также возможность загрузки файлов.
Нужно сделать несколько простых шагов:
Гифка, которая визуально показывает выполнение данных шагов в терминале:
![](https://habrastorage.org/webt/kq/yh/lk/kqyhlk2hyozw1sobz-awqhmakou.gif)
Вот пример сгенерированного React приложения:
![](https://habrastorage.org/webt/f_/7n/le/f_7nlefphffzb3fv_1mtckdw4i0.gif)
Созданное приложение основано на Create React App, использует Apollo Client для GraphQL запросов, включает в себя аутентификацию на основе Auth0, а также возможность загрузки файлов.
Как это работает
Нужно сделать несколько простых шагов:
- Определите вашу модель данных в 8base,
- Установите 8base CLI и используя npm и запустите 8base login,
- Выполните команду 8base generate app ${YOU_APP_NAME} для генерации шаблона приложения,
- Запустите 8base generate scaffold ${TABLE_NAME} для генерации CRUD UI выбранной таблицы данных (вы можете повторить этот шаг для каждой таблицы, которую вы хотите добавить),
- Наконец выполните yarn install && yarn start, чтобы запустить приложение.
Гифка, которая визуально показывает выполнение данных шагов в терминале:
![](https://habrastorage.org/webt/kq/yh/lk/kqyhlk2hyozw1sobz-awqhmakou.gif)
Итог
Вот пример сгенерированного React приложения:
![](https://habrastorage.org/webt/f_/7n/le/f_7nlefphffzb3fv_1mtckdw4i0.gif)
Буду рад обратной связи.
Больше информации здесь.
P.S. Сейчас платформа 8base находится в стадии бета-тестирования и полностью бесплатна.
vitalvas
На существующем GraphQL будет работать?
andrei_anisimov Автор
К сожалению GraphQL схема не содержит достаточно информации для полного построения интерфейса. Например:
Поэтому для построения интерфейсов мы используем нашу кастомную схему, которая содержит всю эту информацию.