React Query wrapper for NextAuth.js session management

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?

I'm currently trying to use this library using the following versions of Nextjs and NextAuth, but having the below error:

dependencies:

next: 12.0.3
next-auth: 4.0.0-beta.6
node: v14.18.1
typescript: 4.4.4

error:

> Build error occurred
Error: Dynamic require of "react" is not supported
    at xe (file:///myproject/node_modules/@next-auth/react-query/dist/index.mjs:1:294)
    at file:///myproject/node_modules/@next-auth/react-query/dist/index.mjs:1:39268
    at file:///myproject/node_modules/@next-auth/react-query/dist/index.mjs:1:373
    at file:///myproject/node_modules/@next-auth/react-query/dist/index.mjs:4:497
    at file:///myproject/node_modules/@next-auth/react-query/dist/index.mjs:1:373
    at file:///myproject/node_modules/@next-auth/react-query/dist/index.mjs:4:14209
    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
    at async Loader.import (internal/modules/esm/loader.js:178:24) {
  type: 'Error'
}

Not sure how I broke it...

$ npm install --save @next-auth/react-query

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"^11.0.0" from the root project
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^10.0.3" from @next-auth/[email protected]
npm ERR! node_modules/@next-auth/react-query
npm ERR!   @next-auth/react-query@"*" from the root project
...

next 11.1 next-auth 3.29.0 react-query 3.21.1 typescript 4.2.4

Hi,

When I tried to use @next-auth/react-query, it showed following errors. Do you know what should I do for it? It seems that the index.js is using import syntax which is not allowed.

import { useQuery } from "react-query"
^^^^^^
SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at Module._compile (internal/modules/cjs/loader.js:891:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.@next-auth/react-query (/home/kos/git/opensource/onr-react-ui/examples/next-starter/.next/server/pages/_app.js:2703:18)
    at __webpack_require__ (/home/kos/git/opensource/onr-react-ui/examples/next-starter/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///./src/app/components/PageContainer.tsx:7:80)

Reasoning 💡

Tiny change! I'd like to see the queryConfig parameter defaulted to an empty object so that if it isn't specified, we don't see an error calling useSession.

Checklist 🧢

• [x] Documentation
• [ ] Tests
• [x] Ready to be merged

I haven't run tests to check this yet. Documentation already talks about {} as the default.

package.files[] used to include a wrong path to the type definitions file (index.d.js instead of index.d.ts), and as such, they didn't get published into the npm package, leaving consumers of this package without proper type definitions.

This PR fixes that by changing the path in package.files[] from index.d.js to index.d.ts

How to validate

Run npm publish --dry-run on master:

$ npm publish --dry-run
npm notice 
npm notice 📦  @next-auth/[email protected]
npm notice === Tarball Contents === 
npm notice 3.7kB  README.md     
npm notice 55.1kB dist/index.js 
npm notice 55.0kB dist/index.mjs
npm notice 730B   index.js      
npm notice 1.5kB  package.json  
npm notice === Tarball Details === 
npm notice name:          @next-auth/react-query                  
npm notice version:       0.0.8                                   
npm notice filename:      @next-auth/react-query-0.0.8.tgz        
npm notice package size:  38.3 kB                                 
npm notice unpacked size: 116.1 kB                                
npm notice shasum:        ebe3358bcc79a8c479861fc16ef51d9b425e3d16
npm notice integrity:     sha512-DWbWDDNRCa+eU[...]19OdZO1F0LA6w==
npm notice total files:   5                                       
npm notice 
+ @next-auth/[email protected]

See how it doesn't contain index.d.ts.

Now, run the same npm publish --dry-run on this branch:

$ npm publish --dry-run
npm notice 
npm notice 📦  @next-auth/[email protected]
npm notice === Tarball Contents === 
npm notice 3.7kB  README.md     
npm notice 55.1kB dist/index.js 
npm notice 55.0kB dist/index.mjs
npm notice 912B   index.d.ts    
npm notice 730B   index.js      
npm notice 1.5kB  package.json  
npm notice === Tarball Details === 
npm notice name:          @next-auth/react-query                  
npm notice version:       0.0.8                                   
npm notice filename:      @next-auth/react-query-0.0.8.tgz        
npm notice package size:  38.7 kB                                 
npm notice unpacked size: 117.0 kB                                
npm notice shasum:        60503efa2afc5505a848477e2f138a3e54f1e619
npm notice integrity:     sha512-2WVGrFeX8g2lw[...]DOOhcZ2ODZDEg==
npm notice total files:   6                                       
npm notice 
+ @next-auth/[email protected]

It now contains index.d.ts.

Checklist 🧢

~[ ] Documentation~ ~[ ] Tests~

• [x] Ready to be merged

Create both esm and cjs output files to support next.js correctly

Fixes #4

Notes:

• main + modules in package.json strategy: https://2ality.com/2019/10/hybrid-npm-packages.html#option-1-(experimental%2C-needs-conditional-exports)%3A-esm-and-commonjs-are-both-bare-imports
• esbuild docs: https://esbuild.github.io/getting-started/

Updated README.md to more match the rest of the packages we have.

Also added the basic PR template, stale settings and super basic CI lint job to bring this repo up to speed with the rest of ours :+1:

EDIT: Oops, package-lockv2 (npm7) issue again.. If its a problem, please push your npm6 package-lock over this one before merging :+1:

Please see the image or text below for further details:

./src/hooks/mutations/useUpdateUser.ts:1:0
Module not found: Package path . is not exported from package /Users/kripod/Development/folio/node_modules/@next-auth/react-query (see exports field in /Users/kripod/Development/folio/node_modules/@next-auth/react-query/package.json)
> 1 | import { useSession } from "@next-auth/react-query";
  2 | import type { Session } from "next-auth";
  3 | import { useMutation, useQueryClient } from "react-query";
  4 |