0

我一直在阅读并为联系人输入字段提出了查询设置。我想避免在组件启动时使用空输入运行此查询。我也许可以通过计算方法手动运行查询,但是有没有一种简单的方法可以防止这种情况发生?

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

我想我不了解预取,或者它是否适用于这里?

4

2 回答 2

5

您应该使用该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

于 2019-05-04T12:57:05.443 回答
0

阿波罗客户端

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

仅当 param1 不为空时才会触发此查询。

于 2020-01-27T15:17:38.727 回答