Expo + trpc +_ reactQuery: Uncaught Error: No QueryClient set, use QueryClientProvider to set one

[dezerb]

Describe the bug

I decided to use expo + trpc stack. But I have some issues with react-query used under the hood of trpc.
The courios thing is that iOS build is working fine but not web configuration.
During my investigations I spotted the place in QueryClientProvider -> getQueryClientContext
Although I placed the QueryClientProvider in code and default context is created, the method can't find it.

So is my app.tsx

export default function App() {
  return (
    <AuthenticationProvider>
      <TRPCProvider>
        <ThemeProvider theme={theme}>
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen name="Criteria" component={MovieSearchComponent}/>
              <Stack.Screen name="Results" component={ResultsComponent}/>
            </Stack.Navigator>
          </NavigationContainer>
        </ThemeProvider>
      </TRPCProvider>
    </AuthenticationProvider>
  );
}

my component

import { trpc } from "../../utils/trpc-client";

export function ResultsComponent({navigation, route}) {

  const {data} = trpc.moviesRecommendation.useQuery(
     {
      runtimeMinsMin: 100
    }
  )

trpc-client.ts

import { AppRouter } from "../server/trpc";
import { createTRPCReact, httpLink } from "@trpc/react-query";

export const trpc = createTRPCReact<AppRouter>()

export const trpcClient = trpc.createClient({
  links: [httpLink({url: 'http://localhost:3000/api/trpc'})],
})

and trpc-provider.ts

export function TRPCProvider({children}: PropsWithChildren) {
  const [queryClient] = useState(() => new QueryClient())

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient} contextSharing={true}>
        {children}
      </QueryClientProvider>
    </trpc.Provider>
  )
}

So is the web error while using useQuery:

Uncaught Error: No QueryClient set, use QueryClientProvider to set one
    at Object.useQueryClient (QueryClientProvider.tsx:48:1)
    at Object.useBaseQuery (useBaseQuery.ts:33:1)
    at useQuery (useQuery.ts:139:1)
    at Object.useQuery$1 [as useQuery] (createHooksInternal-808efaa7.mjs:277:1)
    at createHooksInternal-808efaa7.mjs:52:1
    at Object.apply (index-972002da.mjs:18:1)
    at ResultsComponent (results-component.tsx:11:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)

babel.config.js

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const path = require('path')

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync(env, argv);
    config.module.rules.forEach(r => {
        if (r.oneOf) {
            r.oneOf.forEach(o => {
                if (o.use && o.use.loader && o.use.loader.includes('babel-loader')) {
                    o.include = [
                        path.resolve('.'),
                        path.resolve('node_modules/@trpc/*'),
                    ]
                }
            })
        }
    })
    config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto"
    });

    return config;
};

webpack.config.js

// @generated: @expo/next-adapter@4.0.13
// Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#shared-steps

module.exports = {
    presets: [
        '@expo/next-adapter/babel',
    ],
    plugins: [
        '@babel/plugin-proposal-export-namespace-from',
        'react-native-reanimated/plugin',
        ["@babel/plugin-proposal-private-methods", { "loose": true }]
    ]
};

How often does this bug happen?

Every time

Screenshots or Videos

Platform

System:
OS: macOS 13.0
CPU: (10) arm64 Apple M1 Max
Memory: 4.32 GB / 64.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.18.1/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
Watchman: 2022.11.14.00 - /opt/homebrew/bin/watchman
Browsers:
Chrome: 108.0.5359.71
Firefox: 107.0
Safari: 16.1
npmPackages:
@tanstack/react-query: ^4.18.0 => 4.18.0
@trpc/client: ^10.4.1 => 10.4.1
@trpc/react-query: ^10.4.1 => 10.4.1
@trpc/server: ^10.4.1 => 10.4.1
next: ^13.0.4 => 13.0.5
react: 18.1.0 => 18.1.0
typescript: ^4.6.3 => 4.9.3

Tanstack Query version

^4.18.0

TypeScript version

No response

Additional context

No response

[dezerb]

So far I found:
the method __useMutation inside createHooksInternal.tsx gets lost track about value inside defaultContext.
The supplied queryClient is lost and value gets undefined.

