如何为 apollo-client 的每个请求设置变量？

Posted 2023-03-10

【中文标题】如何为 apollo-client 的每个请求设置变量？

【英文标题】：How to set variable for each request for apollo-client?

【发布时间】：2019-12-24 03:58:52

【问题描述】：

我正在使用 apollo-client 并希望为每个请求发送一些变量。我们称之为locale。我不想将它传递给每个 Query 组件，它不是 DRY 模式。

【参考方案1】：

这可以通过使用中间件来实现：

import  ApolloClient  from 'apollo-client';
import  HttpLink  from 'apollo-link-http';
import  ApolloLink, concat  from 'apollo-link';

const httpLink = new HttpLink( uri: '/graphql' );

const authMiddleware = new ApolloLink((operation, forward) => 
  operation.setContext(
    headers: 
      locale: localStorage.getItem('locale') || 'en-US',
    
  );

  return forward(operation);
)

const client = new ApolloClient(
  link: concat(authMiddleware, httpLink),
);

查看文档：https://www.apollographql.com/docs/react/advanced/network-layer/

【参考方案2】：

您可以添加一个中间件链接，它将即时修改您的operation

  class MiddlewareLink extends ApolloLink 
    request (operation: Operation, forward: NextLink) 
      operation.variables['prop1'] = 'value1'

      return forward(operation)
    
  

  ...
  const client = new ApolloClient(
    link: ApolloLink.from([
      new MiddlewareLink(),
      httpLink
    ])
  )

这种方式现在看起来是最正确的，也许以后apollo-link-http会被扩展，并且能够从上下文中接受一些数据并传递给变量。