GraphQL 在大型 Web 应用中的应用实践-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 开发的查询语言和运行时。它的主要特点是允许客户端向服务器端发送一个类似于文本的结构化请求，以获取所需数据的能力，而不必依赖多个 REST 端点或自定义 API 端点。

在大型 Web 应用中，GraphQL 的应用实践可以带来很多好处，如简化复杂的数据库关系、提高查询效率、提供更好的 API 文档等等。本文将介绍 GraphQL 在大型 Web 应用中的应用实践，并给出示例代码。

了解 GraphQL 的基本概念

在学习 GraphQL 的应用实践之前，我们需要先了解一些基本概念：

Schema

GraphQL 的 Schema 定义了客户端可以查询的 API 类型。Schema 中的类型包括对象类型、标量类型、枚举类型、接口类型、联合类型等。

Query

Query 是客户端向服务器端查询数据的方式。Query 支持查询嵌套、查询参数、查询别名等功能，可以让客户端按需获取所需数据。

Mutation

Mutation 是客户端向服务器端执行数据操作的方式。Mutation 支持增删改等操作，并返回操作后的数据。

Resolver

Resolver 是 GraphQL 中最核心的概念，它决定了客户端发送的 Query 在服务器端具体应该执行哪些操作。Resolver 可以是任何代码块，包括函数、类方法等。

实践应用

在真实的 Web 应用中，GraphQL 可以带来诸多优势，下面我们将分别介绍以下场景下的 GraphQL 实践应用。

处理大量的复杂关系

在传统的 RESTful API 中，如果需要获取关联数据，需要通过多个 API 端点进行请求。但是在 GraphQL 中，我们可以自由嵌套查询获取关联数据。

例如，我们有一个 blog GraphQL API，其中包含了文章和评论两个类型。一个文章可以对应多个评论。假设我们需要获取所有文章及其评论的作者信息，我们可以使用以下查询：

// javascriptcn.com 代码示例
{
  articles {
    title
    content
    comments {
      content
      user {
        name
        email
      }
    }
  }
}

以上查询将会获取所有文章及其评论的作者信息。如果我们需要其他关联数据，只需要在查询中继续嵌套即可。

提高查询性能

GraphQL 可以让客户端按需获取所需数据，这可以减少不必要的数据传输，从而提高查询性能。同时，GraphQL 支持缓存机制，可以避免重复请求。

GraphQL 还支持批量查询，可以将多个请求合并成一个，从而减少网络请求。

提供更好的 API 文档

由于 GraphQL 的数据结构是通过确定的 Schema 来定义的，因此它可以自动生成详细的 API 文档。这不仅提供了开发人员的便利，还可以方便其他人员查看 API 结构，从而更好地理解 API 的设计意图。

GraphQL 应用实践示例

以下是一个简单的 GraphQL 示例应用，将展示 GraphQL 在 Web 应用中的应用实践。

安装依赖

npm install graphql express express-graphql

编写 Schema

// javascriptcn.com 代码示例
type Book {
  id: ID!
  title: String!
  author: String!
}

type Query {
  books: [Book!]!
}

type Mutation {
  addBook(title: String!, author: String!): Book!
}

编写 Resolver

// javascriptcn.com 代码示例
const books = [
  { id: "1", title: "Harry Potter and the Sorcerer's Stone", author: "J.K. Rowling" },
  { id: "2", title: "The Hitchhiker's Guide to the Galaxy", author: "Douglas Adams" },
];

const resolvers = {
  Query: {
    books: () => books,
  },
  Mutation: {
    addBook: (_, { title, author }) => {
      const book = { id: books.length + 1, title, author };
      books.push(book);
      return book;
    },
  },
};

启动 GraphQL 服务器

// javascriptcn.com 代码示例
const express = require("express");
const { graphqlHTTP } = require("express-graphql");
const { buildSchema } = require("graphql");

const schema = buildSchema(`...`); // 编写 Schema
const resolvers = { ... }; // 编写 Resolver

const app = express();
app.use(
  "/graphql",
  graphqlHTTP({
    schema,
    rootValue: resolvers,
    graphiql: true,
  })
);

app.listen(4000, () => console.log("Now browse to http://localhost:4000/graphql"));

查询数据

打开浏览器，访问 http://localhost:4000/graphql，输入以下查询：

query {
  books {
    id
    title
    author
  }
}

我们将会得到服务器返回的结果：

// javascriptcn.com 代码示例
{
  "data": {
    "books": [
      {
        "id": "1",
        "title": "Harry Potter and the Sorcerer's Stone",
        "author": "J.K. Rowling"
      },
      {
        "id": "2",
        "title": "The Hitchhiker's Guide to the Galaxy",
        "author": "Douglas Adams"
      }
    ]
  }
}

添加数据

在 GraphiQL 中，输入以下 Mutation：

mutation {
  addBook(title: "The Lord of the Rings", author: "J.R.R. Tolkien") {
    id
    title
    author
  }
}

我们将会得到服务器返回的结果：

// javascriptcn.com 代码示例
{
  "data": {
    "addBook": {
      "id": "3",
      "title": "The Lord of the Rings",
      "author": "J.R.R. Tolkien"
    }
  }
}

总结

在大型 Web 应用中，GraphQL 的应用实践可以带来很多好处，如简化复杂的数据库关系、提高查询效率、提供更好的 API 文档等等。在实际开发中，我们可以根据具体的需求和场景来选择是否使用 GraphQL。同时，我们也需要了解 GraphQL 的基本概念和使用方法，从而更好地应用 GraphQL。

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