0

在 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,
        }
    });

我想知道有没有用阿波罗来完成这项工作？谢谢你的帮助。

4

1 回答 1

3

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

const client = new ApolloClient()

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

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

最好的方法是将客户端的创建作为函数移动到单独的外部文件中，并在需要时将其导入服务器端代码中。就像在这里做的一样。

编辑：

正如@rob-art 在评论中正确指出的那样，对于 [mutation][2]，代码应该看起来更像这样： 
const { data } = await client.mutate({
  mutation: "Your query",
  variables: { someVariable: true }
});
于 2021-02-15T19:09:43.630 回答