Apollo GraphQL React-如何在单击时进行查询？

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

38308 次浏览
小开
最佳答案

您可以通过使用 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);

出于好奇，对单击事件运行查询的目的是什么？也许有一个更好的方法来实现潜在的目标。

小开

在3.0版本中，现在有两种方法可以实现这一点。

client.query

第一种方法是调用 ApolloClient的 query方法。这将返回一个将解析为查询结果的  。您可以通过使用 和阿波罗一起 HOC 获得对客户端的引用:

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


withApollo(MyComponent)

或者，您也可以使用 阿波罗消费者来获得客户端:

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

或 UseApolloClient 使用 ApolloClient挂钩:

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

useLazyQuery

第二种方法是使用 使用 LazyQuery挂钩:

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

提交答案