Руководство для начинающих по использованию GraphQL с Node и Mongo - Часть I

Сегодня давайте узнаем, как подключить MongoDB к GraphQL с помощью Apollo Server и Mongoose.

Перед началом работы на вашем компьютере уже должны быть настроены следующие компоненты:

• "Узел"
• MongoDB

Пожалуйста, настройте их, прежде чем продолжить изучение этого руководства.

Создать каталог и установить пакеты

В вашем каталоге кодирования создайте новую папку, в которой вы будете работать. Измените текущий каталог на эту новую папку и создайте новую папку, в которой будет храниться код вашего сервера, и запустите npm init -y.

mkdir server
cd server
npm init -y

Это создаст для нас package.json файл.

Далее мы установим несколько библиотек:

npm install apollo-server-express express graphql mongoose nodemon

После запуска npm install создайте index.js файл в корне server.

Подключение Apollo Server

В index.js мы сначала подключим Apollo-server.

В строках 1–2 мы сначала импортируем express, ApolloServer и gql, чтобы использовать их в нашем коде.

В строках 4–8 мы определяем типы, реализуя объект typeDefs, необходимый для ApolloServer в строке 16. gql позволяет нам писать синтаксис GraphQL на JavaScript. В строках 5–6 мы создаем тип GraphQL Query. Строка 6 - это имя одного из запросов, которые мы делаем. Query аналогичен выполнению GET, когда вы просто извлекаете данные.

В строках 10–14 мы реализуем объект resolvers, необходимый для ApolloServer в строке 16. Здесь мы реализуем то, что фактически делает Query. В строке 12 мы реализуем запрос hello, чтобы просто вернуть 'Hello World'.

В строке 16 мы создаем наш ApolloServer и передаем объект с typeDef и resolver в качестве параметра.

В строках 17–18 мы применяем Express в качестве промежуточного программного обеспечения сервера, но мы ничего не делаем с Express в этой части.

В строке 20 наш ApolloServer слушает port 4000, и когда он будет готов, он напечатает в консоли, что он готов к запуску.

Тестирование запроса GraphQL

Если мы откроем терминал для каталога, в котором есть index.js, и запустим npm start, у нас должна быть открыта площадка GraphQL.

Для тех, кто не знаком с Playground, вы можете создавать запросы GraphQL с левой стороны и видеть данные, которые запрашиваются, с правой стороны.

Мы можем протестировать наш новый запрос слева следующим образом:

query hello {
  hello
}

query сообщает GraphQL, что мы пытаемся создать тип query. hello после запроса дает нашему запросу имя (аналогично тому, как вы называете функцию). Затем внутри фигурных скобок мы используем hello, который является запросом, который мы сделали в строке 6 нашего index.js.

При нажатии кнопки Воспроизвести будут возвращены данные для hello, что было 'Hello World'.

Подключение MongoDB

Давайте теперь подключим MongoDB к нашему серверу Apollo.

Сначала создайте файл с именем config.js. Мы установим соединение MongoDB с config.js. В моей MongoDB я создал базу данных с именем graphqldb. Я также использую по умолчанию MongoDB port 27017.

Чтобы подключить его, добавьте эту строку в свой index.js после операторов require вверху.

require('./config');

Создать схему пользователя MongoDB

Теперь нам нужно создать схему для нашей MongoDB. Я собираюсь создать простую User схему.

Сначала создайте models.js в корне вашего проекта.

Здесь мы создаем userSchema и даем ему только userName и email.

Теперь мы можем добавить его в наш index.js файл. Поместите эту строку после вашего config require:

const { User } = require('./models');

Обновление запросов GraphQL и добавление мутаций

Теперь, когда у нас есть MongoDB, мы собираемся обновить запросы GraphQL и добавить типы мутаций.

В строках 8–12 мы создаем новый тип GraphQL: User. Мы говорим, что все, что относится к типу User, потребует ID, который является типом ID (уникальный идентификатор), и может иметь userName, который является типомString, и email, который также является типомString. Оператор ! означает, что он не может быть нулевым.

В строках 14–16 мы заменяем наш запрос hello запросом getUsers, который возвращает массив типа User. Это означает, что getUsers ДОЛЖЕН объект с id, userName иemail соответствовать типу User, иначе он ничего не вернет.

В строках 18–20 мы добавляем тип Mutation к нашему typeDefs. Mutations изменить данные, аналогично POST, PUT или DELETE. В строке 19 мы объявляем функцию addUser, которая требует userName и email, и что она вернет тип User.

В строках 23–37 мы обновляем наш Resolvers новыми Query и Mutation.

В строках 24–26 мы вызываем MongoDB с помощью Mongoose и извлекаем все Users из коллекции Users. Это вернет Users на основе схемы MongoDB, которая имеет id, userName и email, которая соответствует типу GraphQL User.

В строках 27–36 мы также вызываем MongoDB с помощью Mongoose для создания нового User. Мы передаем два параметра: первый - это _, потому что мы не используем родительский параметр, а второй - это args, который мы передаем в функцию мутации (userName и email). Затем мы возвращаем response, полученный от MongoDB, и в нем также есть id, userName и email, необходимые для завершения типа User.

Игра с новым запросом и мутацией

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

Поскольку в нашей базе данных ничего нет, давайте сначала сделаем mutation.

mutation addUser {
  addUser(userName: "wyang", email: "[email protected]") {
    userName
    email
  }
}

Здесь мы заявляем, что собираемся использовать mutation. Мы даем ему имя addUser (это не то же самое, что функция addUser, которую мы создали в typeDefs, а просто чтобы дать мутации имя для Площадки). Внутри mutation мы используем функцию addUser и передаем два наших параметра. Сначала мы объявляем параметр userName и даем ему строку, и мы делаем то же самое для email. Когда мы открываем фигурные скобки, мы просим вернуть userName и email.

Теперь, когда у нас есть что-то добавленное в нашу базу данных, теперь мы можем использовать наш новый getUsers. Чтобы использовать это, давайте воспользуемся этим новым запросом:

query getUsers {
  getUsers{
    id
    userName
    email
  }
}

Еще раз заявляем, что делаем query и даем ему имя getUsers. Еще раз, getUsers, объявленный после query, является именем запроса на игровой площадке, а не фактическим запросом, который мы сделали. Внутри этого query мы используем функцию getUsers и просим вернуть id, userName и email.

Заключение

В этой части мы сделали довольно много:

• Настроить Apollo Server
• Создана схема MongoDB
• Реализованные запросы и мутации с помощью Mongoose

Во второй части я подключу интерфейс к Apollo Client! Дайте мне знать, что вам понравилось, или что нужно улучшить, в комментариях ниже.

Надеюсь, этот урок был вам полезен!