React-apollo: useQuery's `error` object disappears on rerender

[hartbeatnt]

Intended outcome:

Error object for failed query should persist across rerenders

Actual outcome:

The error object disappears after rerendering

How to reproduce the issue:

• have the @apollo/react-hooks branch installed
• have a proxy set up to force a request to fail. Charles is a good option: https://www.charlesproxy.com/
• The ParentComponent has a 5 second timer. Force the request for your query to fail before that timer expires. It will show the there is an error message. But once the timer expires and the Parent rerenders the child component, the error object will disappear and it will display "there is no error" without refiring the query

const ReproComponent = () => {
  const { error } = useQuery(/* insert your gql query here */)
  if (error) {
    return <div> there is an error </div>
  }
  return <div> there is no error </div>
}

class ParentComponent {
  constructor() {
    super()
    this.state = { count: 0 };
    this.increment = this.increment.bind(this)
    setTimeout(this.increment, 5000)
  }

  increment() {
    this.setState(prevState => ({ count: prevState.count + 1 })
  }

  render() {
    return <ReproComponent count={ this.state.count } />
  }
}

Version

System:
OS: macOS 10.14.5
Binaries:
Node: 8.12.0 - /usr/local/bin/node
npm: 6.5.0 - ~/.npm-packages/bin/npm
Browsers:
Chrome: 75.0.3770.142
Safari: 12.1.1
npmPackages:
apollo-cache-inmemory: ^1.1.7 => 1.6.2
apollo-cache-persist: ^0.1.1 => 0.1.1
apollo-client: ^2.2.3 => 2.6.3
apollo-link: ^1.1.0 => 1.2.12
apollo-link-context: ^1.0.8 => 1.0.18
apollo-link-error: ^1.1.0 => 1.1.11
apollo-link-http: ^1.5.2 => 1.5.15
apollo-link-rest: ^0.2.4 => 0.2.4
apollo-link-retry: ^2.2.4 => 2.2.14
apollo-link-state: ^0.4.0 => 0.4.2
apollo-upload-client: ^8.1.0 => 8.1.0
react-apollo: ^2.1.4 => 2.5.8

=> also @apollo/react-hooks, but that doesn't log from the npx command

[jasonpaulos]

Hi @hartbeatnt, what version of @apollo/react-hooks are you using? I believe this should not be an issue anymore in 0.1.0-beta.11, but if it is please let us know!

[hartbeatnt]

Hi @hartbeatnt, what version of @apollo/react-hooks are you using? I believe this should not be an issue anymore in 0.1.0-beta.11, but if it is please let us know!

I am using 0.1.0-beta.11

[hwillson]

@hartbeatnt Can you try with @apollo/[email protected] to see if that helps? If not, would you mind putting together a small runnable reproduction?

[Geit]

Hi @hwillson - We're seeing this (or, at least, a similar issue) intermittently manifest in tests using MockedProvider.

I've put together a reproduction here: https://github.com/Geit/apollo-error-rerender-repro

[hwillson]

Thanks for the repro @Geit - I'll take a look!

[moritzmhmk]

I do currently work around this bug by using if (error || Object.entries(data).length === 0), any progress on fixing this?

[hwillson]

This issue was fixed by https://github.com/apollographql/react-apollo/pull/3339, which will be included in the next release. Thanks all!

[dylanwulf]

@hwillson I am still experiencing this problem with v3.0.1 when using the Query component, here is a reproduction: https://codesandbox.io/s/wdu8j
The error object always disappears on the next render, and occasionally onError will get called twice.

[kartikjain26]

@dylanwulf @hwillson I am experiencing this error on using useQuery. error property is undefined after initial render.

Can you re open this issue ?

"@apollo/react-hooks": "3.1.3",
"react-apollo": "2.5.8",

[dylanwulf]

@kartikjain26 please open a new issue with a runnable reproduction showing
the problem

On Thu, Jan 30, 2020, 4:54 AM Kartik Jain [e-mail] wrote:

@dylanwulf https://github.com/dylanwulf I am experiencing this error on
using useQuery. error property is undefined after intial render.

Can you re open this issue ?

"@apollo/react-hooks": "3.1.3",
"react-apollo": "2.5.8",

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/apollographql/react-apollo/issues/3295?email_source=notifications&email_token=ACTYZS525ELLNSJLNBB4JTTRAKPW5A5CNFSM4IILMDQ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKKMJIY#issuecomment-580175011,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACTYZS4FC2TBRIL7XVYZURDRAKPW5ANCNFSM4IILMDQQ
.

[dylanwulf]

@kartikjain26 Just noticed the package versions you posted. You should not be using @apollo/react-hooks and react-apollo at the same time. You are probably seeing this issue because you are using an old version of react-apollo.

[kartikjain26]

@dylanwulf This is occurring once in 30-40 times I try. Will post a recording or Screenshot if I manage to capture it.
Also, why should not we use @apollo/react-hooks and react-apollo at the same time ?

[dylanwulf]

Because react-apollo is a wrapper package that contains
@apollo/react-hooks (as well as @apollo/react-components and
@apollo/react-hoc). So you have two different versions of
@apollo/react-hooks installed. One of them contains the fix for this bug
and the other does not.

On Fri, Jan 31, 2020, 1:44 AM Kartik Jain [e-mail] wrote:

@dylanwulf https://github.com/dylanwulf This is occurring once in 30-40
times I try. Will post a recording or Screenshot if I manage to capture it.
Also, why should not we use @apollo/react-hooks and react-apollo at the
same time ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/apollographql/react-apollo/issues/3295?email_source=notifications&email_token=ACTYZS4YRIOBK46WL2GJ2UTRAPCDRA5CNFSM4IILMDQ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKNVNZI#issuecomment-580605669,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACTYZS3ZFTYJ4ICIZTKRIX3RAPCDRANCNFSM4IILMDQQ
.