解决 GraphQL 中的循环引用问题-JavaScript中文网-JavaScript教程资源分享门户

什么是循环引用？

在 GraphQL 中，循环引用指的是对象之间被引用形成闭环的情况。例如，一个 User 对象可能有多个 Post 对象，而每个 Post 又引用了一个 User，并且每个 User 又有多个 Post。这种情况就形成了循环引用。

当 GraphQL 查询中涉及到循环引用的对象时，就容易出现无限循环的情况，进而导致系统崩溃。因此，解决 GraphQL 中的循环引用问题非常重要。

如何解决循环引用？

在 GraphQL 中，解决循环引用的核心方法是通过中间层来断开闭环。具体实现方式有如下两种。

1. 嵌套解决

在 GraphQL 中嵌套对象时，可以将查询结果以一个中间层的方式返回，这样就能够防止循环引用的情况发生。

例如，我们可以在 Post 类型中添加一个 userResolver 字段，来封装 User 对象，如下所示：

// javascriptcn.com 代码示例
type Post {
  title: String
  content: String
  userResolver: User
}

type User {
  name: String
  posts: [Post]
}

// javascriptcn.com 代码示例
const resolvers = {
  Post: {
    userResolver: (post, _, { dataSources }) => {
      return dataSources.usersAPI.getUserById(post.userId)
    },
  },
  User: {
    posts: (user, _, { dataSources }) => {
      return dataSources.postsAPI.getPostsByUserId(user.id)
    },
  },
};

通过这种方式，我们可以在不出现循环引用的情况下，获取到需要的对象信息。

2. 延迟加载解决

通过延迟加载的方式，我们也可以避免循环引用问题的发生。具体实现方式是，当查询中遇到循环引用时，暂时返回一个空的对象，待其他对象加载完毕后，再进行递归查询，填充空对象的信息。

实现方式如下：

// javascriptcn.com 代码示例
const fetchUser = async (userId) => {
  const user = await db.findUserById(userId);
  user.posts = async () => Promise.all(user.postIds.map(fetchPost));
  return user;
};

const fetchPost = async (postId) => {
  const post = await db.findPostById(postId);
  post.author = async () => fetchUser(post.authorId);
  return post;
};

const resolvers = {
  Post: {
    author: (post) => post.author(),
  },
  User: {
    posts: (user) => user.posts(),
  },
};

通过这种方法，我们可以保证在避免循环引用的前提下，正确获取到需要的信息。

总结

在 GraphQL 中循环引用是一个常见但危险的问题，一旦出现可能会导致系统崩溃。通过使用中间层和延迟加载的方式，我们可以保证在避免循环引用的前提下，正确获取到需要的信息。通过实践中的探索，我们可以更好地理解循环引用的表现和解决方案，更好地开发出高效稳定的前端应用。

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