如何解决 GraphQL API 中的数据冗余和循环引用-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一个强类型的 API 查询语言，它允许客户端精确请求需要的数据，避免了在传统 REST API 中经常出现的数据冗余和不必要的请求。然而，由于 GraphQL 的灵活性和精确性，数据冗余和循环引用问题也会比较常见。本文将介绍如何解决这两个问题，并提供相应的示例代码和学习指导。

数据冗余问题

GraphQL 允许客户端查询它们需要的数据，不再需要像 REST API 那样请求整个资源，因此可以减少网络负载并加快响应时间。但是，由于 GraphQL 的灵活性，有些查询可能会返回包含重复数据的响应，这就是数据冗余问题。

例如，有这样一种情况：假设我们有一个 User 类型和一个 Post 类型，每个 Post 都有一个作者，如果客户端现在想要查询所有用户以及他们的所有文章，可以这样写：

// javascriptcn.com 代码示例
{
  users {
    id
    name
    posts {
      id
      title
    }
  }
}

这个查询返回了所有用户的信息，以及每个用户的每篇文章的标题。然而，如果一个用户有多篇文章，那么这个用户的信息就会出现多次在响应中，出现了冗余的数据。这样的话，对于每个用户的信息数据量将会很大，网络传输的数据量也会相应地增加，增加了响应时间和资源消耗。

那么如何解决这个问题呢？GraphQL 通过引入 Fragment 解决数据冗余问题。Fragment 是一些列的字段，能够被多个查询和类型复用。它们让你根据你的数据模型来定义一组字段，并在你的查询中多处重复使用，从而避免重复大小的响应体。示例代码如下：

// javascriptcn.com 代码示例
fragment postFields on Post {
  id
  title
}

{
  users {
    id
    name
    posts {
      ...postFields
    }
  }
}

通过上面的方式，可以避免重复的数据，并且响应体的大小更小了。

循环引用问题

循环引用是指两个或多个对象相互引用，导致无限循环，最终使应用程序崩溃或性能受损。在 GraphQL API 中，循环引用是一个常见的问题。例如，一个 User 类型可能有一系列的 Posts，并且每个 Post 返回其作者的信息，同时作者信息又包含该作者发布的所有文章。那么这个查询中就涉及到了 User、Post、Author 等多个类型的相互引用，容易形成循环引用问题。

为了解决循环引用，GraphQL 引入了一个可以延迟解决的方案。它通常使用额外的 resolvers 来解决问题，而不是使用静态配对。示例代码如下：

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

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

type Query {
  users: [User]
  posts: [Post]
}

const resolvers = {
  User: {
    posts(user) {
      return posts.filter(post => post.authorId === user.id);
    }
  },
  Post: {
    author(post) {
      return users.find(user => user.id === post.authorId);
    }
  }
};

在上面的例子中，我们如何解决了循环引用问题呢？其实很简单，通过 resolvers 将 User 和 Post 类型关联起来，使用 posts 属性来获取所有与该用户相关的帖子。这样，在获取 title 和 author 信息时就不会出现冗余数据，而 posts 属性会自动关联到当前用户相关的帖子。这样就避免了循环引用的问题。

总结

本文介绍了如何解决 GraphQL API 中的数据冗余和循环引用问题。对于数据冗余问题，使用 Fragment 可以避免冗余数据的问题，减少网络传输的数据量，降低资源消耗。对于循环引用问题，通过 resolvers 的方式来解决问题，避免了相互引用导致无限循环的问题。

以上内容仅为参考，希望读者在掌握了上述技巧的前提下，可以结合自己实际需求来设计更好的 GraphQL API。

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