Apollo GraphQL React - 如何查询点击？

Question

在Apollo React文档http://dev.apollodata.com/react/queries.html#basics中，有一些示例在显示组件时自动获取，但我想在单击按钮时运行查询。我看到一个示例，当单击一个按钮时“重新”获取查询，但我不希望它最初查询。我看到有一种方法可以调用突变，但是你如何调用查询呢？

Answer 1

您可以通过使用withApollo更高阶组件传递对Apollo客户端的引用来完成此操作，如下所示：https://www.apollographql.com/docs/react/api/react-apollo.html#withApollo

然后，您可以在传入的对象上调用client.query，如下所示：

class MyComponent extends React.Component {
  runQuery() {
    this.props.client.query({
      query: gql`...`,
      variables: { ... },
    });
  }

  render() { ... }
}

withApollo(MyComponent);

出于好奇，在点击事件上运行查询的目标是什么？也许有更好的方法来实现基本目标。

Answer 2

从3.0版开始，您现在可以通过两种方式执行此操作。

client.query

第一种方法是调用ApolloClient的{​​{1}}方法。这将返回一个Promise，它将解决查询的结果。您可以使用withApollo HOC获得对客户端的引用：

query

或者，您也可以使用ApolloConsumer获取客户端：

class MyComponent extends React.Component {
  handleClick() {
    const { data } = await this.props.client.query({
      query: gql`...`,
      variables: { ... },
    })
    ...
  }
  ...
}

withApollo(MyComponent)

或useApolloClient钩子：

const MyComponent = () => (
  <ApolloConsumer>
    {client => {
      ...
    }
  </ApolloConsumer>
)

const MyComponent = () => { const client = useApolloClient() ... }

第二种方法是使用useLazyQuery钩子：

useLazyQuery