如何将两个依赖的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函数的顺序,但无论如何这不起作用,因为我预计它会起作用.

谢谢你的帮助!

编辑:在compose()中切换两个graphql()以与AbsoluteSith的注释链接内联

解

在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

当使用graphqlHOC 时，默认情况下，包装的组件会接收一个名为的 prop data（或者mutate如果传入一个突变）。给定一个像这样的查询

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

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

this.props.listId.account

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

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