React Apollo动态创建状态

时间:2018-06-15 09:18:45

标签: reactjs graphql apollo react-apollo

这是模特的情况 我的数据库中有一些字段可以说颜色,大小,高度......

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

我想要实现的是从状态

中存储的这些字段动态创建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})

在查询创建过程中是否有办法访问组件状态?

还是其他一些方法?

赞赏任何想法

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:2)

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)

希望这是可行的:)