React Apollo 从状态动态创建查询

Posted 2023-03-08

【中文标题】React Apollo 从状态动态创建查询

【英文标题】：React Apollo dynamically create query from state

【发布时间】：2018-11-25 02:52:32

【问题描述】：

这是一个典型的情况 我的数据库中有一些字段可以说颜色、大小、高度...

我可以获取这些字段并将其显示给可以选择这些字段的用户，然后将它们设置为组件状态

我想要实现的是从这些存储在状态中的字段动态创建 GQL 查询（不是查询变量）

例子

//import react gql ....
class MyComponent extends Component 

constructor(props)
   super(props)
   this.state = 
     fields : []
   


render()
...


componentWillMount()
    fetch(...)
      .then(fields => this.setState(fields))
   



export default graphql( --->state => CREATE_QUERY_DYNAMICALLY_FROM_FIELDS(state.fields)<----,..some options)

有没有办法在查询创建期间访问组件状态？

或者其他方法？

任何想法表示赞赏

【问题讨论】：

我不认为有任何用于动态创建查询的内置函数，但由于查询只是一个字符串，您可以自己格式化该字符串。例如：`query topLevelField $ fields.join(',') ` 此外，如果您要在组件之外声明 graphql 查询，您还应该在反应组件之外声明字段列表。

由于graphql不支持动态查询，尝试使用apollo客户端，有条件地注入查询，甚至是声明式<Query .../>组件。

@LefiTarik 很棒的评论我已经升级到 react-apollo 2.1 并且如果你把它写成我肯定会接受的答案 就像一个魅力:)

伟大的@Ziker :)。

【参考方案1】：

class MyComponent extends Component 

   constructor(props)
       super(props)
       this.state = 
         fields : []
       
   

   render()
   ...
   

   componentWillMount()
       const query = gql`
           query myDynamicQuery 
               viewer 
                   endpoint 
                       $this.state.fields.join('\n')
                   
               
           
       `
       this.props.client.query( query ).then((res) => ...)
   

export default withApollo(MyComponent)

希望这是有效的:)

【讨论】：

您的建议有效！事实上，整个查询可以是动态的。我不知道可能会对下游产生什么影响（与离线或订阅有关）。

【参考方案2】：

由于 graphql 不支持 动态查询，请尝试使用 apollo 客户端并有条件地注入查询，甚至可以使用声明式 <Query .../> 组件。

【讨论】：

实际上graphql 确实支持动态查询（查询只是在帖子中作为json有效负载发送）。我将尝试@a-moynet 建议的工作