Question

我有一个组件，显示绑定到特定类型实体的所有用户。该组件使用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查询。

Answer 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路线，您还可以使用重构branch之类的东西来有条件地渲染组件。

Apollo GraphQL客户端（ReactJS） - 在graphql查询中访问道具

1 个答案: