如何以编程方式执行 useLazyQuery？答案

【问题标题】：How to execute useLazyQuery programmatically?如何以编程方式执行 useLazyQuery？
【发布时间】：2020-02-11 06:43:22
【问题描述】：

好的，我了解 React Apollo 的 useLazyQuery 仅在调用其第一个参数时执行。但我很失望地得知之后它的行为就像useQuery。

那么：如何控制useLazyQuery 何时触发？我的用例非常简单：我有一个“自动完成”搜索栏。我不想查询输入何时为空。我可以在第一次“空虚”时轻松做到这一点，但是当用户删除整个输入时，我找不到禁用查询的方法。

【问题讨论】：

如果您只需要在输入为空字符串时不运行查询，我想useQuery 就足够了。您可以将skip参数设置为R.isEmpty(str)，以在字符串为空时跳过查询。
这也行！

标签： apollo react-apollo

【解决方案1】：

我要继续偷@Daniel 的答案:)

以下代码实现了目标

const

skip = R.complement (H.isNotNilOrEmpty) (str),

{data} = useQuery (QUERY_SEARCH, {variables: {str}, skip}),

很抱歉使用未定义的变量 R 和 H，但希望方法名称是描述性的

【讨论】：

【解决方案2】：

好的，甚至在我发布之前就找到了答案:)

看起来如果您的查询有变量，Apollo 客户端在您提供变量之前不会运行它。所以对于我的用例：

const [execQuery, {data}] = useLazyQuery (QUERY_SEARCH)
useEffect (() => {
  str && (() => {
    execQuery ({variables: {str}})
  })()
}, [str])

const results = R.isEmpty (str) ? null : data

【讨论】：

因此可以改进文档（可以说是一个好方法）。执行后，useLazyQuery 的行为类似于 useQuery if 变量已随对 useLazyQuery 的调用提供。否则，您可以随意控制执行。