quasar 中vue使用vue-apollo

https://apollo.vuejs.org/guide/apollo/queries.html#skipping-the-query

yarn add vue-apollo graphql apollo-boost

boots/vue-apollo.js

import VueApollo from 'vue-apollo'
import ApolloClient from 'apollo-boost'

const apolloClient = new ApolloClient({
  uri: 'http://localhost:1337/graphql'
})

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

export default async ({ app, Vue }) => {
  Vue.use(VueApollo)
  app.apolloProvider = apolloProvider
}

配置quasar.conf.js

boot: [
      'vue-apollo'
    ],

index.vue

<template>
  <q-page class="flex flex-center">
    <img
      alt="Quasar logo"
      src="~assets/quasar-logo-full.svg"
    >
   <div v-for="blog in blogs">{{blog.title}}/{{blog.catagory.name}}</div>
  </q-page>
</template>

<script>
import gql from 'graphql-tag'

export default {
  name:"bolgsss",
  data (){
    return {
      blogs: []
    }
  },
  apollo: {
    // Simple query that will update the 'hello' vue property
    blogs: gql`query blogList {
        blogs {
          title
          catagory {
            name
          }
        }
      }`,
  },
}
</script>