可重复使用的类型化 react-apollo 组件与查询

Question

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

class MyQuery extends Query<TData, TVariables> { }

但是，在这种情况下，我每次使用 <MyQuery>:

时都必须提供 query

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

是否有一种很好的方法来 "bake in" 查询，以便 <MyQuery> 可以重复使用而无需提供 query={...}？

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

可重复使用的类型化 react-apollo 组件与查询

Reusable typed react-apollo component with query

typescript

react-apollo