如何从 graphQL apollo 突变或查询上的 cookie 更新授权标头

Posted 2023-03-10

【中文标题】如何从 graphQL apollo 突变或查询上的 cookie 更新授权标头

【英文标题】：How would I update the authorization header from a cookie on a graphQL apollo mutation or query

【发布时间】：2021-06-04 13:21:43

【问题描述】：

我的 NextJS 应用程序有以下 _app.js。

我想通过将设置的 cookie 更改登录时的授权标头，我想我可以处理 cookie 和登录功能，但我被困在如何将 cookie 获取到 ApolloClient 标头自动化中。有没有办法传入一个突变，带有来自 cookie 的令牌的标头。有什么想法吗？？？

我的 cookie 工作正常，所以我有一个登录令牌，但我需要通过 _app.js 中的 cookie 将 apolloclient 令牌更改为新令牌。不知道这是怎么做到的。

import "../styles/globals.css";
import  ApolloClient, ApolloProvider, InMemoryCache  from "@apollo/client";

const client = new ApolloClient(
  uri: "https://graphql.fauna.com/graphql",
  cache: new InMemoryCache(),
  headers: 
    authorization: `Bearer $process.env.NEXT_PUBLIC_FAUNA_SECRET`,
  ,
);

console.log(client.link.options.headers);

function MyApp( Component, pageProps ) 
  return (
    <ApolloProvider client=client>
      <Component ...pageProps />
    </ApolloProvider>
  );


export default MyApp;

更新：我已经阅读了一些关于设置它以将 cookie 传递到他的 apollo 文档中的内容，但我不太明白。

const link = createHttpLink(
  uri: '/graphql',
  credentials: 'same-origin'
);

const client = new ApolloClient(
  cache: new InMemoryCache(),
  link,
);

更新：所以我在上面取得了很好的进展，它允许我通过 useQuery 中的上下文，如下所示。现在唯一的问题是 cookieData 在使用查询之前加载，因为如果我传入一个 api 密钥它可以工作，但获取的 cookie 给了我无效的 db secret 和它的相同密钥。

const  data: cookieData, error: cookieError  = useSWR(
    "/api/cookie",
    fetcher
  );

  console.log(cookieData);

  // const  loading, error, data  = useQuery(FORMS);
  const  loading, error, data  = useQuery(FORMS, 
    context: 
      headers: 
        authorization: "Bearer " + cookieData,
      ,
    ,
  );

关于这个问题的任何想法都会很棒。

【参考方案1】：

如果您需要在加载一些其他数据后运行一些 GraphQL 查询，那么我建议将后面的查询放在一个单独的 React 组件中，并使用密钥作为道具，并且仅在前一个数据可用时才加载它。或者你可以使用惰性查询。

独立组件

const Form = ( cookieData ) => 
  useQuery(FORMS, 
    context: 
      headers: 
        authorization: "Bearer " + cookieData,
      ,
    ,
  );

  return /* ... whatever ... */


const FormWrapper = () => 
  const  data: cookieData, error: cookieError  = useSWR(
    "/api/cookie",
    fetcher
  );

 return cookieData ? <Form cookieData= cookieData /> : ...loading

我可能会遗漏 React 何时/如何安装和卸载内部组件的一些细微差别，所以我想你应该小心。

使用useLazyQuery 手动执行

https://www.apollographql.com/docs/react/data/queries/#manual-execution-with-uselazyquery