Javascript Next.js/React-如何从Apollo客户端解析用户语言？

我正在使用Next.js框架（v5）开发一个I18n模块

为了在用户的默认语言上显示UI，我试图弄清楚该语言是什么

从浏览器解析语言“相当简单”，但我很难弄清楚如何在服务器端做到这一点，同时向包装页面的HOC提供该值，以便我可以在请求

标题中指定要使用的区域设置，以便获取该语言的内容

我在
pages/\u documents.js
中找到了如何使用
accept language
标题从服务器解析用户语言的方法：

  static getInitialProps(props) {
    const { req, res, renderPage, isServer = false } = props;
    const cookies = new Cookies();

    if (isServer) {
      const headers = req.headers;
      const acceptedUserLanguages = acceptLanguageParser.parse(headers['accept-language']);
      const mostPreferredLanguage = get(acceptedUserLanguages, '[0]', {});
      // {code: 'en', region: 'GB'}

这个很好用

但是，我需要在包装页面组件的HOC中访问这个
mostPreferredLanguage
，我真的不知道怎么做，因为HOC代码是在
getInitialProps
函数之前执行的。据我所知，我无法从HOC本身访问
req.headers

临时实施：

export default withData(
  compose(
    withRedux(configureStore),
    withLoanAdvisor,
    graphql(institutionPagesData, {
      options: (props) => {
        return {
          context: {
            headers: {
              'gcms-locale': 'FR', // How do I universally get the user language here? I don't have access to request.headers there
              'gcms-locale-no-default': false
            },
          },
        };
      },
    }),
  )(SchoolPage));


潜在解决方案
重演
我一直在考虑使用Redux。我试图实现它，但被阻止了，因为它似乎不可能在服务器端使用Redux

Redux的想法是使用
getInitialProps
解析语言并将其存储在Redux中，然后在运行
graphql（）
HOC查询之前连接到存储，从而使语言在
graphql
HOC的
props
中可用，这样我就可以用正确的标题运行查询了

但是如上所述，Redux在服务器端不可用，试图通过
\u document.js
初始化它会使服务器崩溃。看

曲奇饼
我还尝试使用cookie，但当我成功地从浏览器/服务器读取cookie时，我无法在
\u document.js
getInitialProps
函数的服务器端写入cookie。我不知道为什么，也没有帮我。
你可以从HOCs访问
getInitialProps
-对
getInitialProps
的限制照常适用（没有子组件，只有
页面
），但这是很常见的模式，例如：

const withSize = (WrappedComponent) => {
  return class extends React.Component {
    static async getInitialProps({ req }) {
      const ua = req ? req.headers['user-agent'] : navigator.userAgent;
      const userAgent = uaParser(ua);

      return { userAgent };
    }

    // ... implementation

    render() {
      // userAgent meant to be removed from props
      const { userAgent, ...props } = this.props || {};
      return (
        <WrappedComponent
          {...props}
          {...this.state}
          isMobile={this.state.windowWidth <= deviceWidth.mobile}
          isTablet={this.state.windowWidth <= deviceWidth.tablet}
        />
      );
    }
  };
};


const with size=（WrappedComponent）=>{
返回类扩展了React.Component{
静态异步getInitialProps（{req}）{
const ua=req？req.headers['user-agent']：navigator.userAgent；
const userAgent=uaParser（ua）；
返回{userAgent}；
}
//…实施
render（）{
//要从道具中删除的用户代理
const{userAgent，…props}=this.props | |{}；
返回(