利用 GraphQL 简化 REST API 转型实战-JavaScript中文网-JavaScript教程资源分享门户

前言

REST API 已经成为现代 Web 应用程序开发的标准。然而，在实际开发过程中，REST API 存在一些问题，比如需要多次请求才能获取所需数据，无法灵活地获取和修改数据等等。GraphQL 是一种新的 API 设计语言，它可以解决这些问题，使得开发更加高效和灵活。本文将介绍 GraphQL 的基本概念和使用方法，并通过实例演示如何将 REST API 转型为 GraphQL API。

GraphQL 简介

GraphQL 是一种由 Facebook 开发的 API 设计语言。它使用一种类似于 SQL 的查询语言来定义 API 的数据模型，并通过一个统一的入口来获取数据。GraphQL 的主要特点包括：

可以通过一次请求获取多个资源的数据，避免了 REST API 需要多次请求才能获取所需数据的问题。
数据模型的定义更加灵活，可以根据客户端的需要动态生成查询语句，避免了 REST API 中需要定义多个 API Endpoint 的问题。
支持数据的修改和删除操作，可以通过一个入口实现所有的 CRUD 操作。

GraphQL 的基本概念

Schema

GraphQL 的 Schema 定义了 API 的数据模型，包括数据类型、查询和修改操作等。Schema 中定义的数据类型可以是标量类型（如字符串、数字等）或自定义类型。自定义类型可以包含多个字段，每个字段可以是标量类型或自定义类型。Schema 中的查询和修改操作定义了客户端可以执行的操作类型，例如查询、修改、删除等。

Query

Query 是 GraphQL 中获取数据的操作类型。它定义了客户端可以请求的数据类型以及请求的参数。Query 的返回值可以是标量类型或自定义类型。Query 中的参数可以是必选参数或可选参数，可以是标量类型或自定义类型。客户端可以通过 Query 来获取需要的数据。

Mutation

Mutation 是 GraphQL 中修改数据的操作类型。它定义了客户端可以执行的数据修改操作类型。Mutation 的参数和返回值与 Query 类似，但是它可以修改数据。

GraphQL 实战：将 REST API 转型为 GraphQL API

接下来，我们将通过一个实例来演示如何将一个 REST API 转型为 GraphQL API。

REST API

假设我们有一个 REST API，用于获取用户信息和用户的文章列表。API 的 Endpoint 如下：

GET /users/{id}：获取用户信息
GET /users/{id}/articles：获取用户的文章列表

其中，{id} 是用户的 ID。

GraphQL API

我们将 REST API 转型为 GraphQL API。首先，我们需要定义 Schema。Schema 中包含两个自定义类型：User 和 Article。User 包含用户信息，Article 包含文章信息。Schema 中定义了两个 Query：user 和 articles，分别用于获取用户信息和用户的文章列表。Schema 中还定义了一个 Mutation：updateUser，用于修改用户信息。

type User {
  id: ID!
  name: String!
  email: String!
}

type Article {
  id: ID!
  title: String!
  content: String!
}

type Query {
  user(id: ID!): User
  articles(userId: ID!): [Article]
}

type Mutation {
  updateUser(id: ID!, name: String, email: String): User
}

接下来，我们需要实现 Resolver。Resolver 是用于执行查询和修改操作的函数。在 Resolver 中，我们需要实现 Query 和 Mutation 中定义的操作类型。在本例中，我们需要实现 user、articles 和 updateUser 这三个操作类型。

const getUser = (id) => {
  // 调用 REST API 获取用户信息
  // 返回用户信息
}

const getArticles = (userId) => {
  // 调用 REST API 获取用户的文章列表
  // 返回文章列表
}

const updateUser = (id, name, email) => {
  // 调用 REST API 修改用户信息
  // 返回修改后的用户信息
}

const resolvers = {
  Query: {
    user: (parent, { id }) => getUser(id),
    articles: (parent, { userId }) => getArticles(userId),
  },
  Mutation: {
    updateUser: (parent, { id, name, email }) => updateUser(id, name, email),
  },
};

最后，我们需要实现一个 GraphQL API 入口。GraphQL API 入口是一个 HTTP 服务，用于接收客户端的请求并返回查询结果。在本例中，我们使用 Express 实现 GraphQL API 入口。

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

const app = express();

const schema = buildSchema(`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Article {
    id: ID!
    title: String!
    content: String!
  }

  type Query {
    user(id: ID!): User
    articles(userId: ID!): [Article]
  }

  type Mutation {
    updateUser(id: ID!, name: String, email: String): User
  }
`);

const getUser = (id) => {
  // 调用 REST API 获取用户信息
  // 返回用户信息
}

const getArticles = (userId) => {
  // 调用 REST API 获取用户的文章列表
  // 返回文章列表
}

const updateUser = (id, name, email) => {
  // 调用 REST API 修改用户信息
  // 返回修改后的用户信息
}

const resolvers = {
  Query: {
    user: (parent, { id }) => getUser(id),
    articles: (parent, { userId }) => getArticles(userId),
  },
  Mutation: {
    updateUser: (parent, { id, name, email }) => updateUser(id, name, email),
  },
};

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

app.listen(3000, () => {
  console.log('GraphQL API listening on port 3000');
});

现在，我们已经完成了将 REST API 转型为 GraphQL API 的过程。客户端可以通过 GraphQL API 来获取和修改数据，而不需要关心实际的 REST API 实现。

总结

GraphQL 是一种新的 API 设计语言，它可以解决 REST API 中存在的一些问题，使得开发更加高效和灵活。通过本文的介绍，我们了解了 GraphQL 的基本概念和使用方法，并通过实例演示了如何将 REST API 转型为 GraphQL API。希望本文能够对大家在实际开发中使用 GraphQL 有所帮助。

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