Nx - это набор расширяемых инструментов разработки для монорепозиториев. Благодаря надежной поддержке разнообразной экосистемы разработки на JavaScript, он позволяет вам создать полное приложение с полным стеком в одном репозитории. Это позволяет вам обмениваться кодом и интерфейсами между вашим веб-интерфейсом и серверной частью и действует как фактор, увеличивающий скорость вашей разработки.
GraphQL - это язык запросов для вашего API. Благодаря типизированному определению схемы это отличный кандидат для определения контракта между вашим API и его потребителями. Используя интеллектуальные инструменты для генерации кода на основе этой схемы, вы можете сэкономить много времени и улучшить взаимодействие между вашим интерфейсом и серверной частью.
В этой статье вы создадите простой GraphQL API, который отслеживает некоторую информацию о наборах Lego. Вы создадите этот API с помощью NestJS, и он будет использоваться приложением React. Все это будет внутри Nx Workspace в едином репозитории.
Из этой статьи вы узнаете, как:
- Создайте рабочее пространство Nx как для интерфейсных, так и для серверных приложений.
- Создайте GraphQL API с помощью NestJS
- Автоматически сгенерировать код внешнего интерфейса на основе вашей схемы GraphQL
- Создайте приложение React для использования вашего GraphQL api
Пример репозитория со всей работой, которую вы здесь будете делать, можно найти по адресу https://github.com/nrwl/nx-apollo-react-example.
Создать новое рабочее пространство
Начнем с создания рабочего пространства Nx:
npx create-nx-workspace nx-apollo-react-example
При появлении запроса ответьте на запросы следующим образом:
Создать GraphQL API
Используйте платформу NestJS для создания своего GraphQL API. Сначала добавьте NestJS в рабочее пространство Nx и создайте приложение:
npm install --save-dev @nrwl/nest
nx generate @nrwl/nest:application api
Когда будет предложено указать каталог, нажмите клавишу ВВОД. Это поместит приложение api в корень вашего каталога apps
.
После создания приложения установите модули GraphQL, необходимые для Nest.
npm install @nestjs/graphql apollo-server-express graphql-tools graphql
Для создания API вам понадобится схема GraphQL, поэтому напишите очень простую схему с одним запросом и одной мутацией. Создайте файл с именем schema.graphql
в приложении api
:
Импортируйте GraphQLModule
и используйте эту схему в NestJS.
Этого уже достаточно, чтобы увидеть некоторый прогресс при запуске приложения api
.
npm start api
Когда приложение запущено, откройте GraphQL Playground в своем браузере по адресу http: // localhost: 3333 / graphql.
Здесь вы можете проверить свою схему GraphQL, а также отправить запросы. Запросы сейчас ничего не возвращают, потому что данные не были предоставлены. Для этого вам понадобится преобразователь. Создайте в своем api
проекте новый файл с именем set.resolver.ts
. Затем добавьте этот код:
Это очень простой преобразователь, хранящий данные в памяти. Он возвращает текущее содержимое массива наборов для запроса allSets
и позволяет пользователям добавлять новый набор с помощью мутации addSet
. Добавьте этот преобразователь в массив поставщиков в модуле приложения:
Вернитесь на свою площадку для GraphQL и посмотрите, возвращают ли ваши запросы какие-либо данные. Попробуйте запрос и изменение:
Теперь, когда API работает, вы готовы создать интерфейс для доступа к нему.
Добавить клиент Apollo в приложение React
Клиент Apollo упрощает использование вашего GraphQL API. Установите реагирующую версию клиента:
npm install apollo-boost @apollo/react-hooks graphql
Измените свой app.tsx
, чтобы предоставить клиенту Apollo:
Создать библиотеки React
Nx помогает разбить код на хорошо организованные библиотеки для использования приложениями, поэтому создайте пару библиотек React для организации работы. Создайте data-access
библиотеку, которая обрабатывает связь с серверной частью, и feature-sets
библиотеку, которая включает компоненты контейнера для отображения данных набора Lego. В реальном приложении вы также можете создать ui
библиотеку, которая включает повторно используемые презентационные компоненты, но это не является частью этого примера. Для получения дополнительной информации о том, как организовать монорепозиторий React с помощью Nx, прочитайте нашу книгу Эффективная разработка React с Nx, зарегистрировавшись на Nrwl Connect.
Для создания описанных библиотек выполните следующие команды:
nx generate @nrwl/react:library data-access --style css
nx generate @nrwl/react:library feature-sets --style css
Настройка генерации кода React
Инструмент под названием GraphQL Code Generator ускоряет разработку вашей библиотеки доступа к данным. Как всегда, сначала установите зависимости:
npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo
Вам нужно создать несколько запросов GraphQL и мутаций, которые будет использовать интерфейс. Создайте папку с именем graphql
в вашей data-access
библиотеке с файлом внутри с именем operations.graphql
:
Создайте файл с именем codegen.yml
в библиотеке data-access
для настройки генератора кода:
Эта конфигурация захватывает все ваши файлы GraphQL и генерирует все необходимые типы и службы для использования API.
Добавьте новую задачу в workspace.json
для запуска этого генератора кода:
Теперь вы можете запустить эту задачу с помощью Nx CLI:
nx run data-access:generate
Теперь у вас должна быть папка с именем generated
в вашей data-access
библиотеке с файлом с именем generated.ts
. Он содержит вводимую информацию о схеме GraphQL и определенных вами операциях. У него даже есть несколько хуков, которые делают использование этого API сверхбыстрым.
Чтобы сделать их доступными для потребителей, экспортируйте их в index.ts
библиотеки data-access
:
Создать компоненты React
Теперь у вас есть все необходимое для начала создания компонентов React. Создайте два компонента: список наборов Lego и форму для добавления набора Lego. Используйте интерфейс командной строки Nx, чтобы сформировать эти:
nx generate @nrwl/react:component --name=SetList --export --project=feature-sets --style=css
nx generate @nrwl/react:component --name=SetForm --export --project=feature-sets --style=css
В компоненте SetList
добавьте следующее:
Обратите внимание, как useSetListQuery
импортируется из библиотеки доступа к данным. Это ловушка, созданная генератором кода GraphQL, которая предоставляет результаты запроса SetList
. Весь этот конвейер является типобезопасным и использует типы, сгенерированные генератором кода GraphQL.
В компоненте SetForm
добавьте следующее:
Опять же, обратите внимание, что для этого компонент импортирует перехватчики, запросы и типизирующую информацию из нашей библиотеки доступа к данным.
Интегрируйте компоненты в приложение
Последний шаг: добавьте эти новые компоненты в компонент приложения и добавьте немного стиля:
Если ваш API еще не запущен, запустите его:
npm start api
А теперь запустите приложение React:
npm start nx-apollo
Перейдите по адресу http: // localhost: 4200 и посмотрите результаты своей работы!
Дальнейшее чтение
Прочтите этот блог, чтобы увидеть пример Angular:
NestJS
Apollo React
Генератор кода GraphQL
- "Документация"
Как всегда, если вы ищете корпоративный консалтинг, обучение и поддержку, вы можете узнать больше о том, как мы работаем с нашими клиентами, здесь.
Если вам это понравилось, нажмите 👏 ниже, чтобы другие люди увидели это здесь, на Medium. Подпишитесь на Philip Fulcher и @nrwl_io, чтобы узнать больше о Nx и Nrwl. Также подписывайтесь на Brandon, Nx и Nrwl в Twitter!