如果输入变量为空,则防止 vue-apollo 中的 graphql 查询
Prevent graphql query in vue-apollo if input variable is null
我一直在做一些阅读,并提出了一个联系人输入字段的查询设置。我想避免在组件启动时使用空输入 运行ning 此查询。我可以通过计算方法手动 运行 查询,但是有没有一种简单的方法可以防止这种情况发生?
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
选项,如 the docs:
所示
apollo: {
search: {
query: () => contactSearchGQL,
variables() {
return {
searchText: this.searchText,
};
},
skip() {
return !this.searchText;
},
...
},
},
任何时候 searchText
更新,skip
都会重新计算——如果计算结果为 false,则查询将为 运行。如果您需要在组件的其他地方控制此逻辑,也可以直接设置跳过 属性:
this.$apollo.queries.search.skip = true
prefetch
选项特定于 SSR。默认情况下,vue-apollo
将预取服务器端呈现组件中的所有查询。将 prefetch
设置为 false 会针对特定查询禁用此功能,这意味着特定查询不会 运行 直到组件呈现在客户端上。这并不意味着查询被跳过。有关 vue-apollo
中 SSR 的更多详细信息,请参阅 here。
Apollo 客户端
const { loading, error, data } = useQuery(GET_SOME_DATA_QUERY, {
variables: { param1 },
skip: param1 === '',
})
仅当 param1 不为空时才会触发此查询。
我一直在做一些阅读,并提出了一个联系人输入字段的查询设置。我想避免在组件启动时使用空输入 运行ning 此查询。我可以通过计算方法手动 运行 查询,但是有没有一种简单的方法可以防止这种情况发生?
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
选项,如 the docs:
apollo: {
search: {
query: () => contactSearchGQL,
variables() {
return {
searchText: this.searchText,
};
},
skip() {
return !this.searchText;
},
...
},
},
任何时候 searchText
更新,skip
都会重新计算——如果计算结果为 false,则查询将为 运行。如果您需要在组件的其他地方控制此逻辑,也可以直接设置跳过 属性:
this.$apollo.queries.search.skip = true
prefetch
选项特定于 SSR。默认情况下,vue-apollo
将预取服务器端呈现组件中的所有查询。将 prefetch
设置为 false 会针对特定查询禁用此功能,这意味着特定查询不会 运行 直到组件呈现在客户端上。这并不意味着查询被跳过。有关 vue-apollo
中 SSR 的更多详细信息,请参阅 here。
Apollo 客户端
const { loading, error, data } = useQuery(GET_SOME_DATA_QUERY, {
variables: { param1 },
skip: param1 === '',
})
仅当 param1 不为空时才会触发此查询。