vuejs2 - 如果输入变量为空,则阻止 vue-apollo 中的 graphql 查询
问题描述
我一直在阅读并为联系人输入字段提出了查询设置。我想避免在组件启动时使用空输入运行此查询。我也许可以通过计算方法手动运行查询,但是有没有一种简单的方法可以防止这种情况发生?
apollo: {
search: {
query: () => contactSearchGQL,
variables() {
return {
searchText: this.searchText,
};
},
debounce: 300,
update(data) {
console.log("received data: " + JSON.stringify(data));
},
result({ data, loading, networkStatus }) {
console.log("We got some result!")
},
error(error) {
console.error('We\'ve got an error!', error)
},
prefetch() {
console.log("contact search, in prefetch");
if ( this.searchText == null ) return false;
return true;
},
},
},
我想我不了解预取,或者它是否适用于这里?
解决方案
您应该使用该skip
选项,如文档中所示:
apollo: {
search: {
query: () => contactSearchGQL,
variables() {
return {
searchText: this.searchText,
};
},
skip() {
return !this.searchText;
},
...
},
},
任何时候searchText
更新,skip
都会重新评估——如果评估为假,则将运行查询。如果您需要在组件的其他地方控制此逻辑,也可以直接设置 skip 属性:
this.$apollo.queries.search.skip = true
该prefetch
选项特定于 SSR。默认情况下,vue-apollo
将预取服务器端渲染组件中的所有查询。设置prefetch
为 false 会为特定查询禁用此功能,这意味着特定查询在组件呈现在客户端上之前不会运行。这并不意味着跳过查询。有关 SSR 的更多详细信息,请参见此处vue-apollo
。
推荐阅读
- python - 从多个连续动作中选择 1 个动作
- wso2 - 更改 WSO2 API Manager v3.0.0 的 UI
- android - Xamarin:无法解析引用:`System.Web`,由 [引用项目] 引用
- php - PHP : mail() - 发送多个主题
- compiler-construction - 是否可以切换到另一个规则
- r - 分隔不一致的分隔名称
- python - 使用 lxml 查找隐藏元素
- javascript - 如何增加谷歌地图自动完成搜索下拉文本的字体大小?
- python - 与作为函数的装饰器相比,装饰器作为类的限制
- typescript - InitialState 已设置,但减速器未执行。减少不改变商店