Как настроить сервер GraphQL с использованием Node.js, Express и MongoDB

Самый простой способ начать с GraphQL и MongoDB.

Итак, вы планируете начать с GraphQL и MongoDB. Тогда вы понимаете, как я могу настроить эти две технологии вместе? Что ж, эта статья создана именно для вас. Я покажу вам, как настроить сервер GraphQL с помощью MongoDB. Я покажу вам, как вы можете модулировать схему GraphQL и все это, используя MLab в качестве нашей базы данных.

Весь код из этой статьи доступен здесь.

Итак, приступим.

Почему GraphQL?

GraphQL - это язык запросов для ваших API. Он был выпущен Facebook еще в 2015 году и получил очень широкое распространение. Это замена REST.

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

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

Начиная

Сначала создайте папку, затем запустите наш проект.

npm init -y

Затем установите некоторые зависимости для нашего проекта.

npm install @babel/cli @babel/core @babel/preset-env body-parser concurrently cors express express-graphql graphql graphql-tools merge-graphql-schemas mongoose nodemon

А затем @ babel / node в качестве зависимости разработчика:

npm install --save-dev @babel/node

Вавилон

Теперь мы настроим Babel для нашего проекта. Создайте файл с именем .babelrc в папке проекта. Затем поместите туда @ babel / env, например:

Затем перейдите в свой package.json и добавьте несколько скриптов:

У нас будет только один скрипт, который мы будем использовать в нашем проекте.

«сервер» - в основном он будет запускать наш сервер.

Сервер

Теперь в нашей корневой папке создайте файл index.js. Здесь мы сделаем наш сервер.

Сначала мы импортируем все модули, которые будем использовать.

Затем мы создадим наше соединение с MongoDB с помощью Mongoose:

Что насчет этой db const? Здесь вы разместите URL своей базы данных для подключения MongoDB. Тогда ты скажешь мне: «Но у меня еще нет базы данных», да, я тебя понял. Для этого мы используем MLab.

MLab - это база данных как услуга для MongoDB, все, что вам нужно сделать, это зайти на их веб-сайт (щелкните здесь) и зарегистрироваться.

После регистрации перейдите и создайте новую базу данных. Чтобы использовать бесплатно, выберите этот вариант:

Выберите в качестве опции Восток США (Вирджиния) и дайте нашей базе данных имя. После этого наша база данных появится на главной странице.

Щелкните нашу базу данных, затем перейдите в Пользователь и создайте нового пользователя. В этом примере я создам пользователя с именем leo и пароль leoleo1.

После того, как наш пользователь создан, в верхней части нашей страницы мы находим два URL-адреса . Можно подключиться с помощью Mongo Shell. Другой - для подключения с использованием URL-адреса MongoDB. Копируем второй .

После этого все, что вам нужно сделать, это вставить этот URL в наш db const в файл index.js . Наша db const будет выглядеть так:

выражать

Теперь мы наконец-то запустим наш сервер. Для этого мы добавили еще несколько строк в наш index.js, и все готово.

Теперь запустите команду npm run server и перейдите на localhost: 4000 / graphql, и вы найдете такую страницу:

MongoDB и схема

Теперь в нашей корневой папке создайте папку с именем models и создайте внутри файл с именем User.js (да, с большой буквы U).

Внутри User.js мы собираемся создать нашу первую схему в MongoDB, используя Mongoose.

Теперь, когда мы создали нашу схему User, мы начнем с GraphQL.

GraphQL

В нашей корневой папке мы создадим папку с именем graphql. Внутри этой папки мы создадим файл с именем index.js и еще две папки: resolvers и types.

Запросы

Запросы в GraphQL - это способ, которым мы запрашиваем данные у нашего сервера. Мы запрашиваем данные, которые нам нужны, и он возвращает именно эти данные.

Все наши запросы будут находиться в нашей папке types. Внутри этой папки создайте файл index.js и папку User.

В папке User мы создадим файл index.js и напишем наши запросы.

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

Если у вас несколько типов, вы импортируете их в свой файл и включаете в массив typeDefs.

Мутации

Мутации в GraphQL - это способ изменения данных на сервере.

Все наши мутации будут внутри нашей папки resolvers. Внутри этой папки создайте файл index.js и папку User.

Внутри папки User мы создадим файл index.js и запишем наши изменения.

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

Модуляризация нашей схемы

Внутри нашей папки с именем graphql перейдите в наш index.js и создайте нашу схему, например:

Теперь, когда наша схема готова, перейдите в нашу корневую папку и внутри нашего index.js импортируйте нашу схему.

После всего этого наша схема будет такой:

Играя с нашими запросами и мутациями

Чтобы проверить наши запросы и изменения, мы запустим наш сервер с помощью команды npm run server и перейдем на localhost: 4000 / graphql.

Создать пользователя

Сначала мы создадим нашего первого пользователя с мутацией:

mutation {
  addUser(id: "1", name: "Dan Abramov", email: "[email protected]") {
    id
    name
    email
  }
}

После этого, если игровая площадка GraphiQL вернет вам созданный нами объект данных, это означает, что наш сервер работает нормально.

Чтобы в этом убедиться, перейдите в MLab и проверьте внутри нашей коллекции users, есть ли наши данные, которые мы только что создали.

После этого создайте еще одного пользователя по имени «Макс Штойбер». Мы добавляем этого пользователя, чтобы убедиться, что наша мутация работает нормально и у нас есть более одного пользователя в базе данных.

Удалить пользователя

Чтобы удалить пользователя, наша мутация будет выглядеть так:

mutation {
  deleteUser(id: "1", name: "Dan Abramov", email: "[email protected]") {
    id
    name
    email
  }
}

Как и в случае с другим, если игровая площадка GraphiQL возвращает вам созданный нами объект данных, это означает, что наш сервер работает нормально.

Получить всех пользователей

Чтобы привлечь всех пользователей, мы запустим наш первый запрос следующим образом:

query {
  users {
    id
    name
    email
  }
}

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

Получите конкретного пользователя

Чтобы получить конкретного пользователя, это будет запрос:

query {
  user(id: "2"){
    id
    name
    email
  }
}

Это должно вернуть точного пользователя.

Готово!

Наш сервер работает, наши запросы и изменения работают нормально, мы готовы запустить наш клиент. Вы можете начать с create-response-app. В корневой папке просто введите команду create-response-app client, а затем, если вы запустите команду, npm run dev наши сервер и клиент будут работать одновременно!