Import react query as a peerDependency into Next.js throws error - Error No QueryClient set, use Qu
I am using a monorepo. In one package I have my web-app build with next.
In another one all my react-query hooks.
When I import the hooks from the library into Next.js I get the following error:
The repo is here: https://github.com/kevinmamaqi/react-query-next-js
Next.js App has the QueryProvider as specified in the docs.
Any ideas please? - I've tried many combinations and it doesn't seem to work.
GitHub
GitHub - kevinmamaqi/react-query-next-js
Contribute to kevinmamaqi/react-query-next-js development by creating an account on GitHub.
8 Replies
quickest-silver•4y ago
FWIW - im not experienced with react query and SSR, i use it exclusively in a CSR environment. the maintainers who frequent support could give better advice later but just saw this in the docs
following the docs page you've based your code on, it mentions the need for initiating a query client per page. your index.tsx page doesn't do this - may be worth exploring
https://tanstack.com/query/v4/docs/guides/ssr
SSR | TanStack Query Docs
React Query supports two ways of prefetching data on the server and passing that to the queryClient.
Prefetch the data yourself and pass it in as initialData
plain-purple•4y ago
you have Tanstack/query as a
dependency in the lib, which means it gets bundled with it, giving you likely two versions of it, which explains the error: https://github.com/kevinmamaqi/react-query-next-js/blob/70f39de48f00a56a7acafabab3177f8cf1c4b749/libs/queries/package.json#L15GitHub
react-query-next-js/package.json at 70f39de48f00a56a7acafabab3177f8...
Contribute to kevinmamaqi/react-query-next-js development by creating an account on GitHub.
plain-purple•4y ago
what you want is:
-
peerDependency so that it picks up the version of the host app
- devDependency so that you can work with it locallyratty-blushOP•4y ago
Regarding the per each page @Charlie I think it is when you dehydrate on the server side only.
Regarding the devDependencies I tried it already @TkDodo 🔮 and it doesn't work either. Same error, I just updated the repo.
Any other ideas why this could happen?
plain-purple•4y ago
check your node_modules if there are two versions of react-query around
I don't really see how this is bundled in this example. is the shared lib usually a dependency you get from npm? is this a monorepo?
ratty-blushOP•4y ago
It is a library in development mode in another folder. Not sharing dependencies in a monorepo. It is installed via
npm install ../lib/queries. In node_modules it has the same version of @tanstack/react-query. V4.10.3.plain-purple•4y ago
So I did
npm install in both the lib and the app directory, and what I'm seeing is that the app directory has a tanstack/query in the top level of node_modules, and then another one in node_modules/@company-libs/queries/node_modules
my guess is what you want / need for this is a monorepo setup
what you can do is delete the node_modules from the lib directory. Also, your app is missing axios as dependency, which the lib has as a peerDep. This only works because node_modules are copied.
so if I add axios to the app then it works fine.
but this is a troublesome setup. if you want file-system linking, look into pnpm and their workspace protocol. Or, use yalc to link the lib to the app - yalc only copies what npm publish would also give you.
this is certainly not a RQ issueratty-blushOP•4y ago
Thanks @TkDodo 🔮
Although I couldn't reproduce the npm install adding axios and make it work I went for https://turborepo.org/ and it works great now.
Turborepo
Turborepo
Turborepo is a high-performance build system for JavaScript and TypeScript codebases