How can I call apollo client conditionally in my vue template script?

Question

I pass a query to apollo client in my script tag, in my template file but I don't want to do it every time. Rather, I'd like to pass a boolean in a prop and then run the query (or not) based on the boolean.

<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>

I want to be able to utilize suppressGraphQlQuery prop not to call the apollo client, but not sure how to do it. Is it possible to not to run the query when my prop === true? Thank you in advance.

Answer 1

You can skip a query like this:

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