connectrpc / connect-query-es

TypeScript-first expansion pack for TanStack Query that gives you Protobuf superpowers.

Home Page:https://connectrpc.com/docs/web/query/getting-started

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Getting "No QueryClient set, use QueryClientProvider to set one" error in version 1.0.0

jvgreenaway opened this issue · comments

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! 😄

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?

{
  "resolutions": {
    "@tanstack/react-query": "5.13.4"
  }
}

Thanks for the reply!

I have attempted to lock the resolution in the root package.json, where all the dependencies needed for this library are defined, as well as the specific Next JS app’s package.json. It had no effect.

If I run yarn why I believe I am seeing that there is only a single version of @tanstack/react-query installed.

yarn why v1.22.19
[1/4] 🤔  Why do we have the module "@tanstack/react-query"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@tanstack/react-query@5.13.4"
info Has been hoisted to "@tanstack/react-query"
info Reasons this module exists
   - "workspace-aggregator-09770ec5-6d10-4dfc-8b0b-113b60e6038f" depends on it
   - Specified in "dependencies"
   - Hoisted from "_project_#@tanstack#react-query"
info Disk size without dependencies: "1.88MB"
info Disk size with unique dependencies: "4.27MB"
info Disk size with transitive dependencies: "4.27MB"
info Number of shared dependencies: 1
✨  Done in 0.43s.

Hmm, that is very odd. I'll try to dig in and see what's going on. It really felt like a versioning problem 🤔

There's definitely some node shenanigans going on here. I have a simple stackblitz working alright with npm. I'll try next with yarn, see if something is up.

To be fair, my example is still using the older react-query, so that might solve it in that case.

Switching the sandbox to yarn also works fine - even when using connect-query@1.0.0 + react-query@5.13.4. There may be something else in your node configuration that's causing this. We've just released v1.1.0 which loosens the peer dependency requirement, though if "resolutions" didn't solve this, I'm not sure that will either.

I'm able to reproduce this issue using connect-query 1.1.0 using npm:
package.json:

    "resolutions": {
      "@tanstack/react-query": "5.13.4"
    },
  "dependencies": {
    "@connectrpc/connect": "^1.1.4",
    "@connectrpc/connect-query": "^1.1.0",
    "@connectrpc/connect-web": "^1.1.4",
    "@tanstack/react-query": "^5.13.4",
    "@tanstack/react-query-devtools": "^5.13.4",

npm explain:

npm explain @tanstack/react-query
@tanstack/react-query@5.13.4
node_modules/@tanstack/react-query
  @tanstack/react-query@"^5.13.4" from the root project
  peer @tanstack/react-query@"5.x" from @connectrpc/connect-query@1.1.0
  node_modules/@connectrpc/connect-query
    @connectrpc/connect-query@"^1.1.0" from the root project
  peer @tanstack/react-query@"^5.13.4" from @tanstack/react-query-devtools@5.13.5
  node_modules/@tanstack/react-query-devtools
    @tanstack/react-query-devtools@"^5.13.4" from the root project
npm explain @connectrpc/connect-query
@connectrpc/connect-query@1.1.0
node_modules/@connectrpc/connect-query
  @connectrpc/connect-query@"^1.1.0" from the root project

@jvgreenaway For some additional context, when you created your nextjs app, did you opt into using the app directory (ie, using react server components) or are you using the pages directory?

Alright, so with some help from @thomasjmwb I think we narrowed it down. This happens while using the pages directory mode with nextjs. Now I just gotta find out how we can reproduce the same module format that allows react-query to work in the same situation.

Thank you both for looking into this 😄 I'm glad you have managed to reproduce.

Yes, as you say - using the pages directory.

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.

Thanks for the incredibly speedy fix!

🚀 Released with v1.1.1

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.

➜  cool-new-project git:(main) ✗ npm explain @tanstack/react-query
@tanstack/react-query@5.13.4
node_modules/@tanstack/react-query
  @tanstack/react-query@"^5.13.4" from the root project
  peer @tanstack/react-query@"5.x" from @connectrpc/connect-query@1.1.1
  node_modules/@connectrpc/connect-query
    @connectrpc/connect-query@"^1.1.1" from the root project

➜  cool-new-project git:(main) ✗ npm run dev

> cool-new-project@0.1.0 dev
> next dev

 ⚠ Port 3000 is in use, trying 3001 instead.
   ▲ Next.js 14.0.4
   - Local:        http://localhost:3001

 ✓ Ready in 2.2s
 ○ Compiling /_error ...
 ✓ Compiled / in 982ms (387 modules)
Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient (/Users/james/Development/cable/cool-new-project/node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs:49:11)
    at useBaseQuery (/Users/james/Development/cable/cool-new-project/node_modules/@tanstack/react-query/build/modern/useBaseQuery.cjs:52:64)
    at useQuery (/Users/james/Development/cable/cool-new-project/node_modules/@tanstack/react-query/build/modern/useQuery.cjs:30:47)
    at useQuery (/Users/james/Development/cable/cool-new-project/node_modules/@connectrpc/connect-query/dist/cjs/use-query.js:32:39)
    at Content (webpack-internal:///./src/pages/index.tsx:50:89)
    at renderWithHooks (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
 ⨯ Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient (/Users/james/Development/cable/cool-new-project/node_modules/@tanstack/react-query/build/modern/QueryClientProvider.cjs:49:11)
    at useBaseQuery (/Users/james/Development/cable/cool-new-project/node_modules/@tanstack/react-query/build/modern/useBaseQuery.cjs:52:64)
    at useQuery (/Users/james/Development/cable/cool-new-project/node_modules/@tanstack/react-query/build/modern/useQuery.cjs:30:47)
    at useQuery (/Users/james/Development/cable/cool-new-project/node_modules/@connectrpc/connect-query/dist/cjs/use-query.js:32:39)
    at Content (webpack-internal:///./src/pages/index.tsx:50:89)
    at renderWithHooks (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/james/Development/cable/cool-new-project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7) {
  page: '/'
}
^C

Hmm, I see. I think I also see where my testing failed to catch this... Back to the drawing board.

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.

Awesome! Working great now. Thank you @paul-sachs and @timostamm.