這篇文章記錄使用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
<template>
<div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloGraphQL /> </div></template>
<script>
import HelloGraphQL from './components/HelloGraphQL.vue'
export default {
name: 'app',
components: {
HelloGraphQL
}
}
</script>
<style>
#app {
font-family: 'Avenir',Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
// HelloGraphQL.vue
<template>
<div class="hello">
作者姓氏：{{author.firstName}}
<button @click="changeAuthor">修改作者姓氏</button>
<br> <br>
新增標題：{{post.title}}
<button @click="addPost">添加文章</button>
<br>
訂閱成功次數：{{receivedSubscriptionTimes}}
</div>
</template>
<script>
import gql from 'graphql-tag'
export default {
name: 'HelloGraphQL',
data: function (){
return {
author: {},
post: {},
receivedSubscriptionTimes: 0
}
},
apollo: {
// Apollo 的具體選項
author: gql`query author {
author(id: 2) {
id,
firstName,
posts {
id,
title
}
}
}`,
$subscribe: {
postAdded: {
query: gql`subscription postAdded{
postAdded {
id,
title
}
}`,
// 變更之前的結果
result ({ data }) {
// 在這裡用之前的結果和新數據組合成新的結果
// eslint-disable-next-line
console.log(data)
this.receivedSubscriptionTimes += 1 }
}
}
},
methods: {
// 修改作者
changeAuthor() {
// 調用 graphql 變更
this.$apollo.mutate({
// 查詢語句
mutation: gql`mutation changeAuthor {
changeAuthor(id: 3, firstName: "firstName" lastName: "lastName") {
id,
firstName,
lastName
}
}`,
// 參數
variables: {
firstName: '',
},
}).then(res => {
this.author.firstName = res.data.changeAuthor.firstName;
})
},
// 添加文章
addPost() {
// 調用 graphql 變更
this.$apollo.mutate({
// 查詢語句
mutation: gql`mutation addPost {
post: addPost {
id,
title
}
}`
}).then(res => {
this.post = res.data.post;
})
}
}
}
</script>至此，我們便可以請求server端服務了！🎉🎉🎉
前面我們介紹了GraphQL的概念和基礎知識，這篇文章記錄下使用Nestjs+GraphQL搭建Node服務。
安裝npm i --save @nestjs/graphql graphql-tools graphql apollo-server-express
註冊// app.module.ts
import { Module } from '@nestjs/common';
import { GraphQLModule } from '@nestjs/graphql';
import { ConfigModule, ConfigService } from 'nestjs-config';
@Module({
imports: [
ConfigModule.load(path.resolve(__dirname, 'config', '**/!(*.d).{ts,js}')),
GraphQLModule.forRootAsync({
imports: [ConfigModule],
useFactory: (config: ConfigService) => config.get('graphql'),
inject: [ConfigService],
})
],})
export class ApplicationModule {}
// src/config/graphql.ts
import * as path from 'path';
export default {
autoSchemaFile: path.join(process.cwd(), 'src/schema.gql'), // 最後生成的`Schema 文件，不可修改`
installSubscriptionHandlers: true, // 啟用訂閱
};啟動項目，並訪問 http://localhost:3000/graphql，我們便可以看到graphql頁面。
編寫服務端邏輯接下來我們註冊一個author模塊，目錄結構如下：
// author.module.ts
import { Module } from '@nestjs/common';
import { AuthorService } from './author.service';
import { AuthorResolver } from './author.resolver';
@Module({
providers: [
AuthorService,
AuthorResolver
]
})
export class AuthorModule {}
// author.service.ts
// 此文件用於寫資料庫查詢等邏輯，我們著重學習GraphQL的使用，故此處不做相關Demo
import { Injectable } from '@nestjs/common';
@Injectable()
export class AuthorService {
async findOneById() {}
}
// author.resolver.ts
import { Args, Mutation, Query, Resolver, Subscription, ResolveField, Parent, Int } from '@nestjs/graphql';
import { PubSub } from 'graphql-subscriptions';
import { Author } from './models/author.model';
import { Post } from './models/post.model';
import { AuthorService } from './author.service';
// import { GetAuthorArgs } from './dto/get-author.args';
const pubSub = new PubSub();
@Resolver(() => Author)
export class AuthorResolver {
constructor(
private authorsService: AuthorService
) {}
// 根據id查詢作者信息
@Query(returns => Author, {
name: 'author',
description: 'get author info by id',
nullable: false
})
async getAuthor(@Args('id', {
type: () => Int,
description: 'author id',
nullable: false
}) id: number): Promise<any> {
// return this.authorsService.findOneById(id);
return {
id,
firstName: 'wu',
lastName: 'pat',
};
}
// 使用DTO接受參數
// @Query(returns => Author)
// async getAuthor(@Args() args: GetAuthorArgs) {
// return this.authorsService.findOneById(args);
// }
// 修改作者信息
@Mutation(returns => Author, {
name: 'changeAuthor',
description: 'change author info by id',
nullable: false
})
async changeAuthor(
@Args('id') id: number,
@Args('firstName') firstName: string,
@Args('lastName') lastName: string,
): Promise<any> {
// return this.authorsService.findOneById(id);
return {
id,
firstName,
lastName,
};
}
// 解析posts欄位
@ResolveField()
async posts(@Parent() author: Author): Promise<any> {
const { id } = author;
// return this.postsService.findAll({ authorId: id });
return [{
id: 4,
title: 'hello',
votes: 2412,
}];
}
// 新增文章
@Mutation(returns => Post)
async addPost() {
const newPost = {
id: 1,
title: '新增文章'
};
// 新增成功後，通知更新
await pubSub.publish('postAdded', { postAdded: newPost });
return newPost;
}
// 監聽變更
@Subscription(returns => Post, {
name: 'postAdded',
// filter: (payload, variables) => payload.postAdded.title === variables.title,
// 過濾訂閱
// resolve(this: AuthorResolver, value) { // 修改payload參數
// return value;
// } })
async postAdded(/*@Args('title') title: string*/) {
return (await pubSub.asyncIterator('postAdded'));
}}
// author.model.ts
import { Field, Int, ObjectType } from '@nestjs/graphql';
import { Post } from './post.model';
@ObjectType({ description: 'Author model' })
export class Author {
@Field(type => Int, {
description: '作者id'
})
id: number;
@Field({
nullable: true,
description: '作者姓姓氏'
})
firstName?: string;
@Field({
nullable: true,
description: '作者姓名字'
})
lastName?: string;
// 要聲明數組的項（而不是數組本身）是可為空的，請將nullable屬性設置'items'
// 如果數組及其項都是可空的，則設置nullable為'itemsAndList'
@Field(type => [Post], {
nullable: 'items',
description: '作者發表的文章'
})
posts: Post[];
}
// posts.model.ts
import { Field, Int, ObjectType } from '@nestjs/graphql';
@ObjectType()
export class Post {
@Field(type => Int)
id: number;
@Field() title: string;
@Field(type => Int, {
nullable: true
})
votes?: number;
}上面的代碼包含了查詢、變更、訂閱類型，此時我們會發現src下面新增了一個文件schema.gql，這個文件就是自動生成的類型文件:
# ----
# THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY)
# ----
type Post {
id: Int!
title: String!
votes: Int
}
"""Author model"""
type Author {
"""作者id"""
id: Int!
"""作者姓姓氏"""
firstName: String
"""作者姓名字"""
lastName: String
"""作者發表的文章"""
posts: [Post]!
}
type Query {
"""get author info by id"""
author(
"""author id"""
id: Int!
): Author!
}
type Mutation {
"""change author info by id"""
changeAuthor(lastName: String!, firstName: String!, id: Float!): Author!
addPost: Post!
}
type Subscription {
postAdded: Post!
}
執行查詢這時我們的服務已經運行起來，可以執行查詢了。
# 左下角編寫QUERY VARIABLES
{
"id": 1
}
# Write your query or mutation here
# 查詢作者信息
query author($id: Int!) {
alias: author(id: $id) {
id,
firstName,
posts {
id,
title
}
}
}
# 修改作者信息
mutation changeAuthor {
changeAuthor(id: 3, firstName: "firstName" lastName: "lastName") {
id,
firstName,
lastName
}
}
# 發布文章
mutation addPost {
post: addPost {
id,
title
}
}
# 訂閱文章新增
subscription postAdded{
postAdded {
id,
title
}
}
// 自省查詢
query schema{
__schema {
types {
name
}
}
}至此，我們的Nestjs+GraphQL服務便搭建完成，給自己一個👍！