Vue Apollo
made with Vuejs

Vue Apollo

这是一个集成Apollo和GraphQL的Vue组件。

相关问答
暂无相关问题
查看全部
简介及使用教程

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>
作者

相关项目

这是一个漂亮的Vue聊天组件。
这是一个基于Vue.js的模拟命令行效果的动画组件。
Vue.js的文本幻灯片组件。
这是一个基于Vue.js的内容切换组件。
这是一个基于Vue的图像墙组件。
这是一个灵活可扩展的内容容器组件。
这是ApexCharts的Vue.js组件。