[TkDodo]

1. why is this an issue in react-query and not in trpc 😅 ?
2. almost always when this error occurs, it means there are two versions of react-query or react in your node_modules. The one that creates the Provider will then use a different react context than the one trying to consume it via useQuery. That's why, from the viewpoint of the consumer, there is no QueryClient in the context (because it technically isn't - it's in a "different one").

[dezerb]

@TkDodo

1. I already asked a question on trpc board and I was forwarded here 😄
2. I checked the versions, there is only one in my repo. Therefor on ios/andoird build it works without any issue.
3. my other suspicion is webpack configuration, expo doesn't use .mjs out of the box, so I'm not sure if I configured it appropriately / or .mjs file receive different scope of variables?

[TkDodo]

I can't help without more information, sorry. The error occurs because we are using react-context internally, so when we do useQueryClient(), we expect to find a QueryClient in the context. If we don't, this error is thrown. So it means there is no queryClient in the context.

This can happen for various reasons, like I tried to outline above. With two versions of react or two versions of react-query, the context created by the Provider might not be the same context used by useQueryClient. So even though you have setup a Provider, the consumers cannot "see it".

I'll move this to a discussion because it is very very likely not a bug in react-query but in your setup.

I checked the versions, there is only one in my repo.

It's not about the version numbers, it's about what gets installed. Have you looked at all node_modules directories on all packages and can be absolutely sure that react-query is only there once?

[dezerb]

I solved this problem. I created the context on myself

export const context = React.createContext<QueryClient | undefined>(
  undefined,
);

and provided it to the trpc

export const trpc = createTRPCReact<AppRouter>({reactQueryContext: context})

and QueryClient

    <QueryClientProvider client={queryClient} context={context}>
       {children}
     </QueryClientProvider>

[claudesortwell]

Having the same problem, but doing the above didnt work for me.

[claudesortwell]

What did work is this patch file for @trpc/react-query. This wont work for everyone, just make sure your react-query version in this patch file matches the react query in your workspaces/package.json. Thank you @TkDodo for this solution.

diff --git a/node_modules/@trpc/react-query/package.json b/node_modules/@trpc/react-query/package.json
index 953dd11..00b1e60 100644
--- a/node_modules/@trpc/react-query/package.json
+++ b/node_modules/@trpc/react-query/package.json
@@ -53,14 +53,14 @@
     }
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^4.3.8",
+    "@tanstack/react-query": "^4.20.4",
     "@trpc/client": "10.5.0",
     "@trpc/server": "10.5.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@tanstack/react-query": "^4.3.8",
+    "@tanstack/react-query": "^4.20.4",
     "@trpc/client": "10.5.0",
     "@trpc/server": "10.5.0",
     "@types/express": "^4.17.12",

[niemal]

What did work is this patch file for @trpc/react-query. This wont work for everyone, just make sure your react-query version in this patch file matches the react query in your workspaces/package.json. Thank you @TkDodo for this solution.

diff --git a/node_modules/@trpc/react-query/package.json b/node_modules/@trpc/react-query/package.json
index 953dd11..00b1e60 100644
--- a/node_modules/@trpc/react-query/package.json
+++ b/node_modules/@trpc/react-query/package.json
@@ -53,14 +53,14 @@
     }
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^4.3.8",
+    "@tanstack/react-query": "^4.20.4",
     "@trpc/client": "10.5.0",
     "@trpc/server": "10.5.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@tanstack/react-query": "^4.3.8",
+    "@tanstack/react-query": "^4.20.4",
     "@trpc/client": "10.5.0",
     "@trpc/server": "10.5.0",
     "@types/express": "^4.17.12",

Adding this as a dependency resolved the issue inside package.json: "@tanstack/react-query": "^4.20.4",

[mozzius]

I found that this worked too:

import { defaultContext } from "@tanstack/react-query"

export const api = createTRPCReact<AppRouter>({
  reactQueryContext: defaultContext,
});

[BrightonMboya]

What worked for me was making sure the version of @trpc/server on both the provider (api folder) and consumer (the nextjs app) matched.