my loading is forever "True" #9668

sLurPPPeRsTaR · 2022-05-04T11:47:24Z

am i the only one here facing this issue ?
here my "dependencies": {
"@apollo/client": "^3.6.2",
"graphql": "^16.4.0",
"react": "17.0.2",
"react-native": "0.68.1"
},

const client = new ApolloClient({
uri: 'https://api.mocki.io/v2/c4d7a195/graphql',
cache: new InMemoryCache(),
});

const GET_ME = gqlquery { users { id email name } };

const {data, loading, error} = useQuery(GET_ME);
console.log({error, loading, data});
if (loading) return Loading...;
if (error) return Error! ${error.message};

RESULT : {error: undefined, loading: true, data: undefined}

please advise. thanks

The text was updated successfully, but these errors were encountered:

mversteeg · 2022-05-04T16:51:43Z

I'm having the same problem, +1
A lot of other poster on similar issues are saying they fixed it by setting notifyOnNetworkStatusChange to true, but I've not had consistent results with this change (it occasionally fixes the problem, but not reliably).

sLurPPPeRsTaR · 2022-05-04T19:20:54Z

thanks for reply. at least im not the only one facing that issue.

volkandogan · 2022-05-05T00:02:24Z

I have same problem

martsaarmets · 2022-05-05T09:30:34Z

Same here. Check #9649

ndbeyer · 2022-05-05T14:25:31Z

Same here. For me either apollos useQuery does not work (e.g. 3.5.10 and above) or apollos client.query does not work (e.g. 3.4)

v-yer · 2022-05-05T15:00:08Z

downgrading to 3.5.10 solved my issue:

  "dependencies": {
    "@apollo/client": "3.5.10",
    "graphql": "^16.4.0",
    "react": "17.0.2",
    "react-native": "0.68.1",
  },

This may be useful for further bug investigation: during debugging (v3.6.2) I noticed that commenting and uncommenting any useQuery() options (two or three times) when app runs on iOS simulator solved the issue but just till you kill it 😅 e.i.

const { loading, error, data } = useQuery(GET_SLIDES, {
    // notifyOnNetworkStatusChange: true,
  });

Sir-Dazzling · 2022-05-05T15:29:35Z

Had the same problem....initially thought I was doing something wrong, works whenever i uncomment/comment return partial data: true

Sir-Dazzling · 2022-05-05T15:39:25Z

@sLurPPPeRsTaR i downgraded my @apollo/client package to 3.5.10 and it works perfectly

benjamn · 2022-05-05T23:18:47Z

Can folks try updating with npm i @apollo/client@next (to get version 3.6.3, just published to npm but not yet latest)?

sLurPPPeRsTaR · 2022-05-06T03:43:12Z

@sLurPPPeRsTaR i downgraded my @apollo/client package to 3.5.10 and it works perfectly

Will try, thanks for your advise

sLurPPPeRsTaR · 2022-05-06T03:43:38Z

Can folks try updating with npm i @apollo/client@next (to get version 3.6.3, just published to npm but not yet latest)?

will try. Thanks for your advise.

mikrobestie · 2022-05-06T09:44:15Z

Hello, we have the same problem and updating to 3.6.3 did not solve the problem. The loading is still stuck and jest tests do not return any data

grdevd · 2022-05-06T13:37:47Z

Hello, we have the same problem and updating to 3.6.3 did not solve the problem. The loading is still stuck and jest tests do not return any data

We are getting the same behavior with 3.6.3 and the versions before until 3.5.10 which works as expected. We're using NextJs & Apollo Client and every second or third request to the GraphQl endpoint is stuck at "loading" and never resolves.

estiventhneira · 2022-05-06T18:42:24Z

+1

sLurPPPeRsTaR · 2022-05-07T01:56:13Z

Can folks try updating with npm i @apollo/client@next (to get version 3.6.3, just published to npm but not yet latest)?

Hi Benjam , the result is same as usual. it still pending and same with prev version. sorry :( , but we love to hear if there is any update for this issue. thanks for your concern.

andreialecu · 2022-05-07T09:38:39Z

Can folks try updating with npm i @apollo/client@next (to get version 3.6.3, just published to npm but not yet latest)?

I can also confirm this issue in a React Native (bare workflow, non-expo) app.

Version 3.5.10 works fine. Anything from 3.6.x, including 3.6.3 does not return any data (everything is stuck in loading).

➜ npx envinfo@latest --preset apollo --clipboard                  

  System:
    OS: macOS 12.3.1
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 3.1.1 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 7.20.1 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 101.0.4951.54
    Safari: 15.4
  npmPackages:
    @apollo/client: 3.5.10 => 3.5.10 
    apollo-link-timeout: ^4.0.0 => 4.0.0 
    apollo-upload-client: ^16.0.0 => 16.0.0

hirbod · 2022-05-07T13:10:50Z

It is most likely related to uSES since the same issue happened with react query

TanStack/query#3582

JClackett · 2022-05-07T18:08:49Z

Same thing happening on 3.7.0 alpha

volkandogan · 2022-05-07T18:14:58Z

when I downgrade apollo client to 3.5.0.it solved.
you can use
yarn add @apollo/client@3.5.0

sLurPPPeRsTaR · 2022-05-08T02:05:53Z

Yeapppp 3.5.0 is fine..

TkDodo · 2022-05-08T14:14:25Z

Hi, react-query maintainer here 👋

It seems that we have similar problems with the following setup:

react-native 0.68 or lower
react 17
a version of our library that uses the useSyncExternalStore shim via:
import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js'
which is also what apollo-client is doing:

apollo-client/src/react/hooks/useQuery.ts

Line 10 in 95c8a1a

import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';

and as far as I can see, the last "working version" was the one before you switched to uSES.

I can confirm that the shim works fine with react17 and react18 for the web. We've also narrowed down that in the above setup, the subscribe function from useSyncExternalStore is just never called, which is why no fetches are made (at least in react-query). Now the question is:

is there a react-native version where this setup works? For example, has someone tried out 0.67 or lower versions? Just to narrow down if the issue has something to do with react-native versions.
does it work with react-native 0.69-RC ? This seems to be the first version with react18, so the shim would not be used, but the native useSyncExternalStore from react would be taken, which should not have any issues.
can we come up with a minimal reproduction of useSyncExternalStore (without apollo or react-query) that fails, which would point to an issue in the shim itself, so that we can reach out to the react team.

benjamn · 2022-05-09T15:03:34Z

Thanks for those details @TkDodo! 🙏

Looking at this code, it seems the only way subscribe could fail to be called is if the useEffect callback inside useSyncExternalStore never fires. Does anyone know of any weirdness around useEffect in React Native, or possibly useLayoutEffect, which is also used by useSyncExternalStore?

TkDodo · 2022-05-09T15:11:46Z

@benjamn we have since found out that importing from 'use-sync-external-store/shim/index.js' seems to be the issue, and importing from 'use-sync-external-store/shim', without index.js makes it work again.

We've had the index-less version, but then switched to adding index.js after an issue was reported:

ESM compliant bundling TanStack/query#3521 (comment)

There is some discussion going on in our issue over here:

React Native: Queries not executing on v4 TanStack/query#3582

I am by no means an expert in these bundler related issue, but I think there is some progress being made in figuring it out 😅

This seems to make some bundlers in some configurations happier, e.g. https://github.com/apollographql/react-apollo-error-template/

benjamn · 2022-05-09T17:12:20Z

In case a little background is useful, I originally switched from use-sync-external-store/shim to use-sync-external-store/shim/index.js in commit 8788e6c as part of PR #9596, because I was seeing the following build errors in our reproduction repository, after upating to v3.6 and React 18:

Failed to compile.

Module not found: Error: Can't resolve 'use-sync-external-store/shim' in '/Users/ben/dev/react-apollo-error-template/node_modules/@apollo/client/react/hooks'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'use-sync-external-store/shim' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/@apollo/client/react/hooks/useQuery.js 4:0-68
Module not found: Error: Can't resolve 'use-sync-external-store/shim' in '/Users/ben/dev/react-apollo-error-template/node_modules/@apollo/client/react/hooks'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'use-sync-external-store/shim' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

webpack compiled with 1 error

Using use-sync-external-store/shim/index.js makes this error go away, but breaks React Native.

Hoping the .js file extension might be the only problem, I tried use-sync-external-store/shim/index just now, and unfortunately that gives essentially the same error:

Failed to compile.

Module not found: Error: Can't resolve 'use-sync-external-store/shim/index' in '/Users/ben/dev/react-apollo-error-template/node_modules/@apollo/client/react/hooks'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'use-sync-external-store/shim/index' failed to resolve only because it was resolved as fully specified
[...similar lines...]

webpack compiled with 1 error

Just to make this perfectly clear: we are fully committed to continuing to support React 17 (and React Native) alongside React 18, so we will find a way to make this work, even if it means shipping #9675 in 3.6.x instead of 3.7. That PR should sidestep all issues of bundling with the use-sync-external-store/shim package, because we wouldn't really be using the shim package anymore.

TkDodo · 2022-05-09T19:30:25Z

Yep, this is the exact same error we've also seen and why we switched to the index.js import. Why is this so complex 😅🙈

benjamn · 2022-05-09T22:46:02Z

Alright, I don't want to speak too soon, but I believe PR #9675 will make this problem go away. That is, if you run

npm i @apollo/client@beta

you'll get version 3.7.0-beta.3, which includes #9675, which makes it so we no longer import anything from the use-sync-external-store package, other than importing the useSyncExternalStore type from @types/use-sync-external-store.

Yes, we plan to upstream any improvements we can identify for the use-sync-external-store package, but I wanted to verify that implementing the shim ourself actually solves all the problems I think it does.

Please give that alpha version a try, and (if everything looks good) I expect to ship these changes in 3.6.4 (not 3.7).

estiventhneira · 2022-05-09T23:59:09Z

@benjamn 3.7.0-alpha.3 work for me! thanks :) I will be waiting for the stable version

