x-note
  • Introduction
  • JavaScript
    • JavaScript 作用域链
    • JavaScript 数据结构与类型
    • JavaScript 原型
    • JavaScript this 关键字
    • JavaScript 函数
    • JavaScript delete 运算符
    • JavaScript 内存管理与垃圾回收
    • JavaScript 严格模式与混乱模式
    • JavaScript 数字精度丢失
    • JavaScript 并发模型
    • 利用原型链实现继承
  • ECMAScript
    • ECMAScript 6 变量及常量的声明
    • ECMAScript 6 变量的解构赋值
    • ECMAScript 6 Promise 对象
    • ECMAScript 6 Symbol
    • ECMAScript 6 Proxy
    • ECMAScript 6 Reflect
    • ECMAScript 6 new.target
    • ECMAScript 6 Set 和 WeakSet
    • ECMAScript 6 Map 和 WeakMap
    • ECMAScript 6 Iterator
    • ECMAScript 6 Generator
    • ECMAScript 6 class
    • ECMAScript 7
    • ECMAScript 8 async 函数
    • ECMAScript 8 内存共享与原子性
    • ECMAScript 8 Others
    • ECMAScript 2018
    • ECMAScript 2019
  • CSS
    • CSS 块格式化上下文(BFC)
    • CSS 盒模型
    • CSS 外边距合并
    • CSS Float
    • CSS Position
    • CSS Border-Image
    • CSS BEM
    • CSS 表布局详解
    • 页面布局之单列布局
    • 页面布局之多列布局
  • React
    • React 组件的生命周期
    • React 虚拟 DOM
    • React Reconciliation
    • React Diff 算法核心
    • React Fiber
    • React Scheduling
    • React Context API
    • React Refs
    • React HMR
    • React Hook
  • VUE
    • VUE 响应式系统
    • VUE 渲染机制
    • 关于 Vue 的思考
  • Webpack
    • Webpack 基本概念
    • Webpack HMR
  • Babel
    • @babel/preset-env
  • WEB
    • WEB 基础知识及概念
      • 屏幕测量单位
      • 重绘与重排
      • 前端模块化系统
      • WEB 客户端存储
      • 浏览器的渲染过程
    • WEB 性能优化
      • WEB 性能指标
      • WEB 图片优化
      • 懒加载资源
    • WEB 安全
      • XSS
      • XSRF
      • 点击劫持
      • 同源策略(Same Origin Policy,SOP)
    • WEB 解决方案
      • webp 兼容方案
      • WEB 拖拽实现方案
    • WEB SEO
  • Git
    • Git 工作流
    • Git 内部原理
  • 传输协议
    • UDP
      • UDP 基本概念
    • TCP
      • TCP 基本概念
    • HTTP
      • HTTP 基础
      • HTTP 缓存
      • HTTP-2
      • HTTP-3
      • HTTPS
      • 自定义 HTTPS 证书
  • Protocol Buffers
    • Protocol Buffers 基础
  • gRPC
    • gRPC 简介
    • gRPC 基础概念
    • GRPC with GraphQL and TypeScript
  • 正则表达式
    • 正则表达式基础
    • 正则表达式的悲观回溯
  • 基础算法
    • 冒泡排序
    • 插入排序
    • 选择排序
    • 快速排序
    • 归并排序
    • 希尔排序
    • 堆排序
    • 桶排序
    • 计数排序
    • 基数排序
    • 二叉树的遍历
    • 动态规划
    • 回溯
  • 压缩算法
    • HPACK
    • QPACK
  • 设计模式
    • DDD
      • 模型元素的模式
    • 常见设计模式
      • 工厂方法
      • 抽象工厂
      • 构造器
      • 原型
      • 单例模式
      • 适配器模式
      • 桥接模式
      • 组合模式
      • 外观模式
      • 享元模式
      • 代理模式
      • 责任链模式
      • 命令模式
      • 迭代器模式
      • 中介者模式
      • 备忘录模式
      • 观察者模式
      • 状态模式
      • 策略模式
      • 模版方法模式
      • 访问者模式
      • 依赖注入
    • MVC
    • MVP
    • MVVM
  • 颜色空间
    • LCH
由 GitBook 提供支持
在本页
  • 技术选型参考
  • gRPC 直接转 GraphQL
  • 生成 TypeScript 声明文件
  • 基于 proto files 生成 Typescript 类型
  • 基于 GraphQL Schema 生成 Typescript 类型
  • Reference
在GitHub上编辑
  1. gRPC

GRPC with GraphQL and TypeScript

上一页gRPC 基础概念下一页正则表达式

最后更新于4年前

gRPC 和 GraphQL 都是 2015 年推出的接口设计方案,各有各的优势。

GraphQL 在提供了 以支持微服务架构。 但是,由于 GraphQL 请求被解析了两次,所以可能导致性能瓶颈。

所以,APP 与独立的 GraphQL Server 集群进行通信,而 GraphQL Server 通过 gRPC 与微服务应用进行通信是一个不错的方案。

Sample Architecture diagram with GraphQL & gRPC
  • GraphQL Server 作为唯一的 BFF(Backend for Frontend) 入口。

  • gRPC Server,以执行所有功能操作。

这两类微服务托管在 K8S(Kubernetes) 上,因此还需要在 gRPC 中实现运行状况检查机制。

技术选型参考

For GraphQL Server:

  • as GraphQL Server

  • as gRPC Client

如果你的应用还作为 gRPC Server:

  • ...

gRPC 直接转 GraphQL

存在一些现成的轮子做了 gRPC 直接转 GraphQL 的工作。

生成 TypeScript 声明文件

gRPC、GraphQL 以及 TypeScript 都做了类型声明的工作,需要以某种方式做映射,尽可能保证类型统一易于维护。

基于 proto files 生成 Typescript 类型

可以使用以下工具基于 proto files 直接生成 TypeScript 声明文件

基于 GraphQL Schema 生成 Typescript 类型

可以使用以下工具基于 GraphQL Schema 直接生成 TypeScript 声明文件

如果 GraphQL Schema 是基于 proto files 生成的,那么推荐的流程应该是:

  1. proto files to GraphQL Schema

  2. proto files to client and TS types.

  3. GraphQL Schema to TS types.

Reference

The difference between grpc and @grpc/grpc-js see

,Java 版本,Google 维护。

,golang 版本,个人项目

,与以上两者不同的是仅支持 *.proto to *.ts

express-graphql(Official)
graphql-relay-js(Official)
Apollo-Server
gRPC-node(Official)
@grpc/grpc-js
grpc
there
gRPC-node(Official)
@grpc/grpc-js
grpc
mali
rejoiner
grpc-graphql-gateway
protobuf.js
grpc_tools_node_protoc_ts
ts-proto
gql2ts
GraphQL Code Generator
When GraphQL meets gRPC…
Creating a TypeScript API that consumes gRPC and GraphQL via generated types
GraphQL schema stitching