使用 Skip Query 避免 Smart Query 一開始就執行 | 點燈坊

Vue Apollo 的 Smart Query 以 Declarative 本意很好，且不需 mounted hooks 就可自動執行，但若需求不希望 Component 一開始就執行 GraphQL 呢 ?

Version

macOS Catalina 10.15
WebStorm 2019.2.3
Node 10.16.3
Vue CLI 4.0.5
Vue 2.6.10
Vue-apollo 3.0.0-beta.11

Vue Apollo

src/App.vue

<template>
  <div>
    <input type="text" v-model="category">
    <button @click="onSubmit">Submit</button>
    <ul>
      <li v-for="(item, index) in books" :key="index">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import gql from 'graphql-tag'

let books = function() {
  let query = gql`
    query ($category: String!) {
      books(category: $category) {
        title
      }
   }`

  let variables = () => ({
    category: this.category
  })

  let skip = true

  return { query, variables, skip }
}

let onSubmit = function() {
  this.$apollo.queries.books.skip = false
}

export default {
  name: 'app',
  data: () => ({
    category: '',
    books: [],
  }),
  apollo: {
    books
  },
  methods: {
    onSubmit
  },
}
</script>

28 行

let skip = true;

return { query, variables, skip }

在 books() return 的 object 新增 skip property，且其 value 為 true，則 smart query 一開始就不會執行。

33 行

let onSubmit = function() {
  this.$apollo.queries.books.skip = false;
}

在 onSubmit() handler 下透過 this.$apollo.queries 存取 books query，並設定 skip 為 false 正式執行 books query。

一開始下方沒有結果，表示 GraphQL 沒有執行。

輸入 FP 按下 Submit，執行 GraphQL 並顯示結果。

Conclusion

• 一般此需求會使用 dynamic query，若要使用 smart query 也行，只要控制其 skip property 即可

Reference

Vue Apollo, Skipping the query