ApolloGraphQL useQuery 不尊重我的上下文/标题设置

Question

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

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

然后，我用 ApolloGrapql Provider 包装我的 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 开发工具查看什么是 POST 时，这就是真正发送的授权标头，它显示我 xxx 忽略了我放入 useQuery 的内容上下文。

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

Answer 1

您应该有一个身份验证机制，例如登录、注销、检查令牌等功能（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>;
};

auth.js 用于获取/设置凭据：

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;