Apollo GraphQL Client (ReactJS) - 在 graphql 查询中访问 props答案

【问题标题】：Apollo GraphQL Client (ReactJS) - Accessing props in graphql queryApollo GraphQL Client (ReactJS) - 在 graphql 查询中访问 props
【发布时间】：2018-11-06 05:59:08
【问题描述】：

我有一个组件可以显示绑定到特定类型实体的所有用户。该组件使用 apollo graphql compose 助手进行渲染。组件的导出如下所示：

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 查询的方式来访问道具。

【问题讨论】：

标签： reactjs graphql apollo-client

【解决方案1】：

您实际上需要定义三个不同的查询，然后有条件地在它们之间切换。问题是graphql HOC 没有提供一种简单的方法来从 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 的 branch 来有条件地渲染组件。

【讨论】：

这就是我所需要的。谢谢！