React Apollo dynamically create query from state

Question

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

I don't think there is any built-in function for dynamically creating queries, but since the query is just a string you could format that string by yourself. Eg: `query{ topLevelField { ${ fields.join(',') } }}` Also you should declare the list of fields outside of your react component, if you are going to declare the graphql query outside of your component. — zoran404
– zoran404, Commented Jun 15, 2018 at 9:46
Since graphql doesn't support dynamic queries, try to use the apollo client and inject the query conditionally or even the declarative <Query .../> Component. — Lafi
– Lafi, Commented Jun 15, 2018 at 9:50
@LefiTarik great comment i have upgraded to react-apollo 2.1 and with <Query> works like a charm if you write it as an answer i would definitely accept :) — Ziker
– Ziker, Commented Jun 20, 2018 at 13:50

A. Moynet · Accepted Answer · 2018-06-20 16:11:01Z

5

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)

Hope this is working :)

answered Jun 20, 2018 at 16:11

A. Moynet

4903 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mabulu Over a year ago

Your suggestion works! In fact, the entire query can be dynamic. I do not know what downstream impact there might be (related to offline or subscriptions).

Lafi · Accepted Answer · 2018-06-20 13:57:10Z

2

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.

answered Jun 20, 2018 at 13:57

Lafi

1,3521 gold badge16 silver badges19 bronze badges

1 Comment

mabulu Over a year ago

actually graphql does support dynamic queries (the query is simply sent as a json payload in the post). I am going to try what @a-moynet suggested working

Athe · Accepted Answer · 2024-05-23 11:17:07Z

0

If you have a list of fields, you could try mapping them to your schema with the package I created. See graphql-pick

answered May 23, 2024 at 11:17

Athe

951 silver badge8 bronze badges

Collectives™ on Stack Overflow

React Apollo dynamically create query from state

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related