在 GraphQL 中重构 REST API-JavaScript中文网-JavaScript教程资源分享门户

什么是 GraphQL？

GraphQL 是一种由 Facebook 开发的查询语言，用于 API 的查询和操作。与传统的 REST API 不同，GraphQL 允许客户端指定需要的数据，而不是由服务器决定返回什么数据。这种灵活性使得 GraphQL 在前端开发中越来越流行。

GraphQL 的优势

灵活性：GraphQL 允许客户端精确地指定需要的数据，避免了 REST API 中的“过度获取”问题。
高效性：由于客户端指定了需要的数据，服务器可以一次性返回所有数据，减少了网络请求的次数。
可扩展性：GraphQL 允许添加新的字段和类型而不影响现有 API，这使得应用程序更容易扩展和维护。

REST API 的问题

尽管 REST API 已经成为了 Web 开发中的标准，但是它们存在一些问题：

过度获取：REST API 中的端点通常只能返回预定义的数据结构，这意味着客户端可能会获取不需要的数据。
版本控制：当 REST API 的端点发生变化时，客户端需要更新代码以适应新的 API 版本。
多次请求：由于 REST API 中的端点只返回预定义的数据，客户端可能需要多次请求才能获取需要的所有数据。

如何使用 GraphQL 重构 REST API

步骤 1：定义 GraphQL schema

GraphQL schema 定义了数据类型和查询端点。在这个例子中，我们将定义一个简单的 schema，用于查询用户信息。

// javascriptcn.com 代码示例
type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  user(id: ID!): User
}

步骤 2：实现 resolver 函数

resolver 函数是用于从数据库或其他数据源中检索数据的函数。在这个例子中，我们将实现一个简单的 resolver 函数，用于从数据库中检索用户信息。

// javascriptcn.com 代码示例
const users = [
  { id: 1, name: 'John Doe', email: 'john.doe@example.com' },
  { id: 2, name: 'Jane Doe', email: 'jane.doe@example.com' },
];

const resolvers = {
  Query: {
    user: (parent, { id }) => {
      return users.find(user => user.id === parseInt(id));
    },
  },
};

步骤 3：创建 GraphQL API

使用现有的 Node.js 框架，如 Express 或 Koa，创建一个 GraphQL API。

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

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

  type Query {
    user(id: ID!): User
  }
`);

const users = [
  { id: 1, name: 'John Doe', email: 'john.doe@example.com' },
  { id: 2, name: 'Jane Doe', email: 'jane.doe@example.com' },
];

const resolvers = {
  Query: {
    user: (parent, { id }) => {
      return users.find(user => user.id === parseInt(id));
    },
  },
};

const app = express();

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

app.listen(3000, () => {
  console.log('GraphQL server running on http://localhost:3000/graphql');
});

步骤 4：使用 GraphQL 客户端查询 API

使用 GraphQL 客户端，如 Apollo Client 或 Relay，查询 API。在这个例子中，我们将使用 GraphiQL 进行查询。

query {
  user(id: 1) {
    name
    email
  }
}

查询将返回以下结果：

{
  "data": {
    "user": {
      "name": "John Doe",
      "email": "john.doe@example.com"
    }
  }
}

总结

GraphQL 是一种比传统的 REST API 更灵活、更高效、更可扩展的查询语言。通过使用 GraphQL，我们可以避免 REST API 中的一些问题，如“过度获取”和版本控制。在本文中，我们展示了如何使用 GraphQL 重构 REST API，并提供了一些示例代码。如果您正在开发 Web 应用程序，那么您应该考虑使用 GraphQL 来提高应用程序的效率和可维护性。

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