React-apollo: Invariant Violation: Operation is expecting a variable

[mxmtsk]

When I execute a mutation with Apollo I get the following error, everything else works.

Invariant Violation: The operation 'login' wrapping 'Login' is expecting a variable: 'email' but it was not found in the props passed to 'Apollo(Login)'

I have no idea what the issue is trying to tell me.

My component looks like this:

    class Login extends React.Component {
      static propTypes = {
        login: React.PropTypes.func.isRequired,
      }

      loginUser = (email, password) => {
        this.props.login({
          variables: {
            email,
            password,
          },
        }).then(({ data }) => {
          // does get resolved, I have all the data from the response
          console.log(data);
        }).catch((error) => {
          console.log(error);
        });
      }

      render() {
        return (
          <Button onClick={() => { this.loginUser('[email protected]', 'test'); }}>Try apollo</Button>
        );
      }
    }

    const login = gql`
      mutation login($email: String!, $password: String!) {
        login(email: $email, password: $password) {
          id
          email
          token
        }
      }
    `;

    export default inject('store')(withStyles(s)(graphql(login, { name: 'login' })(observer(Login))));

Version

• [email protected]

[helfer]

@mxmtsk Are you still seeing this issue? I think the error is trying to tell you that email is either not passed, or it's undefined.

[jbaxleyiii]

Closing this as its over two weeks old without a response. Feel free to open if its still an issue

[hypervillain]

i have the exact same issue. It's only happening when I pass a name to the config object. The error message is also pretty different from the one you get when some expected variable is not passed or undefined. I'm using Antd Form HOC to wrap the Apollo container. But I'm not sure if it is related though..

Any idea on that? [email protected]

[Vitiell0]

@THook I am also started getting this error when passing a name config. The mutation was working before it was assigned a name.

[vladinator1000]

This issue needs to be resolved in react-apollo.
You need to pass an object with variables to the mutation because you've used the 'name' option.

If you do this:

graphql(login, { name: 'login' }

You need to pass variables like this:

this.props.login({ variables: yourStuffHere })

I think this is counter intuitive and inhibits the adoption of the react-apollo. Might be easier to have a default behavior that doesn't expect you to wrap variables in an object.

Reference here

cc: @jbaxleyiii is there anything I can do to help with this?

[mateja176]

This issue needs to be resolved in react-apollo.
You need to pass an object with variables to the mutation because you've used the 'name' option.

If you do this:

graphql(login, { name: 'login' }

You need to pass variables like this:

this.props.login({ variables: yourStuffHere })

I think this is counter intuitive and inhibits the adoption of the react-apollo. Might be easier to have a default behavior that doesn't expect you to wrap variables in an object.

Reference here

cc: @jbaxleyiii is there anything I can do to help with this?

I was thinking the same, but unfortunately even before the query / mutation is being used in the component itself the error is thrown, and even if the variable is passed when using the query / mutation inside the component the error is still thrown

[migueljomartinezs]

This issue needs to be resolved in react-apollo.
You need to pass an object with variables to the mutation because you've used the 'name' option.
If you do this:

graphql(login, { name: 'login' }

You need to pass variables like this:

this.props.login({ variables: yourStuffHere })

I think this is counter intuitive and inhibits the adoption of the react-apollo. Might be easier to have a default behavior that doesn't expect you to wrap variables in an object.
Reference here
cc: @jbaxleyiii is there anything I can do to help with this?

I was thinking the same, but unfortunately even before the query / mutation is being used in the component itself the error is thrown, and even if the variable is passed when using the query / mutation inside the component the error is still thrown

I have the same issue, @mytee306 did you find a way around it?