Создание динамического API GraphQL с помощью Apollo Server и MongoDB

Комплексное руководство

Введение:

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

Шаг 1: Настройка среды

Для начала убедитесь, что на вашем компьютере установлены Node.js и npm (менеджер пакетов Node). Создайте новый каталог для своего проекта и перейдите к нему с помощью терминала.

mkdir graphql-crud
cd graphql-crud

Шаг 2. Установка зависимостей

В каталоге вашего проекта инициализируйте новый проект Node.js, выполнив:

npm init -y

Далее установите необходимые пакеты: mongoose, graphql, graphql-tag и @apollo/server.

npm install mongoose graphql graphql-tag @apollo/server

Шаг 3. Определение модели данных

В файле models/student.js вы найдете модель данных Mongoose для сущности Student. Сюда входят такие поля, как firstName, lastName и age. Mongoose — это инструмент объектного моделирования MongoDB, который предоставляет решение для моделирования данных на основе схемы.

const mongoose = require("mongoose");

const Student = mongoose.model("Student", {
  firstName: String,
  lastName: String,
  age: Number,
});

module.exports = { Student };

Шаг 4. Создание определений типов GraphQL

В models/typedefs.js вы определяете схему GraphQL, используя тег gql из пакета graphql-tag. Эта схема определяет структуру вашего API, включая типы (Student, Query, Mutation) и соответствующие им поля.

const gql = require("graphql-tag");

const typeDefs = gql`
  type Query {
    greetings: String
    welcome(name: String!): String
    students: [Student] # return array of students
    student(id: ID): Student # return student by ID
  }
  # student object
  type Student {
    id: ID
    firstName: String
    lastName: String
    age: Int
  }
  # post request (Mutation)
  type Mutation {
    create(firstName: String, lastName: String, age: Int): Student
    update(id: ID, firstName: String, lastName: String, age: Int): Student
    delete(id: ID): Student
  }
`;

module.exports = { typeDefs };

Схема определяет доступные запросы и мутации. Тип Query включает в себя такие поля, как greetings (возвращает строку), welcome (принимает параметр имени и возвращает строку), students (возвращает массив типа Student) и student (принимает параметр ID и возвращает одного Student). Тип Mutation включает в себя такие операции, как create (принятие параметров firstName, LastName и возраста для создания нового учащегося), update (принятие параметров ID, FirstName, LastName и возраста для обновления учащегося) и delete (принятие параметра ID для удаления). студент). Тип Student имеет поля для идентификатора, имени, фамилии и возраста. Эта схема определяет структуру данных, которые можно запрашивать или изменять с помощью операций GraphQL.

Шаг 5. Реализация резольверов

В resolvers.js вы найдете функции преобразователя для определенных запросов и мутаций. Резолверы отвечают за выборку и обработку данных из ваших источников данных, в данном случае MongoDB с использованием Mongoose. Резолверы Query обрабатывают чтение данных, а резолверы Mutation обрабатывают создание, обновление и удаление данных.

const { Student } = require("./models/Student");

const resolvers = {
  Query: {
    greetings: () => "GraphQL is Awesome",
    welcome: (parent, args) => `Hello ${args.name}`,
    students: async () => await Student.find({}),
    student: async (parent, args) => await Student.findById(args.id),
  },

  Mutation: {
    create: async (parent, args) => {
      const { firstName, lastName, age } = args;
      const newStudent = new Student({ firstName, lastName, age });
      await newStudent.save();
      return newStudent;
    },
    update: async (parent, args) => {
      const { id } = args;
      const result = await Student.findByIdAndUpdate(id, args);
      return result;
    },
    delete: async (parent, args) => {
      const { id } = args;
      const deletedStudent = await Student.findByIdAndDelete(id);
      if (!deletedStudent) {
        throw new Error(`Stdent with ID ${id} not found`);
      }
      return deletedStudent;
    },
  },
};

module.exports = { resolvers };

Эти преобразователи определяют, как обрабатываются операции GraphQL и какие данные они должны возвращать. Раздел преобразователей «Запрос» включает функции для запросов: «приветствия» возвращает фиксированную строку «GraphQL is Awesome», «welcome» принимает аргумент имени и возвращает персонализированное приветствие, «студенты» используют модель «Студент» для получения все учащиеся из источника данных, а «студент» использует модель «Студент», чтобы найти учащегося по предоставленному ему идентификатору. В разделе «Мутация» определяются функции для мутаций: «создать» создает нового студента с использованием аргументов, сохраняет его в источнике данных и возвращает нового студента, «обновление» изменяет студента по его идентификатору и предоставленным аргументам и «удаляет». » удаляет учащегося по его идентификатору и предоставляет отзыв или сообщение об ошибке, если учащегося не существует. В целом, эти преобразователи позволяют взаимодействовать с данными учащихся посредством операций GraphQL.

