[Bug] @zodios/react with nextjs: No QueryClient set

[QzCurious]

Steps to reproduce:

1. clone https://github.com/QzCurious/zodios-hook-bug
2. yarn
3. yarn dev
4. visit http://localhost:3000
5. The line apiHook.useUser() produce the error
   

It's just a simple nextjs project installed with necessary dependencies of @zodios/react. It might be easier to inspect this demo by checking what each commit does instead of reviewing whole project.

Side note: The same setup working fine with CRA on codesandbox here.

[QzCurious]

Update with a CRA example on codesandbox. Sorry I can only track the problem this far.

[ecyrbe]

Have you tried using Hydrate component from react query?

[QzCurious]

Not sure what is that mean.

Did you mean setting nextjs up to hydrate with react-query like using hydration?
Had follow the instruction from using hydration, it's not working either. And the instruction looks not participate in this issue though.

[ecyrbe]

Hello @QzCurious ,

Thanks for taking the time to report this issue.
It seems to be related to two things. first the issue was not happening in v3 of react-query.
It's likely related to @tanstack/react-query new support of of esm modules and a bug in webpack.
This is unfortunate, but i have a workaround that i found on react-query issues

So the fix is to update webpack config of next-js to instruct it to instanciate @tanstack-query only once.
so your next.config.js should look like this :

const path = require("path");
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: (config, options) => {
    if (options.isServer) {
      config.externals = ["@tanstack/react-query", ...config.externals];
    }
    const reactQuery = path.resolve(require.resolve("@tanstack/react-query"));
    config.resolve.alias["@tanstack/react-query"] = reactQuery;
    return config;
  },
};

module.exports = nextConfig;

I tested it and it works for now. i'll check with dominik the maintainer of react-query if he thinks that's fixable on @tanstack/react-query

[ecyrbe]

I'll update the docs of zodios and nextjs example and add a tip for configuring webpack with this workaround in the mean time.

[ecyrbe]

updated example : https://github.com/ecyrbe/zodios-express/tree/main/examples/next

update on zodios website docs incoming

[QzCurious]

@ecyrbe

Thank you for always replying back, even solving, issues very soon. But I get lost in what esm, commonjs, webpack things are about. I'll try the workaround for now.
Do you mind me to report issues,if any, that could be caused by the workaround? Or it might be better to stick with react-query@3 and @zodios/core@9 for now?

[ecyrbe]

I now can confirm the bug is related to esm with @tanstack/react-query since reverting to v4.2.3 or react query does not have the issue and upgrading to v4.3.0 triggers this issue

[ecyrbe]

@QzCurious yes you can report any issues with the workaround. but you don't need to revert to @zodios/core v9, you can just downgrade to @tanstack/react-query v4.2.3 if you feel you don't need esm support (usually you don't).

[ecyrbe]

created a bug on @tanstack/react-query : TanStack/query#4346

[ecyrbe]

Closing since i updated the documentation. Not much else i can do as even with esm build just created it still needs the workaround.

[QzCurious]

For reference, the workaround is documented here.

[ecyrbe]

@QzCurious I finally found how to fix this on zodios packaging. I needed to had exports that are interpreted by webpack. This is now working without the workaround on :

• @zodios/core : v10.3.1
• @zodios/react: v10.3.2

[QzCurious]

Cool, congratulations 🎉