Apollo GraphQL React-如何点击查询

reactjs React.js

飞云L

2020-03-19

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

第2396篇《Apollo GraphQL React-如何点击查询》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
老丝小卤蛋 2020.03.19

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

client.query

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

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

withApollo(MyComponent)

另外，您也可以使用ApolloConsumer获取客户端：

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

或useApolloClient挂钩：

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

useLazyQuery

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

const MyComponent = () => {
  const [runQuery, { called, loading, data }] = useLazyQuery(gql`...`)
  const handleClick = () => runQuery({ variables: { ... } })
  ...
}
Gil蛋蛋Tony 2020.03.19

您可以通过使用withApollo高阶组件传递对Apollo Client的引用来做到这一点，如此处所述：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);

出于好奇，对单击事件运行查询的目的是什么？也许有更好的方法可以实现基本目标。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android