GraphQL实践篇二

GraphQL实践篇之Vue+GraphQL搭建客户端

上一篇我们介绍了使用Nestjs+GraphQL搭建服务端，这篇文章记录使用Vue+GraphQL搭建客户端。

客户端项目目录结构如下：

安装

首先我们先使用vue-cli新建项目，接着安装依赖：

npm install apollo-cache-inmemory apollo-client apollo-link apollo-link-http apollo-link-ws apollo-utilities vue-apollo -S

引入依赖

// main.js
import Vue from 'vue'
import App from './App.vue'
import { apolloProvider } from './vue-apollo';

Vue.config.productionTip = false

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

// vue-apollo.js
// 相关文档请查阅 https://apollo.vuejs.org/zh-cn/
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import Vue from 'vue'
import VueApollo from 'vue-apollo'
// 新的引入文件
import { split } from 'apollo-link'
import { WebSocketLink } from 'apollo-link-ws'
import { getMainDefinition } from 'apollo-utilities'

Vue.use(VueApollo)

// 与 API 的 HTTP 连接
const httpLink = createHttpLink({ // 你需要在这里使用绝对路径 
    uri: 'http://localhost:3001/graphql',
})
// 创建订阅的 websocket 连接
const wsLink = new WebSocketLink({
    uri: 'ws://localhost:3001/graphql',
    options: {
        reconnect: true,
    }
})
// 使用分割连接的功能
// 你可以根据发送的操作类型将数据发送到不同的连接
const link = split(({ query }) => {
    const definition = getMainDefinition(query)
    return definition.kind === 'OperationDefinition' && definition.operation === 'subscription'
    },
    wsLink,
    httpLink
)
// 创建 apollo 客户端
const apolloClient = new ApolloClient({
    link,
    cache: new InMemoryCache(),
    connectToDevTools: true,
})

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

编写业务代码

// App.vue

// HelloGraphQL.vue

至此，我们便可以请求server端服务了！