Начните работу с GraphQL и создайте свой первый API.

GraphQL - это технология, которая помогает разработчикам быстрее создавать надежное программное обеспечение. Возможность запросить всю необходимую информацию одним запросом меняет правила игры.

Он упростил внутреннюю разработку API-интерфейсов для использования мобильными и веб-приложениями, которые обычно полагаются на API-интерфейсы RESTful. Обычный RESTful API может иметь несколько конечных точек для различных сущностей (например, пользователей, представлений и т. Д.); с GraphQL вы можете получить всю эту информацию за один раз, используя язык запросов GraphQL, также известный как GQL.

В этом руководстве я расскажу, как создать GraphQL API с помощью graphql-compose-mongoose, а также нескольких других инструментов. И, конечно же, все будет соответствовать спецификации ES6 с использованием Node.js. Если это звучит как захватывающее приключение, читайте дальше.

Начиная

Для начала нам нужно дважды проверить, есть ли у вас несколько предварительных условий, чтобы убедиться, что вы разбираетесь в технологии и можете пройти обучение в полном объеме.

Предпосылки

  • Node.js (последняя версия 13.x или выше)
  • Пряжа (brew install yarn в macOS)
  • Понимание JavaScript и спецификации ES6
  • Учетная запись с MongoDB Atlas или запущенный локальный экземпляр MongoDB

Структура каталогов

Для начала создайте новый каталог.

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

Затем давайте сгенерируем наш package.json файл с помощью Yarn. Мы будем добавлять модули по мере необходимости по мере продвижения вперед.

Примечание. Ответьте на вопросы по запросу. Здесь ничего не требуется - просто все, что вы хотите установить по умолчанию.

Поскольку мы используем ES6, нам нужно будет перенести весь код с ES6 на обычный JavaScript. Для этого давайте создадим каталог src. Обратите внимание, что нам также необходимо настроить необходимую структуру в src. Приведенный ниже сценарий выполняет следующие действия:

  • Создайте каталог src
  • Перейти в каталог src
  • Создание каталогов schema, models, scripts и utils

Наконец, мы создадим index.js файл, который позволит нам импортировать наши зависимые файлы и каталоги:

Внутри index.js поместите следующее содержимое и сохраните:

Файл пакета

Теперь, когда у нас есть базовые файлы, давайте продолжим и добавим необходимые производственные пакеты в наш package.json файл с помощью Yarn, например:

А для пакетов разработки добавьте следующее:

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

Давайте изменим его, добавив скрипты и хуки; как только мы это сделаем, ваш package.json файл должен выглядеть примерно так:

Скрипты

Приведенное ниже позволит нам запускать скрипты через Yarn (например, yarn <INSERT SCRIPT HERE>). Например, мы можем линтировать наш код с помощью yarn lint, и он будет выполнять операции ESLint и Prettier с нашими файлами.

Как и в предыдущем случае, мы добавим сценарий Husky, который будет запускаться при событии precommit, эффективно выполняя yarn lint перед фиксацией кода.

Это отличный способ поддерживать качественный и чистый код:

Это все для скриптов. Продолжаем.

Настройка Babel, Prettier и ESLint

Мы предприняли необходимые шаги для установки правильных пакетов для Babel, Prettier и ESLint.

Теперь пора добавить файлы конфигурации в корень вашего проекта. Переместите корень и добавьте следующие файлы:

.babelrc

prettierrc.json

.eslintrc.json

Идеально! Мы делаем успехи.

К следующему разделу.

Создание наших моделей

Причина, по которой мне нравится работать с graphql-compose-mongoose, заключается в том, что он позволяет мне использовать модели Mongoose, а не писать модели GraphQL вручную (что, кстати, может стать довольно громоздким в большом приложении).

Перейдите к src/models и создайте новый файл с именем user.js. В этом файле мы определим все необходимые характеристики, составляющие пользователя. Это будет небольшой файл, но при желании вы можете добавить дополнительную информацию в запись пользователя (например, пароль с помощью mongoose-bcrypt).

Затем давайте создадим task.js файл (учитывая, что это, в конце концов, API GraphQL для задач):

Теперь у нас есть две модели / схемы: UserSchema и TaskSchema.

Пользователь - это отдельная сущность, и задача всегда принадлежит пользователю. Благодаря этому мы в конечном итоге сможем вытащить все задачи для пользователя за один вызов GraphQL. Довольно круто, правда?

Создание наших схем

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

Схемы состоят из запросов и мутаций, где запросы позволяют извлекать данные, а мутации позволяют изменять данные. Давайте создадим наши схемы как для модели пользователя, так и для модели задачи.

Внутри каталога schema создайте файл с именем user.js. Затем поместите в файл следующее содержимое:

Затем давайте создадим один под названием task.js:

Чтобы связать все вместе, мы сгенерируем index.js файл в корне каталога (src/schema) и импортируем наши схемы:

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

Сценарий сборки

Сценарий сборки позволяет преобразовывать схемы в стиле Mongoose в чистые схемы GraphQL. Довольно модно, да?

Создайте файл с именем buildSchema.js внутри src/scripts и вставьте в него следующий код:

Этот файл будет вызываться с помощью команды yarn build и выводит необработанные запросы GraphQL в каталог data.

Подключение к базе данных

Что такое API без базы данных? Вот почему нам нужно создать соединение Mongoose с MongoDB.

Если вы еще не создали .env файл в корневом каталоге, сейчас самое время сделать это. Убедитесь, что в нем есть следующие переменные среды:

Когда ваш .env файл будет на месте, давайте создадим еще один файл внутри src/utils. Назовите файл db.js и добавьте следующее содержимое:

Примечание. Если у вас нет MongoDB, работающего локально, MongoDB Atlas - отличная альтернатива. Он не только бесплатный, но и обладает достаточной мощностью на уровне бесплатного пользования, чтобы без проблем запускать приложение для разработки. Смотрите здесь.

Игровая площадка

Ваш GraphQL готов. Запустите команду yarn dev, и вы сможете развернуть игровую площадку для GraphQL, которая позволяет добавлять, изменять, удалять и запрашивать пользователей и задачи - все за один вызов.

Выглядит это примерно так:

Заключение

Это быстрое и грязное руководство - только начало всего удовольствия, которое вы можете получить с помощью GraphQL, чтобы сделать вашу разработку сильнее, чище и эффективнее.

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

А пока благодарим вас за то, что следили за мной на протяжении всего этого руководства, и следите за обновлениями в будущем. Удачного кодирования!