如何将两个依赖的 GraphQL 查询与“compose”结合起来？

Posted 2023-03-08

【中文标题】如何将两个依赖的 GraphQL 查询与“compose”结合起来？

【英文标题】：How to combine two dependent GraphQL queries with 'compose'?

【发布时间】：2019-05-07 23:01:10

【问题描述】：

解决了！

我正在尝试组合两个相关的 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)

还有我的渲染（）：

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

【问题讨论】：

你试过this解决方案

感谢您的回复！是的，我就是从那里来的。但是我在第二个查询中的变量始终未定义。我得到了具有所有功能的查询对象，但数据未定义。在您的链接中，变量是用“firstQuery.data.someQuery.someValue”定义的，我应该“调用”查询还是“list.data.account.lists.edges[0].id”有权访问数据？

是的，尝试传递正确的数据，即； list.data.account.lists.edges[0].id。查看进行的网络调用，检查是否执行了两个查询及其顺序。但更好的解决方案是为第二个查询创建一个单独的组件

另外this 也可能有帮助。实际上，您可能没有以正确的格式/层次结构访问数据。

抱歉看到了您的架构，因此您应该以 listId.account.lists.edges[0].id && 仅检查 listId 值来访问数据

【参考方案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 // <--
    
  )
)

【讨论】：

完美！谢谢你的帮助！我想我对之后的重命名和访问感到困惑。第二个警告是，我认为第二个查询应该在我的 compose 函数中列为第一个，因为 Doc 声明它被称为 flowRight()，但第一个查询必须高于第二个，否则第二个不会知道'listId'。混乱......无论如何，这很好，现在正在工作！