GraphQL：使用多个可选参数创建请求

Posted 2023-03-08

【中文标题】GraphQL：使用多个可选参数创建请求

【英文标题】：GrahpQL: Create requests with multiple optional arguments

【发布时间】：2018-10-18 22:20:50

【问题描述】：

使用apollo-client 和graphql-tag 我正在尝试创建一个类似的请求：

gql`
    
        data(
            filter: $options.filter
            sort: $options.sort
            limit: $options.limit
            offset: $options.offset
        ) 
            name
        
    
`

但并非所有这些选项都始终设置，有时我可能只使用限制和偏移。但如果我不设置它们，我会得到Expected type Int, found undefined.

我是否应该事先遍历我的选项对象并将任何undefined 值与null 交换？或者有没有更好的方法来构建它？

【参考方案1】：

您应该避免在查询中对值使用占位符，而应使用变量。所以你的查询现在看起来像这样：

const MY_QUERY = gql`
  query MyQuery($filter: String, $sort: String, $limit: Int, $offset: Int) 
    data (
      filter: $filter
      sort: $sort
      limit: $limit
      offset: $offset
    ) 
      name
    
  
`

注意：您为变量定义的类型需要与您的过滤器、排序、限制和偏移参数的架构相匹配。

现在您可以在渲染Query 组件时传入变量：

<Query query=MY_QUERY variables= limit: 10, offset: 20 >
  ( loading, error, data ) => 
    // ...
  
</Query>

或者，使用 HOC：

graphql(MY_QUERY,  options: (props) => ( variables:  limit: 10, offset: 20  ) 

或者直接使用客户端：

client.query( query: MY_QUERY, variables: limit: 10, offset: 20 )

如果任何变量未定义，它们将被忽略，而您无需执行任何其他操作。

【讨论】：

啊，谢谢，看起来我确实错过了一些东西，所以会去读更多的东西。我们目前不使用任何受支持的视图库（react、angular 等），因此有时很难弄清楚这些示例。 HOC 代表什么？

对不起，我有一种不好的倾向，认为每个人都使用 React :P HOC 代表高阶组件，是一个 React 概念。我已经编辑了我的答案，包括一个如何在直接使用客户端时使用变量的示例。有关详细信息，请参阅文档：apollographql.com/docs/react/api/…

谢谢，现在更有意义了。大声笑，我花了很长时间才弄清楚我不必也将类型添加到客户端，例如我有一个服务器枚举 DataSort，我试图将枚举添加到我的查询中，这样我就可以将它添加到 query MyQuery(...)... 最终 github.com/apollographql/apollo-client/issues/636 为我指明了正确的方向