从 RESTful 向 GraphQL 转型的思考过程-JavaScript中文网-JavaScript教程资源分享门户

RESTful API 是现代 Web 开发中最常用的 API 设计风格之一。然而，RESTful API 的设计存在一些缺陷，例如需要多次请求获取数据、返回数据过多或过少等问题。GraphQL 是一种新兴的 API 设计语言，它旨在解决这些问题，提供更加高效和灵活的数据查询和操作方式。

在本文中，我们将探讨从 RESTful API 向 GraphQL 的转型过程，包括了解 GraphQL 的基础知识、比较 RESTful 和 GraphQL 的优缺点、实现 GraphQL API 和使用 GraphQL 客户端等方面内容。

了解 GraphQL

GraphQL 是一种由 Facebook 开发的 API 设计语言，它允许客户端定义需要获取的数据的结构和关系，从而减少了不必要的数据传输和处理。GraphQL 具有以下特点：

客户端定义数据结构：GraphQL 允许客户端定义需要获取的数据结构和关系，而不是由服务器定义。这样可以减少不必要的数据传输和处理，提高查询效率。
可以获取多个资源：GraphQL 允许一次查询获取多个资源，而不需要多次请求。这可以减少网络请求和延迟。
灵活的数据查询：GraphQL 允许客户端查询需要的数据字段和关系，而不是返回固定的数据结构。这可以减少不必要的数据传输和处理，提高查询效率。
强类型系统：GraphQL 具有强类型系统，可以检查查询语句的正确性和完整性，减少错误和调试时间。

比较 RESTful 和 GraphQL

RESTful API 和 GraphQL 都是常用的 API 设计风格。它们的优缺点如下：

RESTful

优点：

易于理解和使用：RESTful API 遵循 HTTP 协议，易于理解和使用。
支持多种数据格式：RESTful API 支持多种数据格式，如 JSON、XML 等。
支持缓存：RESTful API 支持缓存，可以减少数据传输和处理。
有成熟的工具和框架：RESTful API 有许多成熟的工具和框架，如 Spring、Express 等。

缺点：

多次请求：RESTful API 需要多次请求才能获取需要的数据，增加了网络请求和延迟。
返回数据过多或过少：RESTful API 返回的数据可能过多或过少，需要进行处理。
难以扩展：RESTful API 难以扩展，需要修改 API 接口和客户端代码。

GraphQL

优点：

减少网络请求和延迟：GraphQL 允许一次查询获取多个资源，减少了网络请求和延迟。
灵活的数据查询：GraphQL 允许客户端查询需要的数据字段和关系，减少了不必要的数据传输和处理。
强类型系统：GraphQL 具有强类型系统，可以检查查询语句的正确性和完整性，减少错误和调试时间。
易于扩展：GraphQL 易于扩展，可以通过添加新的字段和类型来扩展 API 接口，而不需要修改客户端代码。

缺点：

学习成本高：GraphQL 需要学习新的语法和概念，学习成本较高。
缺乏标准化：GraphQL 缺乏标准化，不同的实现可能存在差异。
不支持缓存：GraphQL 不支持缓存，需要手动添加缓存机制。

实现 GraphQL API

实现 GraphQL API 需要以下步骤：

定义数据模型：定义数据模型，包括类型、字段和关系。

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

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
}

定义查询和变更：定义查询和变更，包括字段、参数和返回值。

// javascriptcn.com 代码示例
type Query {
  user(id: ID!): User
  users: [User!]!
  post(id: ID!): Post
  posts: [Post!]!
}

type Mutation {
  createUser(name: String!, email: String!): User!
  updateUser(id: ID!, name: String, email: String): User!
  deleteUser(id: ID!): Boolean!
  createPost(title: String!, content: String!, authorId: ID!): Post!
  updatePost(id: ID!, title: String, content: String): Post!
  deletePost(id: ID!): Boolean!
}

编写解析器：编写解析器，将查询和变更转换为实际的数据操作。

// javascriptcn.com 代码示例
const resolvers = {
  Query: {
    user: (_, { id }) => User.findById(id),
    users: () => User.find(),
    post: (_, { id }) => Post.findById(id),
    posts: () => Post.find(),
  },
  Mutation: {
    createUser: (_, { name, email }) => User.create({ name, email }),
    updateUser: (_, { id, name, email }) => User.findByIdAndUpdate(id, { name, email }, { new: true }),
    deleteUser: (_, { id }) => User.findByIdAndDelete(id).then(() => true).catch(() => false),
    createPost: (_, { title, content, authorId }) => Post.create({ title, content, author: authorId }),
    updatePost: (_, { id, title, content }) => Post.findByIdAndUpdate(id, { title, content }, { new: true }),
    deletePost: (_, { id }) => Post.findByIdAndDelete(id).then(() => true).catch(() => false),
  },
  User: {
    posts: (user) => Post.find({ author: user.id }),
  },
  Post: {
    author: (post) => User.findById(post.author),
  },
};

启动 GraphQL 服务器：启动 GraphQL 服务器，将解析器和数据模型注册到服务器。

// javascriptcn.com 代码示例
const express = require('express');
const { ApolloServer } = require('apollo-server-express');

const typeDefs = require('./schema');
const resolvers = require('./resolvers');
const User = require('./models/User');
const Post = require('./models/Post');

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: () => ({ User, Post }),
});

const app = express();
server.applyMiddleware({ app });

app.listen({ port: 4000 }, () => {
  console.log(`Server ready at http://localhost:4000${server.graphqlPath}`);
});

使用 GraphQL 客户端

使用 GraphQL 客户端需要以下步骤：

安装 GraphQL 客户端：安装适用于您的编程语言和框架的 GraphQL 客户端。
定义查询和变更：定义查询和变更，包括字段、参数和返回值。

// javascriptcn.com 代码示例
query {
  user(id: "1") {
    id
    name
    email
    posts {
      id
      title
      content
    }
  }
}

mutation {
  createUser(name: "Alice", email: "alice@example.com") {
    id
    name
    email
  }
}

执行查询和变更：执行查询和变更，将结果返回给客户端。

// javascriptcn.com 代码示例
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

client
  .query({
    query: gql`
      query {
        user(id: "1") {
          id
          name
          email
          posts {
            id
            title
            content
          }
        }
      }
    `,
  })
  .then((result) => console.log(result));

client
  .mutate({
    mutation: gql`
      mutation {
        createUser(name: "Alice", email: "alice@example.com") {
          id
          name
          email
        }
      }
    `,
  })
  .then((result) => console.log(result));

总结

本文介绍了从 RESTful API 向 GraphQL 的转型过程，包括了解 GraphQL 的基础知识、比较 RESTful 和 GraphQL 的优缺点、实现 GraphQL API 和使用 GraphQL 客户端等方面内容。GraphQL 具有灵活的数据查询、减少网络请求和延迟、易于扩展等优点，但需要学习新的语法和概念，缺乏标准化。在实现 GraphQL API 和使用 GraphQL 客户端时，需要定义数据模型、查询和变更，并编写解析器和执行查询和变更。

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