已解决！

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'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的道具（如果传递突变则为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 // <--
    }
  })
})

如何将两个相关的GraphQL查询与“ compose”组合？

已解决！

解决方案

1 个答案: