无法使用 Apollo Client 以编程方式获取数据

Question

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

我想获取数据的常见用例如何，比方说，更新我显然不需要呈现 JSX 的状态，我只想运行 Javascript代码。

以下面的代码片段为例

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 组件很明显），这在我的目前的理解很愚蠢，但很可能我搞砸了。

如有任何见解，我们将不胜感激。

Answer 1

只要您配置并包含一个 ApolloProvider at the top of your component tree, you can get your query instance using either the withApollo HOC, or the ApolloConsumer:

const MyComponent = ({ client }) => {
 // use it!
}
withApollo(MyComponent)

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

然后您可以使用客户端实例可用的任何方法，包括 query 和 mutation，这两个 return 一个解析为 ApolloQueryResult 包含 data 和 errors 的对象。可以在 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
  }
}

无法使用 Apollo Client 以编程方式获取数据

Can't Programatically fetch data with Apollo Client

apollo

react-apollo

apollo-client