Передача генериков в компонент, завернутый в HOC

Question

У меня есть реализация компонента ApolloGraphQL Query.

При использовании клиентского компонента Apollo Query вводить можно так:

import * as ApolloTypes from './__generated__/GetSubreddit';

 <Query<ApolloTypes.GetSubreddit, ApolloTypes.GetSubredditVariables>
      query={GET_SUBREDDIT}
      variables={{ name: selectedSubreddit }}
    >
...
</Query>

У меня есть свой собственный компонент, который реализует компонент Apollo Query. Помимо прочего, он добавляет несколько заголовков к каждому запросу. Я хочу, чтобы можно было передавать его типам так же, как и в обычном компоненте запроса, что легко сделать без компонента connect более высокого порядка из "response-redux". Я не могу понять, как передать дженерики через HOC. Любой совет?

const GraphqlQuery = <T, TVariables = OperationVariables>(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,
});
export default connect(
  mapStateToProps,
  {}
)(GraphqlQuery);

Answer 1

Есть 2 варианта, которые я могу придумать, чтобы достичь этого:

1. Примените экспорт :

В вашемна случай, если это будет немного сложнее, но что-то вроде этого может работать, если HOC не требует никаких реквизитов.Если это произойдет, вам придется изменить тип, который вы разыгрываете.

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

factory

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 ... />

Определенно есть компромиссы для каждого.