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!

Получите наш новый курс на nxplaybook.com!