如何将两个依赖的 GraphQL 查询与"组合"结合起来？

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((切换为与AbsoluteSi的评论链接内联

解决方案

在Daniel Rearden和AbsoluteSi的提示和帮助下，我实现了以下解决方案：

更改了组合((：

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)

我的渲染图((：

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

Answer 1

使用graphqlHOC时，默认情况下，包装的组件会接收一个名为data的道具(如果传入突变，则为mutate(。给定类似的查询

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

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

this.props.listId.account

这意味着compose内部的第二个HOC应该看起来更像这样：

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