mjcarnaje · 2022-05-10T06:09:08Z

@benjamn work for me as well, Thank you!

TkDodo · 2022-05-10T08:14:24Z

fyi, there is a PR in the react repo to fix it on the uSES side:

Add "exports" field to use-sync-external-store's package.json facebook/react#24440

sLurPPPeRsTaR · 2022-05-11T04:12:37Z

ok all good now. thanks @benjamn and everyone

JClackett · 2022-05-13T20:51:40Z

When using react 17 I get this error when trying to build a next.js app:

../../node_modules/@apollo/client/react/hooks/useSyncExternalStore.js
Attempted import error: 'useSyncExternalStore' is not exported from 'react' (imported as 'React').

Import trace for requested module:
../../node_modules/@apollo/client/react/hooks/useQuery.js
../../node_modules/@apollo/client/react/hooks/index.js
../../node_modules/@apollo/client/react/index.js
../../node_modules/@apollo/client/index.js
./src/pages/_app.tsx

Is there anything we have to do to still use react 17?

SimenB · 2022-05-13T21:16:19Z

#9709

Off2Race · 2022-05-16T20:22:44Z

Hi, @benjamn – I tried the latest beta (3.7.0-alpha.4) and it works great for me too. Thanks for the quick fix!

I know you said this same issue would be solved in 3.6.4 as well. Do you have a sense when that will be available?

benjamn · 2022-05-16T23:14:10Z

@Off2Race @sLurPPPeRsTaR @SimenB (and others) I just published @apollo/client@3.6.4 to npm (with these changes), and promoted v3.6.4 to latest (not just next this time).

You can find the detailed release notes here (and here for v3.6.3).

Thanks for your patience!

Off2Race · 2022-05-17T05:36:18Z

Hi, @benjamn – I just upgraded to 3.6.4 and everything looks good. Thanks again for the excellent work!

fknop · 2022-08-03T13:30:12Z

I'm seing this issue with 3.6.9 (react 17)

maheraldous · 2022-09-08T21:24:15Z

