Closed
Description
Describe the bug
Hi,
I'm trying out 4.0.0-beta.7 to implement offline support in our application.
Everything is upgraded including all the breaking changes, but my queries are not being executed anymore.
To be sure it's not a problem inside my application, I've created a fresh expo app with just the App.tsx file.
When opening the app, my queries remain in a loading state. If I use the refetch of the useQuery
, and run this in a useEffect
, I'm able to execute the query.
Your minimal, reproducible example
Couldn't get react-query to work in expo snack
Steps to reproduce
- Create a react-native application with the following package.json file
{
"name": "reactqueryv4",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-web": "0.17.1",
"react-query": "4.0.0-beta.7"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@types/react": "~17.0.21",
"@types/react-native": "~0.64.12",
"typescript": "~4.3.5"
},
"private": true
}
- Create a query with a simple async function
import { Text, View } from "react-native";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
export default function App() {
const queryClient = new QueryClient();
return (
<QueryClientProvider client={queryClient}>
<Todos />
</QueryClientProvider>
);
}
function Todos() {
// Queries
const query = useQuery(["todos"], async () => {
console.log("this should log but doesn't");
return Promise.resolve("ok");
});
console.log(query.data);
return (
<View>
<Text>lol</Text>
</View>
);
}
- Open your application and you will see undefined query data, a status loading and no console.log.
Expected behavior
I expect this query to be executed. If I change my package.json to the latest v3 version, my query get's executed as it should.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- iOS, Android
react-query version
4.0.0-beta.7
TypeScript version
No response
Additional context
No response
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Activity
teaguestockwell commentedon May 3, 2022
I am also having the same issue using 4.0.0.beta.7 where querys are stuck in a loading state. It looks like they never calling the query function.
I created a repo that reproduces this issue on react native as well as an equivalent code sandbox for web that does not have this issue

hirbod commentedon May 4, 2022
I can exactly confirm this issue, which I already tried to investigate with @TkDodo . The last working version of RQ was v4 alpha 24. But you guys are reporting iOS as well, but for me only android was breaking while iOS works just fine
sandergo90 commentedon May 4, 2022
Well, at first my iOS version was also still working. After a clean app install this issue was also happening on iOS. And if you create a fresh react-native project, you will see it happening on both iOS and Android.
TkDodo commentedon May 5, 2022
So what we changed was to switch to useSyncExternalStore for our subscriptions. If the query never fires (= there is no request that reaches the backend), that likely means that the subscription wasn't created for some reason. It would be good to inspect the number of observers for each query. If they are zero, that would confirm my theory. Maybe you can do that via the devtools, or via simply inspecting / logging from the queryClient.
Also, can someone try with RN 0.69 RC, which supports react18. With react17, we fall back to the uSES shim, so behavior could be different:
reactwg/react-native-releases#21
hirbod commentedon May 5, 2022
RN 0.69 won't be an option for Expo users for at least 3-6 months. This is usually the period updates will be shipped, and a really big user base does stick with Expo. We really need to figure this out. I will check the observers with flipper and report back.
TkDodo commentedon May 5, 2022
@hirbod you mentioned that things were working fine for you on RN 0.64.3, and the issue first showed up when you updated to RN 0.68.1
OP says things are also faulty with 0.64. can we try to narrow down if there is a version of RN that works with the current beta?
hirbod commentedon May 5, 2022
That is true, for me the issues showed up when I upgraded. OP also said that iOS was working fine after upgrade but stopped working after clean install (which I didn't for iOS but for Android).
Looks like that the beta isn't working at all with the current RN versions. (0.69 not tested, since I am also an Expo user)
hirbod commentedon May 5, 2022
@TkDodo I've upgraded and you're right, no observers.
After downgrade to alpha.24

TkDodo commentedon May 6, 2022
@hirbod the observers are subscribed when useSyncExternalStore picks up a change. The subscription also triggers the first fetch. It should happen here:
https://github.com/tannerlinsley/react-query/blob/fdbc002006d7d8c3e236da71cb0c23cf394c1835/src/reactjs/useBaseQuery.ts#L86
Could you check if it's called at all, or if the isRestoring check has something to do with it?
It could be a bug in the uSES shim if the function is not invoked at all. We're also not on the latest uSES version, maybe we should try upgrading
hirbod commentedon May 6, 2022
@TkDodo looks like its never calling it. I was not able to reach neither "undefined" or the
else
statement.am I doing something?
gets triggered though. I tried adding some console statements to the transpiled file.isRestoring is always "false"
hirbod commentedon May 6, 2022
I forced
use-sync-external-store
v.1.1.0 via yarn resolutions, but that does not fix the issue either.[-]Queries not executing on v4[/-][+]React Native: Queries not executing on v4[/+]TkDodo commentedon May 7, 2022
Can you try out if other hooks that subscribe via uSES work? For example: one button that does queryClient.fetchQuery, and somewhere else a component that does useIsFetching(); the count should change when you click the button. Make sure the useIsFetching component is in a different part if the component tree that would not rerender top-down when the button is clicked.
If that works, it points towards an issue in useBaseQuery only. If not, it's likely uSES related. The useIsFetching implementation is pretty minimal:
https://github.com/tannerlinsley/react-query/blob/fdbc002006d7d8c3e236da71cb0c23cf394c1835/src/reactjs/useIsFetching.ts#L26-L34
30 remaining items