在Vue.js中使用vue-apollo进行GraphQL查询时,如果输入变量为空,可以通过以下方式阻止查询:
import { gql } from 'apollo-boost';
import { ApolloQuery } from 'vue-apollo';
export default {
name: 'MyComponent',
apollo: {
myQuery: {
query: gql`
query MyQuery($input: String!) {
// GraphQL查询语句
}
`,
variables() {
if (this.input) {
return { input: this.input };
}
// 如果输入变量为空,则返回空对象,阻止查询
return {};
},
},
},
data() {
return {
input: '',
};
},
};
在上述代码中,variables
方法会根据input
的值返回相应的变量对象。如果input
为空,则返回空对象,从而阻止查询。
watch
属性监听input
变量的变化,在变量为空时取消查询。例如:import { gql } from 'apollo-boost';
import { ApolloQuery } from 'vue-apollo';
export default {
name: 'MyComponent',
apollo: {
myQuery: {
query: gql`
query MyQuery($input: String!) {
// GraphQL查询语句
}
`,
variables() {
return { input: this.input };
},
},
},
data() {
return {
input: '',
};
},
watch: {
input(newInput) {
if (!newInput) {
this.$apollo.queries.myQuery.skip = true; // 取消查询
} else {
this.$apollo.queries.myQuery.skip = false; // 恢复查询
}
},
},
};
在上述代码中,通过监听input
变量的变化,当input
为空时,将skip
属性设置为true
,从而取消查询。当input
有值时,将skip
属性设置为false
,恢复查询。
这样,无论是通过条件语句还是监听变量变化,都可以在输入变量为空时阻止vue-apollo中的GraphQL查询。
领取专属 10元无门槛券
手把手带您无忧上云