Шаг 6. Подключение к MongoDB

В index.js вы видите код для подключения к вашей базе данных MongoDB. Замените URI своей собственной строкой подключения MongoDB. Обязательно замените password> на свое имя пользователя и пароль MongoDB Atlas.

const mongoose = require("mongoose");

const URI =
  "your-mongodb-url";

mongoose
  .connect(URI)
  .then(() => console.log(`database is connected`))
  .catch((err) => console.log(err.message));

Шаг 7: Запуск сервера Apollo

Последний шаг — запуск сервера Apollo. В том же файле index.js создайте новый экземпляр ApolloServer, используя определенные typeDefs и resolvers. Затем используйте метод startStandaloneServer для запуска сервера на порту 4000.

const { ApolloServer } = require("@apollo/server");
const { resolvers } = require("./resolvers");
const { typeDefs } = require("./models/typeDefs");
const { startStandaloneServer } = require("@apollo/server/standalone");
const mongoose = require("mongoose");

const URI =
  "your-mongodb-url";

mongoose
  .connect(URI)
  .then(() => console.log(`database is connected`))
  .catch((err) => console.log(err.message));

const server = new ApolloServer({ typeDefs, resolvers });

startStandaloneServer(server, {
  listen: { port: 4000 },
}).then(({ url }) => {
  console.log(`Server is running on ${url}`);
});

Шаг 8. Тестирование конечных точек GraphQL

После настройки CRUD API GraphQL с помощью Apollo Server и MongoDB следующим шагом будет проверка функциональности вашего API. Существует несколько инструментов, которые вы можете использовать для тестирования конечных точек GraphQL.

Использование игровой площадки GraphQL

1. Запустите свой сервер, запустив node index.js.
2. Откройте веб-браузер и перейдите к https://localhost:4000.
3. Вас встретит GraphQL Playground — интерактивный интерфейс для изучения и тестирования вашего API.
4. На левой панели вы можете писать запросы и мутации в соответствии с определенной вами схемой.
5. Выполняйте запросы, нажав кнопку «Играть». Вы увидите результаты на правой панели.

Использование клиента Apollo

Apollo Client — это мощная библиотека JavaScript для управления состоянием GraphQL и выполнения запросов к серверу GraphQL. Вот как вы можете использовать его для тестирования вашего API:

1. Установите клиент Apollo:

npm install apollo-boost @apollo/client

1. Создайте новый файл JavaScript (например, test.js) в каталоге вашего проекта.
2. В test.js импортируйте клиент Apollo и создайте экземпляр клиента:

const { ApolloClient, InMemoryCache } = require('@apollo/client');

const client = new ApolloClient({
  uri: 'https://localhost:4000', // Your GraphQL server URL
  cache: new InMemoryCache(),
});

1. Напишите и выполните запросы с помощью клиента:

async function testQueries() {
  const { data } = await client.query({
    query: YOUR_QUERY_HERE,
  });

  console.log(data);
}

async function testMutations() {
  const { data } = await client.mutate({
    mutation: YOUR_MUTATION_HERE,
  });

  console.log(data);
}

testQueries();
testMutations();

Примеры запросов и мутаций:

Создать:

mutation {
  create(firstName: "John", lastName: "Doe", age: 20) {
    id
    firstName
    lastName
    age
  }
}

Читать:

query {
  students {
    id
    firstName
    lastName
    age
  }
}

обновление:

mutation {
  update(id: "student_id_here", firstName: "UpdatedFirstName", age: 21) {
    id
    firstName
    lastName
    age
  }
}

удалить:

mutation {
  delete(id: "student_id_here") {
    id
    firstName
    lastName
    age
  }
}

Использование Почтальона

1. Откройте Postman и создайте новый запрос.
2. Установите тип запроса POST и введите URL-адрес https://localhost:4000.
3. В теле запроса выберите опцию «raw» и установите тип контента application/json.
4. Напишите запрос или мутацию GraphQL в теле запроса:

{
  "query": "YOUR_QUERY_OR_MUTATION_HERE"
}

Заключение

Поздравляем! Вы успешно настроили API-интерфейс GraphQL CRUD с использованием Apollo Server и MongoDB. Используя эту основу, вы можете расширить свой API, добавив больше типов, полей и преобразователей для удовлетворения конкретных потребностей вашего приложения. Гибкость GraphQL позволяет клиентам запрашивать именно те данные, которые им нужны, что делает его эффективным выбором для современной веб-разработки. А благодаря MongoDB в качестве хранилища данных вы получаете в свое распоряжение мощную базу данных NoSQL.

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