带有 apollo 客户端的 NextAuth 凭据提供程序？

Question

在 Next.js 中通过 Apollo 客户端使用 NextAuth 进行 GraphQL 身份验证遇到错误

钩子只能在函数体内调用。

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import { useMutation, useApolloClient } from '@apollo/client';
import { LOGIN_MUTATION } from '../../../graphql/mutations';
import { getErrorMessage } from '../../../lib';

export default (req, res) =>
    NextAuth(req, res, {
        providers: [
            Providers.Credentials({
                name: 'Credentials',
                credentials: {
                    identifier: { label: "Email", type: "text" },
                    password: { label: "Password", type: "password" }
                },
                authorize: async (credentials) => {
                    const client = useApolloClient();
                    const [errorMsg, setErrorMsg] = useState();
                    const [login] = useMutation(LOGIN_MUTATION);

                    try {
                        await client.resetStore();
                        const { data: { login: { user, jwt } } } = await login({
                            variables: {
                                identifier: credentials.identifier,
                                password: credentials.password
                            }
                        });            
            
                        if (user) {
                            return user;
                        }
            
                    } catch (error) {
                        setErrorMsg(getErrorMessage(error));
                    }
                }
            })
        ],
        site: process.env.NEXTAUTH_URL || "http://localhost:3000",
        session: {
            jwt: true,
            maxAge: 1 * 3 * 60 * 60,
            updateAge: 24 * 60 * 60,
        },
        callbacks: {},
        pages: {
            signIn: '/auth/signin'
        },
        debug: process.env.NODE_ENV === "development",
        secret: process.env.NEXT_PUBLIC_AUTH_SECRET,
        jwt: {
            secret: process.env.NEXT_PUBLIC_JWT_SECRET,
        }
    });

我想知道有没有办法让阿波罗完成这项工作？ 感谢您的帮助。

Answer 1

正如 cmets 正确指出的那样，您不能在服务器端代码中使用 hooks。您必须像这样创建一个新的ApolloClient：

const client = new ApolloClient()

然后你可以做这样的查询，例如：

const { data } = await client.query({
  query: "Your query",
  variables: { someVariable: true }
});

最好的方法是将客户端的创建作为一个函数移动到一个单独的外部文件中，并在需要时将其导入您的服务器端代码中。以here 为例。

编辑：

正如@rob-art 在 cmets 中正确指出的那样，对于 [mutation][2]，代码应该看起来更像这样：

const { data } = await client.mutate({
  mutation: "Your query",
  variables: { someVariable: true }
});