从 redux 存储中反应 apollo 默认查询变量

Question

我正在尝试使用 react-apollo 制作多语言单页应用程序。当前语言环境存储在 redux store 中。问题是我必须将每个组件连接到 redux 才能将语言环境变量传递给查询。这样的代码重复看起来是多余的。我不能将区域设置硬编码到查询中，因为它对于不同的用户来说可能不同。我需要动态传递默认值。有什么想法吗？

Answer 1

您可以将语言环境作为 header 添加到您使用 apollo 客户端的中间件发送到服务器的每个请求中。如果您使用的是浏览器，则将语言环境存储在 localStorage 中；如果您使用的是 React Native，则将语言环境存储在 asyncStorage 中。

import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { GRAPHQL_API_DEV } from './api';
import { checkForLocale } from '../../utils/locale';

const networkInterface = createNetworkInterface({
  uri: GRAPHQL_API_DEV
});

networkInterface.use([{
  applyMiddleware(req, next) {
    // Create the header object if needed.
    if (!req.options.headers) {
      req.options.headers = {};
    }

    // get the locale token from Async storage
    // and assign it to the request object
    checkForLocale()
    .then(LOCALE => {
      req.options.headers.custom-header = LOCALE;
      next();
    })
    .catch(error => {
      req.options.headers.custom-header = null;
      next();
    })
  }
}]);

const client = new ApolloClient({
  networkInterface,
  dataIdFromObject: o => o.id
});

export default client;

从 redux 存储中反应 apollo 默认查询变量

React apollo default query variable from redux store

apollo

reactjs

graphql

react-apollo