时间戳

首页 > 解决方案 > 带有查询的可重用类型化 react-apollo 组件

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

问题描述

可以创建类型化的<Query> <Mutation>或<Subscription> 通过扩展相应的类：

class MyQuery extends Query<TData, TVariables> { }

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

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

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

标签： typescriptreact-apollo

解决方案

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

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-apolloTypeScript 的每个人都想要这个，所以你可以建议将此助手添加到react-apollo.

推荐阅读