Vue Apollo

网站地址:https://apollo.vuejs.org/

GitHub:https://github.com/vuejs/apollo

描述信息:帮助 Vue.js 项目设置 GraphQL 变得更容易

访问官网

GitHub

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

在这里，你可以查询正确的数据，尤其是你的应用程序或功能所需的数据。Apollo 组件以一种声明式的方式帮助使用 GraphQL 工具。它还支持 SSR。

主要特点

自动更新，无需考虑更新 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 =&gt; h(App),
})

简单查询

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

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/3640