有人能建议什么是从httpOnly cookie访问令牌的最佳方式吗？
我使用Next.js 12.x.x作为前端（http://localhost:3000）。
我的API服务器单独运行（http://localhost:4000）。
登录后，API服务器返回JWT令牌。我将令牌存储在cookie-httpOnly中。我使用Apollo客户机和useQuery之类的钩子。
我知道的是：
1.无法使用JavaScript从客户端读取httpOnly。
1.如果我向Next.js API发出请求，我可以从请求中读取cookie并获得令牌。

export default async function (req, res) { 
  const { cookies } = req;
  const jwt = cookies.token;
}

1.我可以从getServerSideProps访问令牌

export async function getServerSideProps(context) {
    const jwt = context.req.cookies.token;
        
}

但是，
1.我用的是阿波罗的客户端。
1.我想使用useQuery挂钩。
1.我的API需要令牌信息来返回响应，这些响应是单独运行的。
1.我不能在getServerSideProps中使用钩子。
我需要在头文件中传递Authorization。有人能帮助我理解获取令牌并添加到apolloClient头文件中的最佳和最安全的方法吗？我希望避免在前端（Next.js）创建API。
_app.js如下所示。

import { useEffect } from "react";
import { ApolloProvider, ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

export  function MyApp({Component, pageProps} ) {

  const httpLink = createHttpLink({
    uri: 'http://localhost:4000/graphql',
  });
  
  const authLink = setContext((_, { headers }) => {
    const token = "HOW TO FIND YOU ?????";
    return {
      headers: {
        ...headers,
        Authorization: `Bearer ${token}`
      }
    }
  });
  
  const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ApolloProvider>
  );
}
export default MyApp;