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

Question

我有一个基本的 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: Cannot set property 'props' of undefined"。这是我的尝试：

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 的库有更好的实践吗？

谢谢！

Answer 1

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

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

...它应该可以工作

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

Using Apollo GraphQL HOC pattern with an existing HOC

reactjs

graphql

react-apollo

higher-order-components