reactjsgraphqlapolloreact-apollo

React Apollo dynamically create query from state


Heres a model situation I have some fields in my DB lets say color,size,height ...

I can fetch and display these fields to user who can choose these fields and they are afterwards set to components state

What i want to achieve is to dynamically create GQL query (not query variables) from these fields stored in state

Example

//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})

Is there a way to access components state during query creation ?

Or some other approach ?

Any ideas appreciated


Solution

  • Since graphql doesn't support dynamic queries, try to use the apollo client and inject the query conditionally or even you could use the declarative <Query .../> Component.