在 reactJS 中使用动态字段的 Apollo 客户端 graphql 查询

Posted 2023-03-08

【中文标题】在 reactJS 中使用动态字段的 Apollo 客户端 graphql 查询

【英文标题】：Apollo client graphql query with dynamic fields in reactJS

【发布时间】：2020-03-15 19:54:49

【问题描述】：

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

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

 getUserDetails 
   id
   name
 

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

 getUserDetails 
   id
   userType
 

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

【问题讨论】：

但是您可以编写一个在运行时为您构建查询的函数

【参考方案1】：

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

通常 GraphQL 可以很好地与 React 配合使用，并且以类似的方式进行组合。 GraphQL 带有 fragments 可以帮助组合查询。片段相当于 React 中的组件。 如果你有两个不同的 React 组件，编写两个查询应该没问题。我认为没有理由重用查询。

还有接口/联合。因此，也许您有一个页面要向用户展示，并且取决于您是否与用户是朋友，您想要展示不同的东西：

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

如果不是这种情况，并且您确实有一个组件具有不同的数据依赖关系，具体取决于某种输入，请不要害怕过度获取。当然 GraphQL 声称可以摆脱过度获取，但您的示例似乎很简单，我不会为此引入复杂性。

好的，你说你的问题只是一个例子！如果您想在设置了某个标志时有条件地加载一些昂贵的字段怎么办。 那么你可以使用directives:

const MyComponentQuery = gql`
  query MyComponentQuery($versionA: Boolean!) 
    
      getUserDetails 
        id
        name @inlude(if: $versionA)
        userType @skip(if: $versionA)
      
    
  
`;

function MyComponent(props) 
  const  data, loading, error  = useQuery(MyComponentQuery, 
    variables:  versionA: props.versionA ,
  );

  return //...

【讨论】：

看起来不错。给定的查询是一个示例，如果有 10-15 个字段，我认为我们不能使用指令。同意吗？

我同意指令是最后的手段，这就是我最后提到它的原因。但我不会动态创建查询。有数百家公司使用 GraphQL，到目前为止，我还没有看到一家公司说他们正在使用动态查询构建。相反，许多人报告了静态查询的好处。恕我直言，如果您 需要 动态查询，您在其他地方做错了什么。在客户端或架构设计中。