Question

我有一个ApolloGraphQL查询组件的实现。

使用Apollo客户端查询组件时，可以这样传递输入：

i=3

我有自己的组件，该组件实现了Apollo Query组件。除其他外，它向每个查询添加一些标头。我希望能够以与普通查询组件相同的方式传递其类型，而无需“ react-redux”中的import * as ApolloTypes from './__generated__/GetSubreddit'; <Query<ApolloTypes.GetSubreddit, ApolloTypes.GetSubredditVariables> query={GET_SUBREDDIT} variables={{ name: selectedSubreddit }} > ... </Query>高阶组件，这很容易做到。我不知道如何通过HOC传递泛型。有什么建议吗？

connect

Answer 1

我可以想到有两种选择可以实现这一目标：

Cast the export：

在您的情况下，这可能会有些棘手，但是只要HOC不需要任何道具，类似的东西就可能起作用。如果是这样，则必须更改要投射的类型。

export default connect(
  mapStateToProps,
  {}
)(GraphqlQuery) as typeof GraphqlQuery

工厂

export const createGraphqlQuery = <T, TVariables = OperationVariables>() => {
  const GraphqlQuery = (props: PropsType) => {
    const { query, variables, children, user, ...rest } = props;
    if (!user) return null;

    return (
      <Query<T, TVariables>
        query={query}
        variables={variables}
        context={{
          headers: {
            "X-User-Id": user.id,
          },
        }}
        {...rest}
      >
      ...
      </Query>
    );
  };


  const mapStateToProps = ({ user }: { user: IUserState }) => ({
    user,
  });
  return connect(
    mapStateToProps,
    {}
  )(GraphqlQuery)
};

用法：

const GraphqlQuery = createGraphqlQuery<{}, {}>();

<GraphqlQuery ... />

每个都有一定的权衡。

将泛型传递给包装在HOC中的组件

1 个答案: