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

【问题标题】：Can't Programatically fetch data with Apollo Client无法使用 Apollo 客户端以编程方式获取数据
【发布时间】：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 组件很清楚），在我目前的理解中是相当的很傻，但很可能是我搞砸了。

感谢任何见解。

【问题讨论】：

标签： apollo react-apollo apollo-client

【解决方案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 方式。感谢您的澄清。