javascript - 如何将两个依赖的 GraphQL 查询与 'compose' 结合起来？

Question

已解决!

我正在尝试合并两个相关的 GraphQL 查询。

第一个应该获得一个 ID，第二个应该使用那个 ID。我读到 compose 的行为类似于 flowRight()，但无论我以什么顺序放置查询，如果 queryId 低于 queryDetails，queryDetail 总是被跳过(如预期的那样)。无论我如何将我的代码放在一起，该变量都是未定义的。

import { graphql, compose } from 'react-apollo'
import gql from 'graphql-tag'

class Home extends Component {
  constructor(props) {
    super(props)
    console.log("Where's my data?")
    console.log(props)
  }

  render() {
    return(
      <div />
    )
  }
}

export const queryIdConst = gql`
  query IdQuery {
    account(name:"SuperAccount") 
    {
      lists {
        edges {
          id
        }
      }
    } 
  }
`

export const queryDataConst = gql`
  query DataQuery($id: ID!) {
    account(name:"SuperAccount") 
    {
      list(id: $id) {
        displayTitle
      }
    } 
  }
`

export default compose(
  graphql(queryIdConst, {
    name: 'listId',
  }),
  graphql(queryDataConst, { 
    name: 'data',
    skip: ({ listId }) => !listId.data,
    options: ({ listId }) => ({
      variables: {
        id: list.data.account.lists.edges[0].id
      }
    })
  })
)(Home)

我已经尝试更改组合函数的顺序，但无论如何这都行不通，正如我预期的那样。

感谢您的帮助!

编辑:将 compose() 中的两个 graphql() 切换为内联 AbsoluteSith's评论 link

解决方案

在 Daniel Rearden 的提示和帮助下和 AbsoluteSith我实现了以下解决方案:

更改了 compose():

export default compose(
  graphql(queryIdConst, {
    name: 'listId',
  }),
  graphql(queryDataConst, { 
    name: 'dataHome', // changed to 'dataHome' to avoid confusion
    skip: ({ listId }) => !listId.account,
    options: ({ listId }) => ({
      variables: {
        id: listId.account.lists.edges[0].id
      }
    })
  })
)(Home)

还有我的 render():

return(
  <div>
    { dataHome && !dataHome.loading && 
      <div>{dataHome.account.list.displayTitle}</div> 
    }
  </div>
)

Answer 1

当使用 graphql HOC 时，默认情况下，被包装的组件会收到一个名为 data 的 Prop (如果传入一个突变，则为 mutate) .给定一个查询

query IdQuery {
  account(name:"SuperAccount") {
    lists {
      edges {
        id
      }
    }
  } 
}

查询加载后，查询结果在 this.props.data.account 下可用。当您使用 name 配置选项时，您是在告诉 HOC 使用 data 以外的其他名称作为 prop 名称。因此，如果您将名称设置为 listId，那么您的查询结果将在

this.props.listId.account

这意味着 compose 中的第二个 HOC 应该看起来更像这样:

graphql(queryDataConst, { 
  skip: ({ listId }) => !listId.account, // <--
  options: ({ listId }) => ({
    variables: {
      id: listId.account.lists.edges[0].id // <--
    }
  })
})