vue-apollo query 动态传参

第一种： 规规矩矩按照数据库名称来处理

<!--首页-->
<template>
  <div>
    {{card.title}}
    <!-- <div v-for="(blog,index) in cards" :key="index">{{blog.title}}</div> -->
  </div>
</template>
<script>
import gql from 'graphql-tag'
export default {
  data() {
    return {
      iidd : 1,
      card: {}
    }
  },
  apollo: {
    card: {
      query: gql`query($id:ID!) {
        card (id:$id){
          id
          title
        }
      }`,
      // 响应式参数
      variables () {
        // 在这里使用 vue 的响应式属性
        return {
          id: this.iidd,
        }
      },
    }
  }
};
</script>

第2种： 给graphql结果起别名

<!--首页-->
<template>
  <div>
    {{ppp.title}}
    <!-- <div v-for="(blog,index) in cards" :key="index">{{blog.title}}</div> -->
  </div>
</template>
<script>
import gql from 'graphql-tag'
export default {
  data() {
    return {
      iidd : 1,
      ppp: {}
    }
  },
  apollo: {
    ppp: {
      query: gql`query($id:ID!) {
        ppp:card (id:$id){
          id
          title
        }
      }`,
      // 响应式参数
      variables () {
        // 在这里使用 vue 的响应式属性
        return {
          id: this.iidd,
        }
      },
    }
  }
};
</script>

第三种，不起别名，需要用update钩子函数做转换，支持es6写法

<!--首页-->
<template>
  <div>
    {{ppp.title}}
    <!-- <div v-for="(blog,index) in cards" :key="index">{{blog.title}}</div> -->
  </div>
</template>
<script>
import gql from 'graphql-tag'
export default {
  data() {
    return {
      iidd : 1,
      ppp: {}
    }
  },
  apollo: {
    ppp: {
      query: gql`query($id:ID!) {
        card (id:$id){
          id
          title
        }
      }`,
      // 响应式参数
      variables () {
        // 在这里使用 vue 的响应式属性
        return {
          id: this.iidd,
        }
      },
      update ({ card }) {
                // The field is different from 'tasks'
                return card
            },
    }
  }
};
</script>

参考： https://apollo.vuejs.org/zh-cn/api/smart-query.html#%E9%80%89%E9%A1%B9