具有 apollo 客户端的 NextAuth 凭据提供程序?
NextAuth Credential provider with apollo client?
在 Next.js 中使用 NextAuth 对 Apollo 客户端进行 GraphQL 身份验证遇到错误
Hooks can only be called inside of the body of a function.
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,
}
});
我想知道有没有办法让这个与 apollo 一起工作?
谢谢你的帮助。
正如评论中正确指出的那样,您不能在服务器端代码中使用 hooks。您必须像这样创建一个新的 ApolloClient
:
const client = new ApolloClient()
然后你可以这样查询,例如:
const { data } = await client.query({
query: "Your query",
variables: { someVariable: true }
});
最好将客户端的创建作为一个函数移动到一个单独的外部文件中,并在需要时将其导入服务器端代码。例如完成here。
编辑:
正如 @rob-art 在评论中正确评论的那样,对于 [mutation][2],代码应该更像这样:
const { data } = await client.mutate({
mutation: "Your query",
variables: { someVariable: true }
});
在 Next.js 中使用 NextAuth 对 Apollo 客户端进行 GraphQL 身份验证遇到错误
Hooks can only be called inside of the body of a function.
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,
}
});
我想知道有没有办法让这个与 apollo 一起工作? 谢谢你的帮助。
正如评论中正确指出的那样,您不能在服务器端代码中使用 hooks。您必须像这样创建一个新的 ApolloClient
:
const client = new ApolloClient()
然后你可以这样查询,例如:
const { data } = await client.query({
query: "Your query",
variables: { someVariable: true }
});
最好将客户端的创建作为一个函数移动到一个单独的外部文件中,并在需要时将其导入服务器端代码。例如完成here。
编辑:
正如 @rob-art 在评论中正确评论的那样,对于 [mutation][2],代码应该更像这样:const { data } = await client.mutate({
mutation: "Your query",
variables: { someVariable: true }
});