无法使用 Apollo 客户端以编程方式获取数据

Posted 2023-03-10

【中文标题】无法使用 Apollo 客户端以编程方式获取数据

【英文标题】：Can't Programatically fetch data with Apollo Client

【发布时间】：2019-09-16 04:51:21

【问题描述】：

关于 Apollo Client 和 GraphQL 查询的大部分信息都是关于获取数据并立即渲染的。

对于我想要获取数据以更新状态的常见用例，我显然不需要呈现 JSX，我只想运行 javascript 代码。

以如下代码sn-p为例

onRefChange (formValues) 

    let  project, ref  = formValues
    let projectFound = find(this.state.projects, (o) =>  return o.id === project.value  )

    let variables = 
      slug: projectFound.slug, ref: parseInt(ref)
    
    console.info('variables ready', variables)
    return (
      <Query query=RESOLVE_REF variables=variables>
         ( data, error ) => 
          console.info('data response', data)
          console.info('error response', error)
          return data
        
      </Query>
    )
  

Apollo 强迫我使用 Query 组件来执行查询，即使我不想渲染任何东西。那些console.info 也从不记录任何东西，但变量就绪文本确实出现了。

我发现文档对使用Query 组件非常清楚，但对每个不同的选项都模糊不清。我觉得我错过了什么。

我还担心 Apollo 似乎不尊重职责分离，显然将数据和表示合并为单一职责（Query 组件很清楚），在我目前的理解中是相当的很傻，但很可能是我搞砸了。

感谢任何见解。

【参考方案1】：

只要您在组件树的顶部配置并包含ApolloProvider，就可以使用withApollo HOC 或ApolloConsumer 获取查询实例：

const MyComponent = ( client ) => 
 // use it!

withApollo(MyComponent)

<ApolloConsumer>
  client => (
    // use it!
  )
</ApolloConsumer>

然后，您可以使用客户端实例可用的任何方法，包括 query 和 mutation，这两个方法都返回解析为 ApolloQueryResult 对象的 Promise，其中包括 data 和 @987654330 @。可以在here 找到客户端 API 的完整文档。您的代码将如下所示：

async onRefChange (formValues) 
  let  project, ref  = formValues
  let projectFound = find(this.state.projects, (o) =>  return o.id === project.value  )

  let variables = 
    slug: projectFound.slug, ref: parseInt(ref)
  
  try 
    const  data  = await this.props.client(RESOLVE_REF,  variables )
   catch (e) 
    // Handle errors
  

【讨论】：

最终选择了 ApolloConsumer 方式。感谢您的澄清。