Генерация приложения на React с бэкэндом на GraphQL за считанные минуты

    Мы добавили новую экспериментальную возможность в 8base CLI (Command Line Interface), которая генерирует готовое приложение на React из вашей модели данных. Это очень удобно для начала работы с GraphQL и React, а также для быстрого создания пользовательского интерфейса приложения. Похоже на скаффолдинг в Ruby-on-Rails.

    Созданное приложение основано на Create React App, использует Apollo Client для GraphQL запросов, включает в себя аутентификацию на основе Auth0, а также возможность загрузки файлов.

    Как это работает


    Нужно сделать несколько простых шагов:
    1. Определите вашу модель данных в 8base,

    2. Установите 8base CLI и используя npm и запустите 8base login,
    3. Выполните команду 8base generate app ${YOU_APP_NAME} для генерации шаблона приложения,
    4. Запустите 8base generate scaffold ${TABLE_NAME} для генерации CRUD UI выбранной таблицы данных (вы можете повторить этот шаг для каждой таблицы, которую вы хотите добавить),
    5. Наконец выполните yarn install && yarn start, чтобы запустить приложение.

    Гифка, которая визуально показывает выполнение данных шагов в терминале:



    Итог


    Вот пример сгенерированного React приложения:



    Буду рад обратной связи.
    Больше информации здесь.
    P.S. Сейчас платформа 8base находится в стадии бета-тестирования и полностью бесплатна.
    Поделиться публикацией

    Комментарии 2

      0
      На существующем GraphQL будет работать?
        0

        К сожалению GraphQL схема не содержит достаточно информации для полного построения интерфейса. Например:


        • Она не содержит информации по валидации, формату и прочей метадате полей.
        • Какие GraphQL типы являются таблицами, а какие нет.
        • Любое GraphQL API не гарантирует наличие фильтров, сортировки и пагинации.
        • Не гарантирует наличие специального поля (_description в случае 8base), которое позволяет получить строковое представление записи для отображения связанных записей.

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

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

      Самое читаемое