体验 GraphQL：从 Restful 到 GraphQL 的转型

前言

在前端开发中，我们经常会使用 Restful API 来与后端进行数据交互。然而，随着前端应用的复杂度不断增加，Restful API 的一些缺点也逐渐显露出来，例如需要进行多次请求才能获取到需要的数据、数据冗余等问题。为了解决这些问题，Facebook 推出了一种新的数据查询语言 GraphQL，它可以帮助我们更高效地获取数据。本文将介绍 GraphQL 的基本概念、使用方法以及与 Restful API 的对比。

GraphQL 的基本概念

GraphQL 是一种由 Facebook 开发的数据查询语言，它可以帮助我们更加高效地获取数据。与 Restful API 不同，GraphQL 的查询语句是由客户端来定义的，而不是由服务端来定义。客户端可以根据自己的需要来定义查询语句，只获取需要的数据，避免了 Restful API 中需要进行多次请求才能获取到需要的数据的问题。

GraphQL 的查询语句由三部分组成：查询（Query）、变更（Mutation）和订阅（Subscription）。查询用于获取数据，变更用于修改数据，订阅用于实时获取数据更新。查询和变更都可以带有参数，以便更加精确地获取或修改数据。

GraphQL 的返回结果是一个 JSON 对象，其中包含了客户端所请求的所有数据。与 Restful API 不同的是，GraphQL 中的数据是以类型（Type）的形式进行定义的，客户端可以根据需要来定义自己的类型。这样可以避免数据冗余的问题，提高数据的利用率。

GraphQL 的使用方法

安装

要使用 GraphQL，我们需要先安装相关的包。可以使用 npm 或 yarn 进行安装：

npm install graphql express-graphql

或者

yarn add graphql express-graphql

定义类型

在 GraphQL 中，我们需要先定义自己的类型。可以使用 GraphQLObjectType 来定义类型，例如：

// javascriptcn.com 代码示例
const { GraphQLObjectType, GraphQLString } = require('graphql');

const UserType = new GraphQLObjectType({
  name: 'User',
  fields: {
    id: { type: GraphQLString },
    name: { type: GraphQLString },
    age: { type: GraphQLString },
  },
});

module.exports = UserType;

上面的代码定义了一个名为 User 的类型，包含了 id、name 和 age 三个字段。

定义查询

定义好类型之后，我们可以开始定义查询。使用 GraphQLSchema 来定义查询，例如：

// javascriptcn.com 代码示例
const { GraphQLSchema, GraphQLObjectType, GraphQLString } = require('graphql');
const UserType = require('./userType');

const schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'Query',
    fields: {
      user: {
        type: UserType,
        args: {
          id: { type: GraphQLString },
        },
        resolve: (parent, args) => {
          // 根据 id 获取用户信息
          return getUserById(args.id);
        },
      },
    },
  }),
});

module.exports = schema;

上面的代码定义了一个名为 Query 的查询，包含了一个名为 user 的查询字段。user 查询字段需要传入一个 id 参数，返回一个 UserType 类型的对象。resolve 函数用于实现查询的逻辑，根据传入的 id 获取用户信息并返回。

启动服务器

定义好查询之后，我们可以启动服务器了。可以使用 express-graphql 来启动服务器，例如：

// javascriptcn.com 代码示例
const express = require('express');
const graphqlHTTP = require('express-graphql');
const schema = require('./schema');

const app = express();

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

app.listen(3000, () => {
  console.log('Server started at http://localhost:3000/');
});

上面的代码启动了一个监听在 3000 端口的服务器，访问 http://localhost:3000/graphql 可以进入 GraphQL 的调试界面。

查询数据

启动服务器之后，我们可以使用 GraphQL 的调试界面来进行查询。例如，查询 id 为 1 的用户的信息：

query {
  user(id: "1") {
    id
    name
    age
  }
}

上面的查询语句表示查询一个名为 user 的字段，需要传入一个 id 参数，返回一个包含 id、name 和 age 字段的对象。执行查询之后，服务器会返回如下的结果：

// javascriptcn.com 代码示例
{
  "data": {
    "user": {
      "id": "1",
      "name": "张三",
      "age": "20"
    }
  }
}

GraphQL 与 Restful API 的对比

数据获取效率

Restful API 中，我们需要进行多次请求才能获取到需要的数据，而 GraphQL 可以一次性获取所有需要的数据，避免了多次请求的问题。这样可以提高数据获取的效率，减少了网络传输的开销。

数据冗余问题

Restful API 中，我们需要将数据按照一定的格式返回给客户端，这样会导致数据冗余的问题。而 GraphQL 中，客户端可以根据自己的需要来定义查询语句，只获取需要的数据，避免了数据冗余的问题。

编写复杂查询语句的难度

在 Restful API 中，我们需要编写复杂的查询语句来获取需要的数据，而在 GraphQL 中，客户端可以自己定义查询语句，避免了编写复杂查询语句的难度。

缓存问题

在 Restful API 中，由于数据是按照一定的格式返回给客户端的，因此缓存的效率不高。而在 GraphQL 中，客户端可以根据自己的需要来定义查询语句，避免了缓存的问题。

总结

本文介绍了 GraphQL 的基本概念、使用方法以及与 Restful API 的对比。GraphQL 可以帮助我们更加高效地获取数据，避免了多次请求、数据冗余等问题。使用 GraphQL 可以提高数据获取的效率、减少网络传输的开销，并且可以根据需要来定义查询语句，避免了编写复杂查询语句的难度。

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