使用 Vue Apollo 建立 Reactive Parameter Query | 點燈坊

實務上有時我們會將 GraphQL Query 的 Argument 綁定到 Vue 的 data，讓 data 一改變就自動重新執行 GraphQL Query，此時必須使用 Vue Apollo 所提供的 Reactive Parameter Query。

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">
    <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
  })

  return { query, variables }
};

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

23 行

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

若 argument 要 reactive，則 variables 要由 object 改成 function 回傳 object。

Conclusion

• ECMAScript 常看到同一個 argument 有兩用，可以傳入 primitive / object，也可傳入 callback，如此設計可盡量減少 API 個數，對 user 比較友善
• Query 的 variables 若為 object，可自動 data binding，但沒有 reactive；variables 若為 function，除了自動 data binding 外，還支援 reactive

Reference

Vue Apollo, Reactive parameters