Apollo-client: MockedProvider - mutation errors are not passed to the component

Created on 4 Jan 2019  路  8Comments  路  Source: apollographql/apollo-client

Hi,
I have been facing a problem mocking data with MockedProvider.
With queries all works as expected, when I mock success and errors, the problem comes with mutations, success are ok but when I try to mock an error it is not passed to my component in the render function, instead an Error is thrown.

Test:

 const mocks = [
        {
            request: {
                query: MY_MUTATION,
                variables: {
                    userId: 'error'
                },
            },
            error: new Error('boom!')
        }
];

it('my test that should pass', () => {

        const wrapper = mount(
            <MockedProvider mocks={mocks}>
                <MyComponent ... />
            </MockedProvider>
        );
...

Component:

 <Mutation mutation={MY_MUTATION} >
                {(cancelMandate, {loading, error}) => (
...

When I run the test it just throw the exception but in a live environment it is passed to the component!

Most helpful comment

We managed to get around it using errorPolicy if anyone else gets stuck:

<MockedProvider mocks={[mocks]} addTypename={false} defaultOptions={{
    mutate: {
        errorPolicy: "all"
    }
}}>
    <Component />
</MockedProvider>

All 8 comments

What versions are you using?

Having the same problem, with "apollo-boost": "0.1.7", passing something like

const mocks = [{
      request: {
        query: ADD_OFFER_MUTATION,
        variables: offerMock
      },
      result: {
        errors: [{ message: "Error!" }],
      },
    }];

to the MockedProvider, my console returns throw err; ^ Error: GraphQL error: Error!.

If I pass the same for a Query, it works just fine btw..

Same with version 2.5.1

I see the same, but in queries as well. Both of these:

{
  request: {
    query: MY_QUERY,
    variables: myVars
  },
  result: {
     errors: [new GraphQLError("Error!")],
  }
};

and

{
    request: {
      query: MY_QUERY,
      variables: myVars,
    },
    error: new Error('aw shucks'),
  };

Simply throw an error in Jest and fail the test. Using:

"@apollo/react-testing": "3.0.1",
"apollo-boost": "0.4.4",
"react-apollo": "3.0.1",

I'm experiencing the same, what's the workaround if a fix is missing?

We managed to get around it using errorPolicy if anyone else gets stuck:

<MockedProvider mocks={[mocks]} addTypename={false} defaultOptions={{
    mutate: {
        errorPolicy: "all"
    }
}}>
    <Component />
</MockedProvider>

catch on the mutation's promise helped add a work around for me. Might be related to https://github.com/apollographql/apollo-client/issues/3876?

We ran into the same issue and the error is no longer thrown if we handle the error using an onError handler:

const [mutate, {loading, error}] = useMutation(
  MY_GQL_MUTATION,
  {
    variables: ...
  },
  onError: ...
);
Was this page helpful?
0 / 5 - 0 ratings