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从不记录任何内容，但是确实显示了变量ready文本。

我发现使用Query组件的文档非常清楚，但是每个选项的含义都不明确。我觉得我缺少什么。

我还担心Apollo似乎不尊重职责分离，显然将数据和表示形式合并为一个职责（在Query组件中很明显），据我目前的理解真是愚蠢，但很可能我在搞砸。

任何见识都会受到赞赏。

Answer 1

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

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

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

然后，您可以使用客户端实例可用的任何方法，包括query和mutation，这两种方法都返回一个Promise，该Promise解析为一个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以编程方式获取数据

1 个答案: