possible add nextauthjs / react-query in existing react-query ? - No QueryClient set, use QueryClientProvider to set one

[isggwp]

I am sory maybe sounds like the questions. I've existing next auth, and react-query setup. then i adding /nextauthjs/react-query lib with

import { useSession } from "@next-auth/react-query"

const [session, loading] = useSession({
  required: true,
  redirectTo: "/auth/sign-in?error=InvalidSession",
  queryConfig: {
    staleTime: 60 * 60 * 3, // 3 hours
    refetchInterval: 60 * 5 // 5 minutes 
  }
})

and i got some error
No QueryClient set, use QueryClientProvider to set one

any or something wrong or need additional setup on my code?

[balazsorban44]

could you please provide a reproduction?

we are using it at work with an existing react-query setup

[Fghurayri]

Hey @balazsorban44,

Thanks for the tool. I'm facing the same issue. Here is a minimal version to reproduce it:

https://github.com/Fghurayri/repro-nextjs-nextauth-rq-issue

[ldmsh]

Hey @balazsorban44,

Thanks for the tool. I'm facing the same issue. Here is a minimal version to reproduce it:

https://github.com/Fghurayri/repro-nextjs-nextauth-rq-issue

Facing the same response, almost identical implementation. Thanks

[balazsorban44]

thanks, will have a look

[vorcigernix]

Same issue when I just replaced original session from next-auth with code above (no other changes, no react-query implemented).
Edit: leaving for future reference, react query needs to be initialized, it does not work without it. Thanks @balazsorban44 for clarification.

[balazsorban44]

without a query client provider, this won't work though! so that's a different issue

[balazsorban44]

I did some changes, could someone verify that 0.0.12 fixes the problem? I tested it at work on our application, and this issue went away.
See the changes diff: 5cdac94

[heteibako]

Same issue

[balazsorban44]

@heteibako could you please verify the package versions in node_modules and your lock file? also your next version and next config js?

I tried this at work with next 10.x and had no problems!

[heteibako]

Will get back to you tomorrow. Maybe I will try to delete the package.json lock file as well.
reverted everything back to the previous state.

[heteibako]

What is supposed to be in the next.config.js?
I have only this

module.exports = {
  dateFormat: {
    locales: ['hu', 'en'],
    defaultLocale: 'hu',
  },
};

[balazsorban44]

I was just curious. The best thing would be a full reproduction, maybe your repo is public?

[vorcigernix]

@balazsorban44 it seems like you can still reproduce it with https://github.com/Fghurayri/repro-nextjs-nextauth-rq-issue

[Wgil]

I'm facing the same issue with latest version

[raymclee]

same issue

[raymclee]

i got below error if i use the useQuery hook and pass fetchSession to it

Unhandled Runtime Error
Error: Dynamic require of "react" is not supported

[phyolim]

Same issue here. v0.0.12 nextjs 11.0.1.
Edit: I copied the functions and used exact same way. It works that way. Strange. Not sure what's going on

[italodeandra]

This error happens when you have two installations of the same package.

When using npm I'm required to use the --legacy-peer-deps because @next-auth/react-query it doesn't accept the latest Next version, so this might be reason of having duplicate installations of React Query.

For now I did the same as @phyolim. I just stole the index.js. This is a simple implementation, it should have been a documentation page instead of an entire library.

[balazsorban44]

@italodeandra you might be right. the maintenance overhead almost doesn't worth it having a separate package... copy pasting the index file is probably enough for anyone interested in this. 😬

[ataschz]

Hey guys, what's the solution for this issue?

[bsides]

Facing the same problem, in the server side. Cliente side shows Unhandled Runtime Error, saying it couldnt require React dynamically

Server (console)

Client

[balazsorban44]

I currently don't have the bandwidth to maintain this package, and given how simple the source code is, it might be a better idea to simply provide it as a snippet in the docs, rather than a package.

Could you copy paste the source code and tell me if the problem goes away? 🙏🙄

[vexxvakan]

Just tried it out by just copying the source code -> doesn't work either. Looking into it now, as it behaves really strange imo

Edit: works now, the error was on my behalf!

Anyone trying to get this working with TypeScript: copy the typings from the index.d.ts and add them to your copied source code from this lib. Works absolutely fine!

[stale]

Hi there! It looks like this issue hasn't had any activity for a while. It will be closed if no further activity occurs. If you think your issue is still relevant, feel free to comment on it to keep it open. Thanks!

[stale]

Hi there! It looks like this issue hasn't had any activity for a while. To keep things tidy, I am going to close this issue for now. If you think your issue is still relevant, just leave a comment and I will reopen it. Thanks!