React Native: Queries not executing on v4

[sandergo90]

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

1. 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
}

2. 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>
  );
}

3. 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

[teaguestockwell]

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]

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]

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]

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]

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]

@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]

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]

@TkDodo I've upgraded and you're right, no observers.

After downgrade to alpha.24

[TkDodo]

@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]

@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]

I forced use-sync-external-store v.1.1.0 via yarn resolutions, but that does not fix the issue either.

yarn why v1.22.17
[1/4] 🤔  Why do we have the module "use-sync-external-store"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "use-sync-external-store@1.1.0"
info Reasons this module exists
   - "_project_#zustand" depends on it
   - Hoisted from "_project_#zustand#use-sync-external-store"
   - Hoisted from "_project_#app#use-sync-external-store"
   - Hoisted from "_project_#app#react-query#use-sync-external-store"
info Disk size without dependencies: "104KB"
info Disk size with unique dependencies: "104KB"
info Disk size with transitive dependencies: "104KB"
info Number of shared dependencies: 0
✨  Done in 0.71s.

[TkDodo]

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