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

【问题标题】：How would I update the authorization header from a cookie on a graphQL apollo mutation or query如何从 graphQL apollo 突变或查询上的 cookie 更新授权标头
【发布时间】：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,
      },
    },
  });

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

【问题讨论】：

标签： cookies graphql next.js apollo faunadb

【解决方案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

【讨论】：

独立组件

使用useLazyQuery 手动执行

使用`useLazyQuery` 手动执行