Next.js中使用next-auth调用GraphQL Hook触发无效Hook调用错误求助

错误原因 #

你遇到的Invalid hook call错误，核心是违反了React Hook的使用规则：useLoginUserMutation是React Hook，仅能在函数组件顶层或自定义Hook中调用，而你在CredentialsProvider的authorize普通异步回调里调用它，完全不符合Hook的使用场景，因此触发报错。

解决步骤 #

不能在authorize中使用生成的Hook，需要直接通过GraphQL客户端的原生方法发送登录请求，具体修改如下：

1. 初始化GraphQL客户端实例 #

在[...nextauth].ts中创建独立的GraphQL客户端实例（不要用Hook获取客户端）：

import NextAuth, { NextAuthOptions } from 'next-auth'
import CredentialsProvider from 'next-auth/providers/credentials'
import { ApolloClient, InMemoryCache } from '@apollo/client'
// 导入Codegen生成的mutation文档
import { LoginUserDocument } from 'src/generated/graphql'

// 初始化Apollo客户端
const graphQLClient = new ApolloClient({
  uri: '你的GraphQL API地址', // 替换为实际API地址
  cache: new InMemoryCache(),
})

2. 修改authorize回调逻辑 #

在authorize中使用客户端的mutate方法执行登录请求：

export const nextAuthOptions = {
  pages: {
    signIn: '/pages/login'
  },
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      credentials: {},
      async authorize(credentials, req) {
        const { username, password } = credentials as { username: string; password: string }
        
        try {
          // 直接调用GraphQL客户端的mutate方法
          const { data } = await graphQLClient.mutate({
            mutation: LoginUserDocument, // 使用Codegen生成的mutation文档
            variables: { username, password }
          })

          if (data?.loginUser) {
            // 返回用户信息给next-auth
            return data.loginUser
          }
        } catch (err) {
          console.error('登录验证失败:', err)
        }

        return null
      }
    })
  ]
} as NextAuthOptions

export default NextAuth(nextAuthOptions)

注意事项 #

• authorize函数默认在服务器端运行，要确保GraphQL API地址在服务器端可正常访问（避免使用相对路径，处理好跨域）。
• 如果使用其他GraphQL客户端，替换为对应客户端的原生请求方法即可，核心是不在非组件/非Hook环境中调用React Hook。

内容的提问来源于stack exchange，提问作者Bishal Heuju