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

Posted 2023-03-10

【中文标题】将 Apollo GraphQL HOC 模式与现有 HOC 结合使用

【英文标题】：Using Apollo GraphQL HOC pattern with an existing 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 是否有更好的实践？

谢谢！

【参考方案1】：

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

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

...它应该可以工作