使用 Vue Apollo 建立 Variable | 點燈坊

GraphQL 的 Query 支援 Argument，而 Argument 在 Vue Apollo 亦可使用 Variable 提供。

Version

macOS Catalina 10.15
WebStorm 2019.2.3
Node 10.16.3
Vue CLI 3.12.0
Vue 2.6.10
Vue Apollo 3.0.0-beta.11

Vue Apollo

src/App.vue

<template>
  <div>
    <ul>
      <li v-for="(item, index) in books" :key="index">
        {{ item.title }}：{{ item.category }} | {{ item.status }}
      </li>
    </ul>
  </div>
</template>

<script>
import gql from 'graphql-tag'

let books = {
  query: gql`query ($category: BookCategory!, $status: BookStatus!) {
    books(category: $category, status: $status) {
      title
      category
      status
    }
  }`,
  variables: {
    category: 'FP',
    status: 'AVAILABLE'
  }
}

export default {
  name: 'app',
  apollo: {
    books
  }
}
</script>

28 行

export default {
  name: 'app',
  apollo: {
    books
  }
}

在 apollo property 下宣告 books query。

14 行

let books = {
  query: gql`query ($category: BookCategory!, $status: BookStatus!) {
    books(category: $category, status: $status) {
      title
      category
      status
    }
  }`,
  variables: {
    category: 'FP',
    status: 'AVAILABLE'
  }
}

若要對 argument 使用 variable，則 books data 要改用 object，不能直接是 GraphQL query。

其中 query property 則使用與 GraphQL Playground 相同的 GraphQL，而 varaibles property 則如同 GraphQL Playground 下方以 object 定義各 variable 值。

Conclusion

• Vue Apollo 提供對 variable 支援，只要在 variables property 下定義 variable 即可

Reference

Vue Apollo, Query with parameters