带有查询的可重用类型化 react-apollo 组件

【问题标题】：Reusable typed react-apollo component with query带有查询的可重用类型化 react-apollo 组件
【发布时间】：2018-08-25 10:26:06
【问题描述】：

可以创建类型化的<Query> <Mutation> 或<Subscription> by extending the respective class：

class MyQuery extends Query<TData, TVariables> { }

但是，在这种情况下，我每次使用 <MyQuery> 时都必须提供 query：

<MyQuery query={queries.MyQuery}> // etc.

有没有一种很好的方法来“嵌入”查询，以便 <MyQuery> 可以重复使用而无需提供 query={...}？

【问题讨论】：

标签： typescript react-apollo

【解决方案1】：

我猜你可以使用一个小的包装组件：

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
function cannedQuery<TData, TVariables>(query: DocumentNode) {
  return (props: Omit<QueryProps<TData, TVariables>, "query">) =>
    <Query query={query} {...props}/>;
}

const MyQuery = cannedQuery<TData, TVariables>(gql`...`);

我不熟悉react-apollo，所以如果这不起作用，请告诉我出了什么问题，我可能会想出别的办法。在我看来，使用 react-apollo 和 TypeScript 的每个人都想要这个，所以你可以建议将这个助手添加到 react-apollo。

【讨论】：