Search code examples
javascriptreactjsgraphqlreact-apollographql-tag

The operation 'FooQuery' wrapping 'Foo' is expecting a variable, but it was not found with react-apollo

I'm having a problem with react-apollo. Even not calling the query in Foo class:

The operation 'FooQuery' wrapping 'Foo' is expecting a variable: 'id' but it was not found in the props passed to 'Apollo(Foo)'

class Foo extends React.Component {
    render() {
        return <div />
    }
}

const FOO_QUERY = gql`
    query FooQuery($id: ID!) {
        foo(id: $id) {
            bar
        }
    }
`

export default graphql(FOO_QUERY, { name: 'fooQuery' })(Foo)
Solution

  • Your component looks correct. The issue is not how you have defined it, but you must make sure that you pass an id prop to your Foo component when using it in you app:

    <Foo id="some_id" />