如果输入变量为空，则阻止vue-apollo中的graphql查询

Question

我已经做了一些阅读，并提出了一个联系人输入字段的查询设置。我希望避免在组件启动时使用空输入运行此查询。也许我可以通过计算方法手动运行查询，但是有没有简单的方法来防止这种情况呢？

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;
        },
    },
},

我想我不理解预取的一些东西，或者它是否适用于这里？

Answer 1

为此，您应该使用skip选项，如the docs所示

apollo: {
  search: { 
    query: () => contactSearchGQL,
    variables() { 
      return { 
        searchText: this.searchText, 
      };
    },
    skip() {
      return !this.searchText;
    },
    ...
  },
},

每当searchText更新时，skip都会重新求值--如果计算结果为false，则会运行查询。如果需要在组件中的其他位置控制此逻辑，也可以直接设置skip属性：

this.$apollo.queries.search.skip = true

SSR选项特定于prefetch。默认情况下，vue-apollo将预取服务器端呈现组件中的所有查询。将prefetch设置为false将禁用特定查询的此功能，这意味着在客户端呈现组件之前，特定查询将不会运行。这并不意味着跳过了查询。有关vue-apollo中单点登录的更多详细信息，请参阅here。

Answer 2

Apollo客户端

const { loading, error, data } = useQuery(GET_SOME_DATA_QUERY, {
    variables: { param1 },
    skip: param1 === '',
  })

只有当param1不为空时，才会触发此查询。