将 Apollo GraphQL HOC 模式与现有 HOC 结合使用答案

【问题标题】：Using Apollo GraphQL HOC pattern with an existing HOC将 Apollo GraphQL HOC 模式与现有 HOC 结合使用
【发布时间】：2019-01-18 12:22:19
【问题描述】：

我有一个基本的 HOC，它围绕着我的一些组件：

import * as React from 'react';    
export const AuthRoute = () => (WrappedComponent: any) => {
  return class extends React.Component<{}, {}> {
    constructor(props: any) {
      super(props);
    }
    public render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

我希望这个 HOC 能够访问另一个 HOC - GraphQL 的 React Apollo 客户端 HOC。我试过在这个 HOC 上使用 Apollo 客户端，但它给出了一个错误“TypeError：无法设置未定义的属性'props'”。这是我的尝试：

const AuthRoute = () => (WrappedComponent: any) => {
  return class extends React.Component<{}, {}> {
    constructor(props: any) {
      super(props);
    }
    public render() {

      return <WrappedComponent {...this.props} />;
    }
  };
}

const GET_AUTH = gql`
  {
    authStatus {
      authStatus
    }
  }
`;

export default compose(graphql(GET_AUTH))(AuthRoute);

我是否在这里遗漏了一些简单的东西，因为我认为这会起作用？或者对于像 Apollo 这样的基于 HOC 的库和现有的 HOC 是否有更好的实践？

谢谢！

【问题讨论】：

标签： reactjs graphql react-apollo higher-order-components

【解决方案1】：

看起来你刚刚打错了。将您的默认导出更改为：

export default compose(graphql(GET_AUTH), AuthRoute);

...它应该可以工作

【讨论】：