React-apollo: withApollo enhancer doesn't work properly with MockedProvider

[SenhorBardell]

Intended outcome:

When wrapping Component with withApollo mutation executes without error.

Working properly with MockedProvider

const DeleteButton = () => (
  <Mutation mutation={DELETE_DOG_MUTATION}>
    {(mutate, { loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error!</p>;
      if (data) return <p>Deleted!</p>;

      return (
        <button onClick={() => mutate({ variables: { name: 'Buck' } })}>
          Click me to Delete Buck!
        </button>
      );
    }}
  </Mutation>
);

Doesn't work properly with MockedProvider.

class Simple extends Component {
  state = {
    loading: false,
    error: false,
    result: null
  }
  mutate = async variables => {
    await this.setState({loading: true})
    try {
      const { data } = await this.props.client.mutate({
        mutation: DELETE_DOG_MUTATION, variables
      })
      await this.setState({ result: 'triggered', loading: false })
    } catch(error) {
      console.warn(error.message)
      await this.setState({error: true, loading: false})
    }
  }
  render() {
    if (this.state.loading) return <p>Loading...</p>;
    if (this.state.result) return <p>{this.result}</p>
    if (this.state.error) return <p>Error</p>
    return (
      <button onClick={() => this.mutate({ variables: { name: 'Buck' } })}>
        Click me to Delete Buck!
      </button>
    )
  }
}
const DeleteButton = withApollo(Simple)

The rest of example

const DELETE_DOG_MUTATION = gql`
  mutation deleteDog($name: String!) {
    deleteDog(name: $name) {
      id
      name
      breed
    }
  }
`;
const deleteDog = { name: 'Buck', breed: 'Poodle', id: 1 };
const mocks = [
  {
    request: {
      query: DELETE_DOG_MUTATION,
      variables: { name: 'Buck' },
    },
    result: { data: { deleteDog } },
  },
];

class App extends Component {
  render() {
    return (<MockedProvider mocks={mocks}><DeleteButton /></MockedProvider>)
  }
}

Actual outcome:

Produce error No more mocked responses for the query.

How to reproduce the issue:

I've prepared code in sandbox editor. But it is showing error Could not find module in path: 'react-apollo/test-utils' relative to '/index.js' for some reason :(.

My wild guess would be Mocked provider accepts query regardless of Query or Mutation, however Mutation provides mutation argument.

Main motivation of using Component version, it to be able to trigger mutation on ComponentDidMount.

Version

• [email protected]
• [email protected]

[ohmyjersh]

I'm also seeing this issue, did you find a solution?

[SenhorBardell]

I'm also seeing this issue, did you find a solution?

Try use ApolloConsumer. I haven't tested it with Apollo consumer myself, because I've found a workaround to omit ComponentDidMount and use as pure function.

[meatherly]

@SenhorBardell Got your sandbox working: https://codesandbox.io/s/4xwnnoo419
I'm using the graphql HoC and having the same problems as your sandbox is showing. :(

[rosskevin]

I also updated the sandbox and fixed the passing in of mocks, seems to work fine now.

https://codesandbox.io/s/6zqvyy0zjr

[SenhorBardell]

@rosskevin just opened, and I see this when I hit a button

No more mocked responses for the query: mutation deleteDog($name: String!) {
  deleteDog(name: $name) {
    id
    name
    breed
    __typename
  }
}
, variables: {"name":"Buck"}

[SenhorBardell]

@meatherly ran yours as well, result is first deleted, second error...
Am I just hitting button the wrong way or something? :)