Passing variables to graphql query with react-apollo

Question

I have a problem passing in the variable options into the graphql query. If console.log(ownProps.match.params.id) I get the correct id.

However im getting this error:

Error: The operation 'selectCustomer' wrapping 'Apollo(Apollo(withRouter(Consumer)))' is expecting a variable: 'id' but it was not found in the props passed to 'Apollo(Apollo(Apollo(withRouter(Consumer))))'

Export

const ConsumerWithMutations =  graphql(selectCustomer, {
  name : 'selectCustomer',
  options: (ownProps) => ({
    variables: {
      id: ownProps.match.params.id
    }
  })
})(graphql(deleteCustomer, {
  name: 'deleteCustomer'
})(withRouter(Consumer)))

export default graphql(selectCustomer)(ConsumerWithMutations);

Query

const selectCustomer = gql`
query selectCustomer($id: String!)
{
  consumer(id: $id) {
    id
    firstname
    lastname
    dateOfBirth
    ...

Daniel Rearden · Accepted Answer · 2017-08-18 17:35:10Z

2

You're attempting to wrap your component with the same query HOC twice -- the first time within your definition of ConsumerWithMutations and then again inside your export statement.

You don't pass any options into the HOC inside your export statement, so your selectCustomer query can't find the id variable you specified, which is why you see the error you're getting.

Modify your export statement to this:

export default ConsumerWithMutations;

and it should work.

I would also highly recommend utilizing compose when you're using multiple HOCs like this -- it helps keep code readable. Check out the example here.

answered Aug 18, 2017 at 17:35

Daniel Rearden

85.3k14 gold badges205 silver badges193 bronze badges

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

3 Comments

Daniel Lourie Over a year ago

Thanks so much man! Will def check compose out - was a pretty obvious thing :(

stackdave Over a year ago

I had this error whithout passing the right way the id parameter, using: options: props => ({ id: props.match.params.parentid }), I fixed with options: props => ({ variables: { id: props.match.params.parentid} }),

Rashid Over a year ago

Example link is not working.

Collectives™ on Stack Overflow

Passing variables to graphql query with react-apollo

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related