GraphQL 一看就懂的学习笔记

65 阅读1分钟

graphQL 简介

截屏2024-01-29 14.41.05.png

截屏2024-01-29 14.40.50.png

截屏2024-01-29 14.43.17.png

冷知识

截屏2024-01-29 16.07.18.png

从LOGO就可以看出,是基于图的查询。

由来

REST的缺点:

  • 依赖API文档
  • 前后端需要反复为业务沟通接口的结构和字段
    • 前端返回数据过少,则前端需要组合多个api获取数据
    • 后端返回数据过多,则浪费带宽(甚至多不代表够),后端管理分散API也有成本

截屏2024-01-29 14.20.16.png

GraphQL解决的问题:

  • 不需要依赖API文档
  • 不需要整合资源(API)请求,访问集中提供的API,前端自己决定需要获取哪些数据 截屏2024-01-29 13.29.39.png 截屏2024-01-29 13.32.48.png

方式

操作类型 - query/mutation 操作名 - queryXXXX 定义变量 - id

截屏2024-01-29 14.12.25.png

vue/react中使用graphQL

安装

截屏2024-01-29 14.33.17.png

配置地址

截屏2024-01-29 14.35.06.png

provide加载

截屏2024-01-29 14.36.02.png

使用

截屏2024-01-29 14.36.54.png

截屏2024-01-29 14.37.38.png

apollo graphql

是基于graphQL的工具集,包括前后端的解决方案:Apollo Client(用于前端的GraphQL客户端库)、Apollo Server(用于后端的GraphQL服务器库)、Apollo Federation(用于构建基于微服务的GraphQL架构的工具)等等。

截屏2024-01-29 16.00.12.png

工具

apollographql.com/

References

www.bilibili.com/video/BV19i… www.bilibili.com/video/BV1fM… www.bilibili.com/video/BV1hJ…