GraphQL 实战篇之前端Vue+后端

Stella981
• 阅读 746

关注 前端瓶子君,回复“交流”

加入我们一起学习,天天进步

GraphQL 实战篇之前端Vue+后端

作者:PatWu16

https://segmentfault.com/a/1190000039087433

这篇文章记录使用Vue+GraphQL搭建客户端。

客户端项目目录结构如下:GraphQL 实战篇之前端Vue+后端

安装

首先我们先使用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端服务了!🎉🎉🎉

前面我们介绍了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页面。

GraphQL 实战篇之前端Vue+后端

编写服务端逻辑

接下来我们注册一个author模块,目录结构如下:

GraphQL 实战篇之前端Vue+后端

`// 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 {
 // 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 {
 // return this.authorsService.findOneById(id);
 return {
    id,
    firstName,
    lastName,
  };
}

 // 解析posts字段
 @ResolveField()
 async posts(@Parent() author: Author): Promise {
     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!
}
`

执行查询

这时我们的服务已经运行起来,可以执行查询了。GraphQL 实战篇之前端Vue+后端

`# 左下角编写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服务便搭建完成,给自己一个👍!

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「 算法 」,加入前端算法源码编程群,每日一刷(工作日),每题瓶子君都会很认真的解答哟!

回复「交流」,吹吹水、聊聊技术、吐吐槽!

回复「 阅读 」,每日刷刷高质量好文!

如果这篇文章对你有帮助,「在看」是最大的支持

GraphQL 实战篇之前端Vue+后端

》》面试官也在看的算法资料《《

“在看和转发” 就是最大的支持

本文分享自微信公众号 - 前端瓶子君(pinzi_com)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这