Reactjs ApolloGraphQL useQuery不考虑我的上下文/标题设置

创建ApolloGraph客户端时，我使用如下代码将标题设置为“xxx”：

new ApolloClient({
    link: new HttpLink({
    uri: 'http://localhost:5000/graphql',
    credentials: 'same-origin',
    headers: {
      authorization:
          'bearer xxx',
    },
  }),

然后，我用ApolloGrapql提供程序包装react组件，以便在组件中使用useQuery

我想用useQuery传入一个新的授权头，所以我用如下代码调用它：

const authorization = user && user.jwtToken.length > 0 ? 'bearer ' + user.jwtToken : ' ';
console.log(authorization);
const { loading, error, data } = useQuery(q, {
  context: {
    headers: { authorization }
  }
});

我的console.log显示我有一个有效的身份验证令牌，但当我查看chrome开发工具发布的内容时，这就是真正发送的授权头，它显示我xxx忽略了我在useQuery上下文中输入的内容

---

关于如何发送我的标题以反映我在useQuery中的内容，您有什么想法吗？

您应该有一个身份验证机制，如登录、注销、检查令牌等功能（auth.js），然后您可以将组件包装在Apollo客户端的高阶组件中

下面是我使用Strapi后端的工作代码

import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloClient } from "apollo-client";
import { ApolloLink } from "apollo-link";

import { HttpLink } from "apollo-link-http";
import { setContext } from "@apollo/link-context";
import React from "react";
import auth from "../auth/auth";

const httpLink = new HttpLink({
  uri: process.env.REACT_APP_API_URL,
  cors: false,
});
const authLink = setContext((_, { headers }) => {
  const token = auth.getToken() || null;
  return token
    ? {
        headers: {
          ...headers,
          authorization: token ? `Bearer ${token}` : "",
        },
      }
    : null;
});

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

const AppProvider = ({ children }) => {
  return <ApolloProvider client={client}>{children}</ApolloProvider>;
};

---

您只通过上下文传递一些值，没有函数在请求中使用它。。。关注apollo auth docs？谢谢@Deniz，这非常有帮助，但我仍在为如何从饼干中提取代币而苦苦挣扎。您有auth.getToken方法，但我不确定如何从这一点获得cookie。不客气，Peter，我添加了auth.js文件。我希望它有用是的，谢谢。基于您使用本地存储的示例，我确实让它工作了，但我真的希望它从cookie中释放出来。我会继续努力的。

import { isEmpty } from "lodash";

const TOKEN_KEY = "jwtToken";
const USER_INFO = "userInfo";

const parse = JSON.parse;
const stringify = JSON.stringify;

const auth = {
 
  clear(key) {
    if (localStorage && localStorage.getItem(key)) {
      return localStorage.removeItem(key);
    }
    if (sessionStorage && sessionStorage.getItem(key)) {
      return sessionStorage.removeItem(key);
    }
    return null;
  },

  clearAppStorage() {
    if (localStorage) {
      localStorage.clear();
    }

    if (sessionStorage) {
      sessionStorage.clear();
    }
  },

  clearToken(tokenKey = TOKEN_KEY) {
    return auth.clear(tokenKey);
  },

  clearUserInfo(userInfo = USER_INFO) {
    return auth.clear(userInfo);
  },

  get(key) {
    if (localStorage && localStorage.getItem(key)) {
      return parse(localStorage.getItem(key)) || null;
    }

    if (sessionStorage && sessionStorage.getItem(key)) {
      return parse(sessionStorage.getItem(key)) || null;
    }

    return null;
  },

  getToken(tokenKey = TOKEN_KEY) {
    return auth.get(tokenKey);
  },

  getUserInfo(userInfo = USER_INFO) {
    return auth.get(userInfo);
  },
  
  set(value, key, isLocalStorage) {
    if (isEmpty(value)) {
      return null;
    }

    if (isLocalStorage && localStorage) {
      return localStorage.setItem(key, stringify(value));
    }

    if (sessionStorage) {
      return sessionStorage.setItem(key, stringify(value));
    }
    return null;
  },

  setToken(value = "", isLocalStorage = false, tokenKey = TOKEN_KEY) {
    return auth.set(value, tokenKey, isLocalStorage);
  },

  setUserInfo(value = "", isLocalStorage = false, userInfo = USER_INFO) {
    return auth.set(value, userInfo, isLocalStorage);
  },
};
export default auth;