Uncaught Error: No QueryClient set, use QueryClientProvider to set one

Help - Plug n Play PnP Web SDKs
1
  • SDK Version(package.json):
		"@tanstack/react-query": "^5.83.0",
		"@web3auth/modal": "^10.0.5",
		"wagmi": "^2.15.7"

Full code: https://github.com/notuslabs/notus-api-examples/blob/main/examples/web3auth-wagmi/src/providers.tsx

2

Thank you for the detailed information and for sharing your code and screenshot!

Summary of Your Issue:

  • SDK Used: Web3Auth Plug and Play (PnP) Web SDK
  • SDK Version:
    • @web3auth/modal: ^10.0.5
    • @tanstack/react-query: ^5.83.0
    • wagmi: ^2.15.7
  • Platform: Vite + React
  • Error: Uncaught Error: No QueryClient set, use QueryClientProvider to set one
  • Code Reference: providers.tsx on GitHub
  • Screenshot Provided: Yes

Root Cause

This error is not directly from Web3Auth, but from the @tanstack/react-query library. It means that somewhere in your React component tree, a hook or component from react-query is being used without a parent <QueryClientProvider>.

When integrating Web3Auth with Wagmi (which in turn depends on @tanstack/react-query), you must wrap your app with both the Web3AuthProvider and the QueryClientProvider, as well as the custom WagmiProvider from Web3Auth.

Solution

You need to ensure your app’s entry point (e.g., main.tsx or index.tsx) is set up like this:

import ReactDOM from "react-dom/client";
import { Web3AuthProvider } from "@web3auth/modal/react";
import web3AuthContextConfig from "./web3authContext";
import { WagmiProvider } from "@web3auth/modal/react/wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <Web3AuthProvider config={web3AuthContextConfig}>
    <QueryClientProvider client={queryClient}>
      <WagmiProvider>
        <App />
      </WagmiProvider>
    </QueryClientProvider>
  </Web3AuthProvider>
);
  • Order matters: Web3AuthProvider should wrap everything, then QueryClientProvider, then WagmiProvider, then your App.
  • Do not use the default WagmiProvider from wagmi; use the one from @web3auth/modal/react/wagmi.

Reference:

Action Items

  1. Double-check your main.tsx or index.tsx and ensure the providers are nested as above.
  2. Remove any duplicate or misplaced <QueryClientProvider> or <WagmiProvider> from other parts of your tree.
  3. If you are using any Wagmi hooks or components in files not wrapped by these providers, move them inside the tree as shown.

If you make these changes and still see the error, please let us know and provide your updated entry file code. We’re here to help!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours