1

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)
Marco Daniel
  • 5,467
  • 5
  • 28
  • 36
Andrey
  • 2,485
  • 3
  • 21
  • 26
  • Shouldn't you pass a variable `id` instead of `name` to the query? – Tholle Jul 10 '18 at 12:07
  • 1
    This is a property that allow to configure the name of the prop. So I can call: `this.props.fooQuery` – Andrey Jul 10 '18 at 12:17
  • You're right, my bad. How are you using this component? Are you passing an `id` prop to it? – Tholle Jul 10 '18 at 12:19
  • I try `Foo.propTypes = { id: PropTypes.string.isRequired }` and `Foo.defaultProps = { id: 'a' }`. Same result – Andrey Jul 10 '18 at 12:23
  • 1
    Yes, but I think the issue is how you are using this exported component in the rest of your app, not how you have defined it. If you are using the component without passing in a `id` prop, I think you will get this error. – Tholle Jul 10 '18 at 12:25
  • 1
    @Tholle Works like a charm, thank you! – Andrey Jul 10 '18 at 12:41
  • @Tholle, How can I make id optional? I'm trying to create a form where user can insert or update – Andrey Jul 10 '18 at 19:05

1 Answers1

1

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" />
Tholle
  • 108,070
  • 19
  • 198
  • 189