Apollo-client: Any chances to have normal error/warning stack trace in this repo? How can I find why warning is thrown?

Created on 27 Aug 2018 · 2Comments · 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.

Possible Unhandled Promise Rejection (id: 0):
Error: GraphQL error: Validation error of type FieldUndefined: Field 'first_name' in type 'User' is undefined @ 'Me/first_name'
GraphQL error: Validation error of type FieldUndefined: Field 'last_name' in type 'User' is undefined @ 'Me/last_name'
GraphQL error: Validation error of type FieldUndefined: Field 'gender' in type 'User' is undefined @ 'Me/gender'
at new ApolloError (blob:http://localhost:8081/98015e11-e361-4e50-9995-783621b7174b:325069:36)
  at blob:http://localhost:8081/98015e11-e361-4e50-9995-783621b7174b:326167:49
  at blob:http://localhost:8081/98015e11-e361-4e50-9995-783621b7174b:326640:25
  at Array.forEach (<anonymous>)
  at blob:http://localhost:8081/98015e11-e361-4e50-9995-783621b7174b:326639:24
  at Map.forEach (<anonymous>)
    at QueryManager.broadcastQueries (blob:http://localhost:8081/98015e11-e361-4e50-9995-783621b7174b:326635:30)
    at Object.next (blob:http://localhost:8081/98015e11-e361-4e50-9995-783621b7174b:326684:39)
    at notifySubscription (blob:http://localhost:8081/98015e11-e361-4e50-9995-783621b7174b:91498:20)
    at onNotify (blob:http://localhost:8081/98015e11-e361-4e50-9995-783621b7174b:91542:5)
    console.warn @ YellowBox.js:82
    onUnhandled @ Promise.js:44
    onUnhandled @ rejection-tracking.js:71
    (anonymous) @ JSTimers.js:258
    _callTimer @ JSTimers.js:154
    callTimers @ JSTimers.js:407
    __callFunction @ MessageQueue.js:353
    (anonymous) @ MessageQueue.js:118
    __guardSafe @ MessageQueue.js:316
    callFunctionReturnFlushedQueue @ MessageQueue.js:117
    (anonymous) @ debuggerWorker.js:72

How to reproduce the issue:

This is my request. From this issue https://github.com/apollographql/apollo-client/issues/3857
And after data is saved in DB, I get that warning.

this.props.client.mutate({
  mutation: Mutation,
  query: Mutation,
  refetchQueries: [{ query: Query }],
  errorPolicy: 'all',

  // DOESN"T WORK, NEVER GETS CALLED
  onCompleted: (res) => {
    console.log(res);
  },

  // DOESN"T WORK, NEVER GETS CALLED
  onError: (err) => {
    console.log(err);
  },
  optimisticResponse: (res) => {
    return {
      Foo: {
        ...res
      }
    }
  },
  update: (store, data) => {
    console.log(store, data);
  },
  variables: {
    ...variables
  }
})
    .then(res => {
      console.log(res);
    })
    .catch(err => {
      console.error(err);
    });

And this is my very simple mutation

export default gql`
  mutation UpdateUserMutation (
    $id: String,
    $type: String,
    $first_name: String!,
    $last_name: String!,
    $gender: String!,
    ) {
    UpdateUser(
      id: $id
      type: $type
      personal: {
        first_name: $first_name
        last_name: $last_name
        gender: $gender
      }
    )
  }
`;

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

Most helpful comment

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

👍4

All 2 comments

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.

joelgetaction on 13 Dec 2018

👍4

If this is still a problem with a current version of apollo-client, please post a small runnable reproduction and we'll take a look. Thanks!