GraphQL 和 MongoDB 整合使用实例-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要与数据库进行交互，以获取或修改数据。而在现代化的应用程序中，GraphQL 和 MongoDB 的组合已成为一种流行的选择。GraphQL 是一种查询语言，它可以帮助我们更好地管理数据请求和响应。而 MongoDB 是一个文档数据库，它可以轻松地存储和查询 JSON 格式的数据。在本文中，我们将探讨如何将这两个技术整合在一起，并提供一些示例代码。

什么是 GraphQL？

GraphQL 是一种用于 API 的查询语言，它由 Facebook 开发并在 2015 年首次公开发布。它允许客户端指定需要获取的数据字段和它们的关系，从而获得更精确的数据。相比于 REST API，GraphQL 更加灵活和高效，因为它可以减少不必要的数据传输。

GraphQL 有三个主要的组成部分：

查询语言，它定义了客户端可以请求的数据字段和它们的关系。
服务端运行时，它解析客户端查询，并返回所需的数据。
类型系统，它定义了可查询的数据类型和它们之间的关系。

什么是 MongoDB？

MongoDB 是一个开源的文档数据库，它使用 JSON 格式存储数据。MongoDB 支持灵活的数据模型，可以轻松地存储和查询不同结构的数据。MongoDB 还具有高可扩展性和高可用性，因为它可以在多个节点上进行复制。

MongoDB 中的数据存储在集合中，集合类似于关系数据库中的表。每个文档都是一个 JSON 对象，它可以包含不同类型的数据，如字符串、数字和数组。

如何将 GraphQL 和 MongoDB 整合在一起？

GraphQL 和 MongoDB 的整合需要使用一个中间件，它可以将 GraphQL 查询转换为 MongoDB 查询，并返回所需的数据。在本文中，我们将使用 graphql-compose-mongoose，它是一个用于将 MongoDB 模型转换为 GraphQL 类型的库。

安装和配置 `graphql-compose-mongoose`

首先，我们需要安装 graphql-compose-mongoose 和 mongoose。mongoose 是一个 MongoDB ORM，它可以帮助我们更轻松地与 MongoDB 进行交互。

npm install graphql-compose-mongoose mongoose

接下来，我们需要定义 MongoDB 模型，并使用 graphql-compose-mongoose 将其转换为 GraphQL 类型。我们可以将以下代码添加到我们的项目中：

const { composeWithMongoose } = require('graphql-compose-mongoose');
const { Schema, model } = require('mongoose');

const bookSchema = new Schema({
  title: String,
  author: String,
  description: String,
});

const Book = model('Book', bookSchema);

const BookTC = composeWithMongoose(Book);

module.exports = { Book, BookTC };

在此代码中，我们定义了一个名为 Book 的 MongoDB 模型，并使用 composeWithMongoose 将其转换为 GraphQL 类型。BookTC 变量是一个包含了所有 GraphQL 操作的类型组合器。

定义 GraphQL 查询

接下来，我们需要定义 GraphQL 查询，以便客户端可以请求所需的数据。我们可以将以下代码添加到我们的项目中：

const { GraphQLObjectType, GraphQLSchema, GraphQLList, GraphQLNonNull } = require('graphql');

const BookQuery = new GraphQLObjectType({
  name: 'BookQuery',
  fields: {
    books: {
      type: GraphQLList(BookTC.getType()),
      resolve: () => Book.find(),
    },
    book: {
      type: BookTC.getType(),
      args: { id: { type: new GraphQLNonNull(GraphQLString) } },
      resolve: (_, { id }) => Book.findById(id),
    },
  },
});

const schema = new GraphQLSchema({
  query: BookQuery,
});

在此代码中，我们定义了一个名为 BookQuery 的 GraphQL 对象类型，并在其中定义了两个查询字段：books 和 book。books 字段返回所有图书的列表，而 book 字段根据 ID 返回单个图书。

定义 GraphQL 修改

除了查询之外，我们还需要定义 GraphQL 修改，以便客户端可以更改数据。我们可以将以下代码添加到我们的项目中：

const BookMutation = new GraphQLObjectType({
  name: 'BookMutation',
  fields: {
    createBook: {
      type: BookTC.getType(),
      args: {
        title: { type: new GraphQLNonNull(GraphQLString) },
        author: { type: new GraphQLNonNull(GraphQLString) },
        description: { type: new GraphQLNonNull(GraphQLString) },
      },
      resolve: (_, args) => Book.create(args),
    },
    updateBook: {
      type: BookTC.getType(),
      args: {
        id: { type: new GraphQLNonNull(GraphQLString) },
        title: { type: GraphQLString },
        author: { type: GraphQLString },
        description: { type: GraphQLString },
      },
      resolve: (_, args) => Book.findByIdAndUpdate(args.id, args, { new: true }),
    },
    deleteBook: {
      type: BookTC.getType(),
      args: { id: { type: new GraphQLNonNull(GraphQLString) } },
      resolve: (_, { id }) => Book.findByIdAndDelete(id),
    },
  },
});

const schema = new GraphQLSchema({
  query: BookQuery,
  mutation: BookMutation,
});

在此代码中，我们定义了一个名为 BookMutation 的 GraphQL 对象类型，并在其中定义了三个修改字段：createBook、updateBook 和 deleteBook。createBook 字段创建一本新书，updateBook 字段更新一本书的信息，deleteBook 字段删除一本书。

运行 GraphQL API

最后，我们需要运行我们的 GraphQL API，以便客户端可以请求数据。我们可以将以下代码添加到我们的项目中：

const express = require('express');
const { graphqlHTTP } = require('express-graphql');

const app = express();

app.use(
  '/graphql',
  graphqlHTTP({
    schema,
    graphiql: true,
  })
);

app.listen(3000, () => console.log('Server started on port 3000'));

在此代码中，我们使用 express 库创建了一个 HTTP 服务器，并将 graphqlHTTP 中间件添加到 /graphql 路径。graphiql 选项启用了 GraphiQL IDE，它可以帮助我们测试我们的 API。

在客户端中使用 GraphQL API

现在我们已经创建了一个 GraphQL API，我们可以在客户端中使用它。我们可以使用任何支持 GraphQL 的客户端库，例如 apollo-client 或 relay。

以下是一个使用 fetch API 进行请求的示例：

fetch('/graphql', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query: '{ books { title author } }' }),
})
  .then((res) => res.json())
  .then((data) => console.log(data));

在此代码中，我们向 /graphql 路径发送了一个 POST 请求，并使用 GraphQL 查询语言请求了所有图书的标题和作者。在响应中，我们得到了一个包含所需数据的 JSON 对象。

总结

在本文中，我们探讨了如何将 GraphQL 和 MongoDB 整合在一起，并提供了一些示例代码。GraphQL 和 MongoDB 的组合可以帮助我们更好地管理数据请求和响应，并提高应用程序的性能和可扩展性。如果您正在构建一个现代化的应用程序，那么考虑使用 GraphQL 和 MongoDB，它们将成为您的有力工具。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65c072ceadd4f0e0ffa57398

GraphQL 和 MongoDB 整合使用实例