Vue Apollo
made with Vuejs

Vue Apollo是一个集成Apollo和GraphQL的Vue组件，可以让你🚀 在 Vue.js 应用中集成 GraphQL。

主要特点

• 自动更新，无需考虑更新 UI 或重新获取查询的问题！
• 模板内组件，通过 Apollo 组件声明式地使用 Apollo
• 支持 SSR，在渲染 HTML 页面之前在服务端运行你的查询

安装

vue-cli3

vue add apollo

Npm（Apollo Boost）

npm i --save vue-apollo graphql apollo-boost

Yarn（Apollo Boost）

yarn add vue-apollo graphql apollo-boost

使用

创建 ApolloClient 实例（Apollo Boost）

import ApolloClient from 'apollo-boost'

const apolloClient = new ApolloClient({
  // 你需要在这里使用绝对路径
  uri: 'https://api.graphcms.com/simple/v1/awesomeTalksClone'
})

引入并注册

import Vue from 'vue'
import VueApollo from 'vue-apollo'

Vue.use(VueApollo)

示例化

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



new Vue({
  el: '#app',
  // 像 vue-router 或 vuex 一样注入 apolloProvider
  apolloProvider,
  render: h => h(App),
})

简单查询

    <template>
  <div class="apollo">
    <h3>Hello</h3>
    <p>
      {{hello}}
    </p>
  </div>
</template>
<script>
    import gql from 'graphql-tag'
    export default{
    apollo: {
        hello: gql`{hello}`,
      },
     data () {
        return {
          hello: '',
        }
      }
    }
</script>