react-query

react-query copied to clipboard

Not maintained anymore, see: https://github.com/nextauthjs/react-query/issues/7#issuecomment-923099050

NextAuth.js React-Query Client

@next-auth/react-query

React Query wrapper for NextAuth.js session management.

Overview

This is an alternative client for next-auth based upon react-query. It can replace the built-in session management on the client-side by taking advantage of react-query's built-in caching, auto refetching, etc.

Getting Started

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

You can then import useSession from this package, instead of the core next-auth package. More usage details can be found below.

API Reference

useSession

useSession(params: UseSessionParams) : UseSessionResult

React Query wrapper to retrieve Session. Replaces useSession and Provider from next-auth/client in codebases where you already use react-query.

UseSessionParams

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

TIP: staleTime and refetchInterval respectively match clientMaxAge and keepAlive from the Original API.

UseSessionResult

import { useSession } from "@next-auth/react-query"
...
const [session, loading] = useSession()
...

The shape of what useSession returns matches the Original API.

Acknowledgements

Based on this discussion between @kripod and @balazsorban44

Contributing

We're open to all community contributions! If you'd like to contribute in any way, please first read our Contributing Guide.

License

ISC