GraphQL简介

历史

GraphQL是由Facebook于2012年开发的，最初是为了解决Facebook的移动应用程序中遇到的问题而创建的。
GraphQL是一种用于应用编程接口（API）的查询语言和服务器端运行时，它可以使客户端准确地获得所需的数据，没有任何冗余。GraphQL旨在让API变得快速、灵活并且为开发人员提供便利。它甚至可以部署在名为GraphiQL的集成开发环境（IDE）中。

示例-VUE

在VUE3中使用GraphQL的步骤如下：

1. 安装依赖：npm install --save graphql apollo-boost vue-apollo
2. 在main.js中引入依赖：

import Vue from 'vue'
import App from './App.vue'
import VueApollo from 'vue-apollo'
import ApolloClient from 'apollo-boost'

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

Vue.use(VueApollo)

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

new Vue({
  el: '#app',
  provide: apolloProvider.provide(),
  render: h => h(App)
})

3. 在组件中使用GraphQL：

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import gql from 'graphql-tag'

export default {
  name: 'Posts',
  data() {
    return {
      posts: [],
    }
  },
  apollo: {
    posts: gql`
      query {
        posts {
          id
          title
        }
      }
    `,
  },
}
</script>