Question

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

Answer 1

您可以使用apollo客户端的中间件将区域设置添加为您发送到服务器的每个请求的标头。如果您使用的是浏览器，则将语言环境存储在localStorage中;如果使用的是本机，则将语言环境存储在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默认查询变量

1 个答案: