Apollo客户端graphql查询与reactJS中的动态字段

Question

这是我用于获取用户详细信息的示例 graphql 查询（我在 ReactJS 中使用 Apollo 客户端）

如果我只需要id和name作为响应，我使用此查询

{
 getUserDetails {
   id
   name
 }
}

或者如果我只需要id和userType我使用此查询：

{
 getUserDetails {
   id
   userType
 }
}

有什么方法可以动态传递字段名称和用户类型（基本上动态传递字段）而不是再次编写整个查询？

Answer 1

您可以在运行时构建查询，但通常建议不要这样做（出于我不想进入此处的原因）。相反，GraphQL 提供了其他解决方案来解决该问题：

一般来说，GraphQL 与 React 配合得很好，并且以类似的方式组合。GraphQL 附带可以帮助编写查询的片段。片段相当于 React 中的组件。如果您有两个不同的 React 组件，那么编写两个查询应该没问题。我认为没有理由重用查询。

然后是接口/联合。因此，也许您有一个页面想要向用户显示，并且根据您是否是该用户的朋友，您想要显示不同的内容：

{
  getUserDetails {
    id
    name
    ...on UserFriend {
      friendsSince
    }
    ...on UserStranger {
      numberCommonFriends
    }
  }
}

如果情况并非如此，并且您确实有一个组件具有不同的数据依赖关系，具体取决于某种输入，请不要担心过度获取。当然 GraphQL 声称可以摆脱过度获取，但你的例子看起来太微不足道了，我不会为此引入复杂性。

好吧，你说你的问题只是一个例子！如果您想在设置了某个标志时有条件地加载一些昂贵的字段，该怎么办？然后你可以使用指令：

{
  getUserDetails {
    id
    name
    ...on UserFriend {
      friendsSince
    }
    ...on UserStranger {
      numberCommonFriends
    }
  }
}