connect-query-es: Getting "No QueryClient set, use QueryClientProvider to set one" error in version 1.0.0
Attempting to use connect-query by following the Quickstart documentation in a Next JS app but having issues. Receiving this error when useQuery is called…
No QueryClient set, use QueryClientProvider to set one
The problem appears to be with the wrapper around the @tanstack/react-query useQuery as using the original hook does not result in this error.
My app uses Yarn workspaces so thought it might be an issue with module resolution with my specific environment however I have tried creating a brand new Next JS app with NPM and still getting the same error. I have also tried different node versions and @tanstack/react-query versions.
This is the code, which is very close to the example in the docs…
import { TransportProvider, useQuery } from "@connectrpc/connect-query";
import { createConnectTransport } from "@connectrpc/connect-web";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { getUsers } from "clients/dist/user/user-UserService_connectquery";
const finalTransport = createConnectTransport({
baseUrl: "",
});
const queryClient = new QueryClient();
export default function Web() {
return (
<TransportProvider transport={finalTransport}>
<QueryClientProvider client={queryClient}>
<Content />
</QueryClientProvider>
</TransportProvider>
);
}
const Content = () => {
const query = useQuery(getUsers);
return <div>{query.data?.users.length}</div>;
};
// package.json
"@bufbuild/protobuf": "~1.3.0",
"@connectrpc/connect": "^1.1.2",
"@connectrpc/connect-query": "^1.0.0",
"@connectrpc/connect-web": "^1.1.2",
"@tanstack/react-query": "^5.13.4",
Any help appreciated! 😄
About this issue
- Original URL
- State: closed
- Created 7 months ago
- Reactions: 1
- Comments: 17
Commits related to this issue
- Loosen peer dependency requirement (#306) Fixes #305 We don't need such a restrictive peer dependency. Anything in 5.x will do. — committed to connectrpc/connect-query-es by paul-sachs 7 months ago
- Fix dual package hazard in nodejs (#310) Fixes #305 For more details, see https://github.com/bufbuild/protobuf-es/issues/610 but the long story short is that module systems in nodejs/browser co... — committed to connectrpc/connect-query-es by paul-sachs 7 months ago
- Remove ESM wrapper (#312) Fixes #305... again again. The `esm` wrapper (as described in https://github.com/bufbuild/protobuf-es/issues/509) creates problems when using a peer dependency that def... — committed to connectrpc/connect-query-es by paul-sachs 6 months ago
Alright, sorry this keeps popping up. My testing technique for this one was flawed and much too error prone. v1.1.2 should fix it for realz this time.
Hmm, I see. I think I also see where my testing failed to catch this… Back to the drawing board.
Alright, so with some help from @thomasjmwb I think we narrowed it down. This happens while using the
pagesdirectory mode with nextjs. Now I just gotta find out how we can reproduce the same module format that allowsreact-queryto work in the same situation.As it turns out, this issue was sorta already discovered in some other packages we publish, so after spending much too much time pulling out my hair, we at least have an easy fix.
Awesome! Working great now. Thank you @paul-sachs and @timostamm.
Thank you for the fix! Unfortunately I am still having issues in my fresh Next JS project using npm 😢 Maybe I am missing something.
I have updated to 1.1.1 and using the latest
react-query. I have tried the older version from the example code too.Here is some output with an file paths in the stack trace.
🚀 Released with v1.1.1
Thanks for the incredibly speedy fix!
I’m able to reproduce this issue using connect-query 1.1.0 using npm:
package.json:npm explain:
I think this may be a problem with our peerDependency on @tanstack/react-query being too restrictive. I’ll make a PR to loosen that up a little, but to confirm, can you try adding a resolution to your package.json to enforce a unified version of the package?