如何在 ReactQL 中将每个 Apollo 的 Header 添加到 GraphQL 后端

Posted 2023-03-10

【中文标题】如何在 ReactQL 中将每个 Apollo 的 Header 添加到 GraphQL 后端

【英文标题】：How do I add a Header to every Apollo to the GraphQL Backend in ReactQL

【发布时间】：2018-06-16 01:44:30

【问题描述】：

我想为我向 GraphQL 后端发出的每个请求添加一个 Authorization 标头。 我正在使用远程后端。

Apollo 文档中有一个如何添加标题的示例： https://www.apollographql.com/docs/react/recipes/authentication.html#Header

import  ApolloClient  from 'apollo-client';
import  createHttpLink  from 'apollo-link-http';
import  setContext  from 'apollo-link-context';
import  InMemoryCache  from 'apollo-cache-inmemory';

const httpLink = createHttpLink(
  uri: '/graphql',
);

const authLink = setContext((_,  headers ) => 
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem('token');
  // return the headers to the context so httpLink can read them
  return 
    headers: 
      ...headers,
      authorization: token ? `Bearer $token` : null,
    
  
);

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

但是我将如何使用 ReactQL 做到这一点？

【参考方案1】：

在 ReactQL 的示例代码库中

https://github.com/reactql/example-auth

提到了一个方法：

  config.setApolloNetworkOptions(
    credentials: 'include',
  );

  config.addApolloMiddleware((req, next) => 
    const token = 'the_token'
    req.options.headers = 
      ...req.options.headers,
      authorization: token
    ;
    next();
  );

这会将标头添加到每个请求中！