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 Daniel Rearden · Accepted Answer · 2017-08-18T17:35:10

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.

Passing variables to graphql query with react-apollo

1 Answers