Apollo GraphQL Client (ReactJS) - 在 graphql query中访问 props

Question

我有一个组件，显示绑定到特定类型实体的所有用户。该组件使用 apollo graphql 撰写帮助程序呈现。组件的导出如下所示：

export const UsersContainer = compose(
connect(mapStateToProps, mapDispatchToProps),
graphql(gql`
query manager($id: Int!) {
manager(id: $id) {
users {
id
firstName
lastName
email
username
}
}
}`, {
options: (props) => ({
variables: {
id: props.currentOrg.org.id
}
}),
})
)(Users);

这一切都很好用。我面临的问题是我想使这个组件动态化，以便它适用于所有实体类型(即。manager、client、vendor(。因此，在上面的查询中：query manager($id: Int!)将更改为：query client($id: Int!)，依此类推。

如何访问 redux 存储以提取数据以动态构建gql查询？所有数据都在商店中可用。我只需要一种以可以动态构建 gql 查询的方式访问 props 的方法。

Answer 1

您实际上需要定义三个不同的查询，然后在它们之间有条件地切换。问题是 HOCgraphql没有提供一种简单的方法来从 props 中派生要使用的查询。使用新的Query组件，这可能是最容易做到的，它使用渲染道具模式：

const QueryA = gql`query { # blah }`
const QueryB = gql`query { # blah }`
const WrapperComponent = props => {
const query = props.foo ? QueryA: QueryB
return (
<Query query={query}>
{({loading, error, data}) => (
<YourComponent/>
)}
</Query>
)
}
const mapStateToProps = ({ foo }) => ({ foo })
export default connect(mapStateToProps)(WrapperComponent)

使用 HOC，您可以执行以下操作：

const QueryA = gql`query { # blah }`
const QueryB = gql`query { # blah }`
const QueryAComponent = graphql(QueryA)(YourComponent)
const QueryBComponent = graphql(QueryB)(YourComponent)
const WrapperComponent = props => (
props.foo
? QueryAComponent
: QueryBComponent
)
const mapStateToProps = ({ foo }) => ({ foo })
export default connect(mapStateToProps)(WrapperComponent)

如果要采用 HOC 路线，还可以使用 recompose 的分支之类的东西来有条件地渲染组件。