@tanstack/[email protected] react-native example does not work - queryFn not being called

[tomskopek]

Describe the bug

I'm trying to migrate from react-query v3. I couldn't get react-query v4.3.4 to work in my react-native app, so I eventually tried the demo app.

The react-native example provided in the repo also doesn't work.
Specifically, the queryFn doesn't seem to be getting called. You can verify this by noting that console.log in fetchMovies() never gets called.

I downgraded the example app to use [email protected], a version I have working in my react web project. I also tried 4.2.3, the last version before 4.3 minor version was released.

Now the console.log in fetchMovies() does get called, as expected.
However, note that now data seems to be returning a function, instead of an array, as I'd expect, so the example repo still is not working out of the box.

Thanks!

Your minimal, reproducible example

https://github.com/TanStack/query/tree/main/examples/react/react-native

Steps to reproduce

Run the expo code example provided in the package, with react-query set to v4.3.4

Expected behavior

As a user, I expect to see a movie list, but I do not.

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

• OS - iOS 12.5.1
• iPhone 13 Pro Max simulator 15.2

react-query version

4.3.4

TypeScript version

No response

Additional context

No response

[TkDodo]

yeah two different things here:

1. the example needs to be updated, but that's a minor thing.
2. queryFn not being called. I've seen that one before, it has to do with useSyncExternalStore. I think it was this issue:

• React Native: Queries not executing on v4 #3582

[TkDodo]

@DamianOsipiuk FYI

[TkDodo]

upstream issue:

• use-sync-external-store: Add exports field to package.json facebook/react#25231

[Gedoz]

Me too, downgrade to v4.2.3 and works fine!

[gagamil]

I have updated my expo based project to the latest expo v 46 (react 18) (from v 45) and queryFn is being called.

[Willham12]

can confirm the issue!

[TkDodo]

@Willham12 @gagamil @Gedoz @tomskopek can you please try with this version?

"@tanstack/react-query": "https://pkg.csb.dev/TanStack/query/commit/fd83a352/@tanstack/react-query",

it's from the preview build of this PR:

• fix: serve esm.js for webpack 4 #4183

not sure if it actually fixes things for this issue but it's worth a try 😅

[Willham12]

@Willham12 @gagamil @Gedoz @tomskopek can you please try with this version?

"@tanstack/react-query": "https://pkg.csb.dev/TanStack/query/commit/fd83a352/@tanstack/react-query",

it's from the preview build of this PR:

• fix: serve esm.js for webpack 4 #4183

not sure if it actually fixes things for this issue but it's worth a try 😅
Hi, it's not fixed with this version.

[TkDodo]

ok thx

[TkDodo]

okay, now for another attempt. @Willham12 please try:

"@tanstack/react-query": "https://pkg.csb.dev/TanStack/query/commit/0faab602/@tanstack/react-query",

it's from this PR:

• fix: react native uSES #4185

[Willham12]

okay, now for another attempt. @Willham12 please try:

"@tanstack/react-query": "https://pkg.csb.dev/TanStack/query/commit/0faab602/@tanstack/react-query",

it's from this PR:

• fix: react native uSES #4185

LGTM

[TkDodo]

if someone wants to update the react-native example and make it work again, please open a dedicated PR

[dducluzeaud]

Hi!

Thanks for the rapid fix, I really love this library!

I would love to update the react native example. I already made the fix, but I can't push. Sorry if I'm a newbie in OSS. 😅

[TkDodo]

Awesome, thank you. You need to fork the library, then push to your fork and create a PR here

[dducluzeaud]

Thank you! PR has been created.