I have the same issue but a few days ago every thing work but when I got back to work today I got that problem and I tried all the versions you talked about but nothing work and here is my first and my current package.json file
I noticed that the data arrive after very long time because I waited for more then 5 mins and it came but I believe that this problem still belongs to here and I just have new app with one basic query from the docs so this is not my code.


  "dependencies": {
    "@apollo/client": "^3.6.9",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-material/core": "^1.3.7",
    "@react-navigation/bottom-tabs": "^6.3.3",
    "@react-navigation/elements": "^1.3.5",
    "@react-navigation/native": "^6.0.12",
    "@react-navigation/stack": "^6.2.3",
    "color": "^4.2.3",
    "graphql": "^14.7.0",
    "lottie-ios": "^3.4.3",
    "lottie-react-native": "^5.1.4",
    "native-base": "^3.4.13",
    "react": "18.2.0",
    "react-apollo": "^3.1.5",
    "react-native": "0.70.0",
    "react-native-encrypted-storage": "^4.0.2",
    "react-native-gesture-handler": "^2.6.0",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-pager-view": "^6.0.0",
    "react-native-paper": "^4.12.4",
    "react-native-reanimated": "^2.10.0",
    "react-native-safe-area-context": "^4.3.3",
    "react-native-screens": "^3.17.0",
    "react-native-svg": "^13.1.0",
    "react-native-unimodules": "^0.14.10",
    "react-native-vector-icons": "^9.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.19.0",
    "@babel/runtime": "^7.19.0",
    "@react-native-community/eslint-config": "^3.1.0",
    "babel-jest": "^29.0.2",
    "eslint": "^8.23.0",
    "jest": "^29.0.2",
    "metro-react-native-babel-preset": "^0.72.2",
    "react-test-renderer": "18.2.0"
  },

This was referenced May 6, 2022

Doesn't work with Apple M1 #9667

Closed

useQuery/useLazyQuery stuck on "loading" state in expo/react-native devices #9689

Closed

benjamn referenced this issue May 9, 2022

Fully resolve use-sync-external-store/shim module identifier.

8788e6c

This seems to make some bundlers in some configurations happier, e.g. https://github.com/apollographql/react-apollo-error-template/

benjamn mentioned this issue May 9, 2022

Vite + react + useQuery = use-sync-external-store/shim problem #9670

Closed

benjamn mentioned this issue May 9, 2022

Internalize useSyncExternalStore shim, for more control than use-sync-external-store provides #9675

Merged

sibelly mentioned this issue May 10, 2022

Update peer dependency for @apollo/client jaydenseric/apollo-upload-client#291

Closed

sLurPPPeRsTaR closed this as completed May 11, 2022

benjamn added this to the v3.6.x patch releases milestone May 16, 2022

benjamn self-assigned this May 16, 2022

benjamn added the ⚛️ React-related label May 16, 2022

michaelcbrook mentioned this issue Sep 14, 2022

"Loading" stays true when the same result is returned twice in Apollo Client 3.6.9 #10105

Closed

github-actions bot locked as resolved and limited conversation to collaborators Feb 1, 2023

my loading is forever "True" #9668

my loading is forever "True" #9668

Comments

sLurPPPeRsTaR commented May 4, 2022

mversteeg commented May 4, 2022

sLurPPPeRsTaR commented May 4, 2022

volkandogan commented May 5, 2022

martsaarmets commented May 5, 2022

ndbeyer commented May 5, 2022

v-yer commented May 5, 2022

Sir-Dazzling commented May 5, 2022

Sir-Dazzling commented May 5, 2022

benjamn commented May 5, 2022

sLurPPPeRsTaR commented May 6, 2022

sLurPPPeRsTaR commented May 6, 2022

mikrobestie commented May 6, 2022

grdevd commented May 6, 2022

estiventhneira commented May 6, 2022

sLurPPPeRsTaR commented May 7, 2022

andreialecu commented May 7, 2022

hirbod commented May 7, 2022 • edited Loading

JClackett commented May 7, 2022

volkandogan commented May 7, 2022

sLurPPPeRsTaR commented May 8, 2022

TkDodo commented May 8, 2022

benjamn commented May 9, 2022

TkDodo commented May 9, 2022

benjamn commented May 9, 2022 • edited Loading

TkDodo commented May 9, 2022

benjamn commented May 9, 2022 • edited Loading

estiventhneira commented May 9, 2022

mjcarnaje commented May 10, 2022

TkDodo commented May 10, 2022

sLurPPPeRsTaR commented May 11, 2022

JClackett commented May 13, 2022 • edited Loading

SimenB commented May 13, 2022

Off2Race commented May 16, 2022

benjamn commented May 16, 2022

Off2Race commented May 17, 2022

fknop commented Aug 3, 2022

maheraldous commented Sep 8, 2022 • edited Loading

hirbod commented May 7, 2022 •

edited

Loading

benjamn commented May 9, 2022 •

edited

Loading

benjamn commented May 9, 2022 •

edited

Loading

JClackett commented May 13, 2022 •

edited

Loading

maheraldous commented Sep 8, 2022 •

edited

Loading