Skip to content

React Native: Queries not executing on v4 #3582

Closed
@sandergo90

Description

@sandergo90
Contributor

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

Activity

teaguestockwell

teaguestockwell commented on May 3, 2022

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

hirbod

hirbod commented on May 4, 2022

@hirbod
Contributor

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

sandergo90 commented on May 4, 2022

@sandergo90
ContributorAuthor

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

TkDodo commented on May 5, 2022

@TkDodo
Collaborator

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

hirbod commented on May 5, 2022

@hirbod
Contributor

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

TkDodo commented on May 5, 2022

@TkDodo
Collaborator

@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

hirbod commented on May 5, 2022

@hirbod
Contributor

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

hirbod commented on May 5, 2022

@hirbod
Contributor

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

Bildschirmfoto 2022-05-05 um 21 13 27

After downgrade to alpha.24
Bildschirmfoto 2022-05-05 um 21 22 39

TkDodo

TkDodo commented on May 6, 2022

@TkDodo
Collaborator

@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

hirbod commented on May 6, 2022

@hirbod
Contributor

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

Bildschirmfoto 2022-05-06 um 07 56 53

isRestoring is always "false"

hirbod

hirbod commented on May 6, 2022

@hirbod
Contributor

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.
changed the title [-]Queries not executing on v4[/-] [+]React Native: Queries not executing on v4[/+] on May 7, 2022
TkDodo

TkDodo commented on May 7, 2022

@TkDodo
Collaborator

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

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @hirbod@TkDodo@satya164@sandergo90@tannerlinsley

        Issue actions

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