search

apollographql / react-apollo

:recycle: React integration for Apollo Client
https://www.apollographql.com/docs/react/
MIT License
6.85k stars 787 forks source link

Query Stuck Loading When the Newly-Resolved Value Is Deeply Equivalent #3425

Open louisscruz opened 5 years ago

louisscruz commented 5 years ago

Intended outcome:

When the variables to a given Query change, the query should be re-run with the new variables, and when the response is received, it should trigger a re-render of the Query component with the new data (and not remain in a loading state).

Actual outcome:

When the variables of a given Query change, and the received response happens to be exactly the same (at least in terms of a deep equality check), the Query component is stuck in a loading state.

How to reproduce the issue:

The issue we're seeing seems to happen specifically when two network response values are deeply equivalent. Additionally, it seems to only be an issue when the query is simultaneously going from skip={false} to skip={true}.

Here is an example: https://codesandbox.io/s/busy-perlman-8buyh

Version

  System:
    OS: macOS 10.14.4
  Binaries:
    Node: 8.9.3 - ~/.nvm/versions/node/v8.9.3/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 6.5.0 - ~/.nvm/versions/node/v8.9.3/bin/npm
  Browsers:
    Chrome: 72.0.3626.121
    Firefox: 67.0.4
    Safari: 12.1
  npmPackages:
    apollo-cache-inmemory: 1.6.3 => 1.6.3
    apollo-client: 2.6.4 => 2.6.4
    apollo-link-context: 1.0.18 => 1.0.18
    apollo-link-http: 1.5.15 => 1.5.15
    apollo-link-retry: 2.2.14 => 2.2.14
    apollo-link-schema: 1.2.3 => 1.2.3
    react-apollo: ^3.0.1 => 3.0.1
louisscruz commented 5 years ago

I did some debugging of the useDeepMemo in @apollo/react-hooks and happened to sidestep the problem by swapping out:

import { equal } from '@wry/equality';

with

function equal(a, b) {
  return a === b;
}

I doubt this is a valid solution, but maybe it gives some insight into what could be going wrong.

ducarroz commented 5 years ago

This issue has reproduction...

ducarroz commented 5 years ago

This issue still occurs with react-apollo 3.1

hwillson commented 5 years ago

Thanks @ducarroz - yes, we haven't had a chance to get to this one yet. We will (🤞) very soon.

Mrtblg commented 5 years ago

Same problem here !

thank you @louisscruz for explaining it so clearly.

Temporarily patching it by sending an incremental value along with every server error response to avoid having deep identical responses

vieira commented 5 years ago

Hello,

Any news about this?

We are also experiencing this problem and had to downgrade to 3.0.1 where the problem does not occur.

EDIT: Seems to be solved in 3.1.2?

louisscruz commented 5 years ago

@vieira Maybe you're experiencing a different issue than this one then? I experience this issue on all 3.x.x versions.

3.0.1: https://codesandbox.io/s/busy-perlman-8buyh 3.1.0: https://codesandbox.io/s/summer-glade-1c0x1 3.1.1: https://codesandbox.io/s/modest-moon-78vhu 3.1.2: https://codesandbox.io/s/charming-frog-t0xib

birge commented 5 years ago

This is a pretty big blocker for us, any updates?

dylanwulf commented 5 years ago

@birge Right now the Apollo team is hard at work preparing for the graphql summit next week. Hopefully they'll get back to issues after it's over.

amok commented 5 years ago

I confirm the issue. 

➜  ✗ yarn list @apollo/react-hooks                                                                                                                                                                  ~/porn/dinotechltd/dino-bo
yarn list v1.19.1
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ @apollo/react-hooks@3.1.3

any updates on this?

amok commented 5 years ago

UPD if I set fetchPolicy to network-only it works

louisscruz commented 4 years ago

Any update on this?

birge commented 4 years ago

new year new status?

havenchyk commented 4 years ago

I really want to have this issue fixed, but @louisscruz @birge https://twitter.com/slicknet/status/782274190451671040

havenchyk commented 4 years ago

@benjamn @hwillson could you please shed some light? are you guys expecting a PR for this? Do you have it in backlog maybe?

dylanwulf commented 4 years ago

If this is still an issue, I would recommend trying to reproduce it in the latest @apollo/client v3 beta. If the issue still exists in the v3 beta, then maybe create a new issue in the apollo-client repo with the reproduction.

cbishop-fv commented 4 years ago

Blocker for me

ducarroz commented 4 years ago

@hwillson any chance to take a close look at this issue? we have codesandbox to reproduce it as well a test for it. Thanks.

louisscruz commented 4 years ago

It looks like we just need some guidance on how to solve https://github.com/apollographql/apollo-client/pull/6059. The last section of the PR description makes three proposals for solving this problem. Can someone take a look?

huchenme commented 4 years ago

@dylanwulf yes I can confirm it is reproducible in @apollo/client v3 beta https://codesandbox.io/s/client-3-hook-0r52i, created an issue in apollo-client repo https://github.com/apollographql/apollo-client/issues/6106

huchenme commented 4 years ago

I think we can close this now, thanks to @benjamn this issue is fixed and released to 3.0.0-beta.43 https://github.com/apollographql/apollo-client/commit/7c9afe085371e624dcb3e6eb0c888965c982746e 🎉