如何在我的 vue 模板脚本中有条件地调用 apollo 客户端？

Posted 2023-03-10

【中文标题】如何在我的 vue 模板脚本中有条件地调用 apollo 客户端？

【英文标题】：How can I call apollo client conditionally in my vue template script?

【发布时间】：2020-01-28 03:08:32

【问题描述】：

我在我的脚本标签中的模板文件中向 apollo 客户端传递了一个查询，但我不想每次都这样做。相反，我想在道具中传递一个布尔值，然后根据该布尔值运行（或不运行）查询。

<template>
...
</template>

<script>
  import 
    MY_QUERY
   from 'util/queries';

  props: 
    productId: 
      type: String,
      default: '',
    ,
    suppressGraphQlQuery: 
      type: boolean,
      default: false,
    
  ,

  data() 
    return 
      relatedProducts: [],
      loading: 0,
      preloading: true,
    ;
  ,

  apollo: 
    relatedProducts: 
      query: MY_QUERY,
      variables() 
        return 
          id: this.productId,
        ;
      ,
    ,
  ,

</script>

我希望能够利用 suppressGraphQlQuery 属性不调用 apollo 客户端，但不知道该怎么做。当我的 prop === true 时，是否可以不运行查询？ 提前谢谢你。

【参考方案1】：

你可以skip这样的查询：

export default 
  props: 
    skipQuery: 
      type: Boolean,
      default: false,
    ,
  ,
  apollo: 
    relatedProducts: 
      query: MY_QUERY,
      variables() 
        return 
          id: this.productId,
        ;
      ,
      skip() 
        return this.skipQuery;
      ,
    ,
  ,
;