代码之家 › 专栏 › 技术社区 › Tom Fenech

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

react-apollo typescript

Tom Fenech · 技术社区 · 6 年前

可以创建 <Query> <Mutation> <Subscription> by extending the respective class :

class MyQuery extends Query<TData, TVariables> { }

但是,在这种情况下,我必须提供 query 每次我使用 <MyQuery> :

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

有没有一个好的方法来“烘焙”查询,以便 <MyQuery> 可重复使用,无需供应 query={...} ?

1 回复 | 直到 6 年前

Matt McCutchen 6 年前

我猜您可以使用一个小包装组件:

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 ,所以如果这不起作用,让我知道出了什么问题,我可能会想出其他的办法。在我看来 反应阿波罗 如果是TypeScript,那么您可以建议将此助手添加到 .