Issues when separating queries into a nx monorepo library

[vendramini]

Describe the bug

I do have a nx monorepo project. During development everything has been working out. When I try to compile a final apk to share it, I've got into this error: ReactNativeJS Error: No QueryClient set, use QueryClientProvider to set one.

We do have some issues related: #5445 and #3595.

It turns out that nothing has really worked out to me. I still can't open the compiled apk.

So I tried to isolate the problem within a minimum nx monorepo:

• apps/myapp Expo app.
• libs/hooks/api simple hook.

Check out that it does work on development: nx run-android myapp. When I compile the final apk: nx build myapp --local --platform=android it compiles, but when opening the app React Query complains about QueryClient.

Query Client is being defined only in one place. There's no duplicated versions of react-query neither react.

Thoughts?

Your minimal, reproducible example

https://github.com/vendramini/nx-rq-test

Steps to reproduce

1. nx run-android myapp: it works, you will see both fetches on the screen (local one and another one from lib).
2. nx build myapp --local --platform=android: compile successfully, but crashes when opening it.

Expected behavior

Don't crash and honor the single queryclient instance.

How often does this bug happen?

Every time

Screenshots or Videos

As you can see, we do have 2 lines of json response from api (this is development mode).

Crashes on final apk.

Platform

macOS, Android Tablet Emulator 7_WSVGA_API_34

Tanstack Query adapter

react-query

TanStack Query version

"@tanstack/react-query": "^5.51.24",

TypeScript version

"typescript": "~5.3.3"

Additional context

No response

[99Arrzel]

Hi, same problem here.
I was doing a library too and it works perfectly fine if I look the version to 5.51.1 on the app where I'm using it.

Gonna check if it works upgrading the dependency on both sides

[vendramini]

I've just tried using version 5.51.1 without success.

[TkDodo]

The thing is - we don't do anything special here. We create a react context, and expose the Provider as QueryClientProvider. Then, useQueryClient is just the consumer of that context.

If reading from that context yields null, we throw with "No QueryClient set, use QueryClientProvider to set one".

Now if you have two versions of react, or two versions of react-query (e.g. pnpm v7 used to duplicate your peerDependencies to give you two versions), the provider created from one version cannot be "seen" by the consumer with a different version, thus it thinks it cannot exist.

In the minified js, you can often see this because functions are called useQuery_2 or something along those lines, indicating that there are indeed two versions.

You would likely have the exact same problem with any other library that exposes a react context and has a peerDependency on react itself. So the problem must be somewhere in your specific bundling setup, which honestly I'm not willing to look into.

[99Arrzel]

@TkDodo I though exactly about that
I guess the proper way is to expose the QueryClient, QueryClientProvider from the library and use that instead

[vendramini]

@TkDodo thanks for the response!

My setup is nothing but the default nx setup for Expo apps and libraries, I haven't done anything on my own. Just created the repo, the apps, the hook library and that's it.

So, the problem would be in nx or Expo? More interesting is the fact that it doesn't happen on dev, only in final apk.

Do you have some tip or advice for me to keep debugging it? I'm willing to look into it deeply, but I'm out of ideas.

[vendramini]

Fixed the problem by isolating react-query into libs/hooks.

How it was
apps/myapp: Here I had <QueryClientProvider> wrapping up my app.
libs/hooks: all hooks to api.

How it is
apps/myapp: Calling a <AppQueryClientProvider> from libs/hooks and wrapping up the app.
libs/hooks: exporting a <AppQueryClientProvider>.

Now, only libs/hooks is importing modules from react query.

Apparently it's something related to nx bundling... I don't know 🤷 .

[kiwalus]

Tanks @vendramini it's work for me