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

Question

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

Answer 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/

Answer 2

您可以添加一个中间件 link，它将即时修改您的 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会扩展并且能够从上下文中接受一些数据并传递给变量。

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

How to set variable for each request for apollo-client?

reactjs

apollo

react-apollo