Apollo-client: Possible Unhandled Promise Rejection (id: 0). How to handle these warnings? Where do they come from?

Created on 3 Sep 2018 · 6Comments · Source: apollographql/apollo-client

Intended outcome:

I can't tell where and why warning is thrown in the code.

Actual outcome:

Stacktrace is absolutely cryptic. No chances to understand why and where warning is thrown.

What is _The provided key element_?
What schema is does this warning says about? Mutation has two of them: UpdateMutation and GetQuery? Which one?

    this.props.client.mutate({
      mutation: UpdateMutation,
      refetchQueries: [{ query: GetQuery }],

screen shot 2018-09-03 at 12 07 28 pm

Can you tell me where this warning happened?

Does your Apollo have means to show where this warning is thrown?

This happens after mutation.

Versions

  System:
    OS: macOS High Sierra 10.13.4
  Binaries:
    Node: 8.11.3 - /usr/local/bin/node
    npm: 5.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Safari: 11.1
  npmPackages:
    apollo-boost: ^0.1.4 => 0.1.10 
    apollo-cache-inmemory: ^1.1.0 => 1.2.5 
    apollo-client: ^2.0.3 => 2.3.5 
    apollo-link: ^1.0.3 => 1.2.2 
    apollo-link-http: ^1.2.0 => 1.5.4 
    react-apollo: ^2.1.1 => 2.1.9

Source

wzup

👍7

Most helpful comment

this is a violation of the principle of least surprise

I have to agree. With react-apollo ^2.3.2 I'm able to avoid this by giving a dummy function to Mutation's onError prop, e.g.

        <Mutation
          mutation={MUMUMUMYMUTATION}
          variables={{...}}
          onError={err => null} // handled below
        >

nedgar on 5 Feb 2019

👍3

All 6 comments

I'm seeing something similar. Any updates?

joelgetaction on 13 Dec 2018

OK, a tentative work around is the following:

handleFormSubmit = ({variables, mutation}) => {
  // The catch below prevents the unhandled promise rejection ...
  mutation({variables}).catch(error => console.log("An error", error));
}

...

<Mutation ...>
  {mutation => <SomeForm onSubmit={variables => handleFormSubmit({variables, mutation})}/>}
</Mutation>

I wanted to share this to help others.

However, this is a violation of the principle of least surprise - if I'm already handling the error in the Mutation child function or its onError property callback, I shouldn't also need to handle it when invoking the mutation. This is very confusing and should be fixed by the Apollo team - it looks like you're still double-rejecting the promise?

joelgetaction on 13 Dec 2018

🎉1

this is a violation of the principle of least surprise

I have to agree. With react-apollo ^2.3.2 I'm able to avoid this by giving a dummy function to Mutation's onError prop, e.g.

        <Mutation
          mutation={MUMUMUMYMUTATION}
          variables={{...}}
          onError={err => null} // handled below
        >

nedgar on 5 Feb 2019

👍3

This issue is still there with 2.6.8 !

Code is working fine, but tests crash with cryptic message.

Adding a .catch() call after the mutation call is working fine, but feels like a gross hack.

Any chance to get this handled in the module ? As @joelgetaction stated, we shouldn't get a rejected promise there, as it is already handled and the error is available from the useMutation error field to deal with !

Here is the output when testing the module with Jest and react-testing-library:

/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom.development.js:302
      var evt = document.createEvent('Event'); // Keeps track of whether the user-provided callback threw an error. We
                         ^

TypeError: Cannot read property 'createEvent' of null
    at Object.invokeGuardedCallbackDev (/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom.development.js:302:26)
    at invokeGuardedCallback (/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom.development.js:440:31)
    at flushPassiveEffectsImpl (/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom.development.js:25350:7)
    at unstable_runWithPriority (/Users/somatt/www/hm/_hm/app/client/node_modules/scheduler/cjs/scheduler.development.js:818:12)
    at runWithPriority$2 (/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom.development.js:12130:10)
    at flushPassiveEffects (/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom.development.js:25319:12)
    at Object.<anonymous>.flushWork (/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1039:10)
    at Immediate.<anonymous> (/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1050:11)
    at processImmediate (internal/timers.js:439:21)
(node:28822) UnhandledPromiseRejectionWarning: TypeError: Caught error after test environment was torn down

Cannot read property 'createEvent' of null
(node:28822) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:28822) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

This error breaks all the test suite, which crashes on that output.

mlarcher on 20 Dec 2019

👍2

This issue is still there with 2.6.8 !

Code is working fine, but tests crash with cryptic message.

Adding a .catch() call after the mutation call is working fine, but feels like a gross hack.

Here is the output when testing the module with Jest and react-testing-library:

/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom.development.js:302
      var evt = document.createEvent('Event'); // Keeps track of whether the user-provided callback threw an error. We
                         ^

TypeError: Cannot read property 'createEvent' of null
    at Object.invokeGuardedCallbackDev (/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom.development.js:302:26)
    at invokeGuardedCallback (/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom.development.js:440:31)
    at flushPassiveEffectsImpl (/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom.development.js:25350:7)
    at unstable_runWithPriority (/Users/somatt/www/hm/_hm/app/client/node_modules/scheduler/cjs/scheduler.development.js:818:12)
    at runWithPriority$2 (/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom.development.js:12130:10)
    at flushPassiveEffects (/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom.development.js:25319:12)
    at Object.<anonymous>.flushWork (/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1039:10)
    at Immediate.<anonymous> (/Users/somatt/www/hm/_hm/app/client/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1050:11)
    at processImmediate (internal/timers.js:439:21)
(node:28822) UnhandledPromiseRejectionWarning: TypeError: Caught error after test environment was torn down

Cannot read property 'createEvent' of null
(node:28822) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:28822) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

This error breaks all the test suite, which crashes on that output.

Yes, I am using "@apollo/client": "^3.0.0-beta.20".

Screenshot 2020-01-11 at 4 10 58 PM