根据塞尔坎Akman的回答，我做了一个像这样的登录表单：

• src/graphql/query。ts

import { gql } from "@apollo/client"

export const LOGIN = gql`
  mutation Mutation($email: String!, $password: String!) {
    login(email: $email, password: $password)
  }
`

• src/graphql/client。ts

import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client"

import { setContext } from "@apollo/client/link/context"

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem("new-user-token")
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : null,
    },
  }
})

const HttpLink = createHttpLink({
  uri: "http://localhost:4000",
})

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: authLink.concat(HttpLink),
})

export default client

• src/pages/login.tsx（我的登录表单）

import { LOGIN } from "@/graphql/query"
import { useMutation } from "@apollo/client"
import { useState } from "react"
// some other imports here 

const LoginPage = ({ setToken }: { setToken: any }) => {
  const [email, setEmail] = useState<string>("")
  const [password, setPassword] = useState<string>("")
  const [loginMutation] = useMutation(LOGIN, {
    variables: { email, password },
    onError: (error) => console.error(error),
    onCompleted: (data) => {
      setToken(data.login)
      localStorage.setItem("new-user-token", data.login)
    },
  })

  const submit = (event: any) => {
    event.preventDefault()
    loginMutation()
    setPassword("")
  }

  return (
     // a login form here
  )
}

• src/pages/_app.土耳其电信公司

import { ApolloProvider } from "@apollo/client"
import type { AppProps } from "next/app"
import Layout from "./components/layouts/layout"
import client from "@/graphql/client"
// some other imports

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ApolloProvider client={client}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ApolloProvider>
  )
}

• src/pages/components/layout.tsx：如果没有token，则显示登录表单。

import LoginPage from "@/pages/login"
import Sidebar from "./bar/sidebar"
import { useApolloClient } from "@apollo/client"
import { useState } from "react"

const Layout = ({ children }: { children: React.ReactNode }) => {
  const [token, setToken] = useState<string>("")
  const client = useApolloClient()
  const logout = () => {
    setToken("")
    localStorage.clear()
    client.resetStore()
  }
  if (!token) {
    return (
      <main className={styles.main}>
        <LoginPage setToken={setToken} />
      </main>
    )
  }
  return (
    <main>
      <Sidebar logout={logout} />
      <div>
        <div>{children}</div>
      </div>
    </main>
  )
}

export default Layout

虽然后端运行良好，但前端useMutation()钩子不能正常工作。后端服务器无法接收任何内容以创建令牌。我做错了什么？