Начните работу с 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, чтобы сделать вашу разработку сильнее, чище и эффективнее.
Попробуйте расширить то, что вы только что создали, чтобы добавить к моделям дополнительную функциональность, или решитесь самостоятельно улучшить одно из ваших существующих приложений - или даже создать новое; Я хотел бы услышать больше обо всем, что вы решили сделать.
А пока благодарим вас за то, что следили за мной на протяжении всего этого руководства, и следите за обновлениями в будущем. Удачного кодирования!