# bff-note-project

**Repository Path**: typeof/bff-note-project

## Basic Information

- **Project Name**: bff-note-project
- **Description**: graphQL+react+egg
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-06-16
- **Last Updated**: 2022-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### GraphQL

- [中文官网](https://graphql.cn/learn/)

- 一种读取和修改API数据的查询（Graph）语言（QL query language）
![GraphQL简介图片](./assets/info.png)

- graphQL提供了一个类型系统，在这个系统中你可以为你的数据描述一个SCHEMA(模式), 给予了前端API使用者能够按需获取数据的能力

- 传统restAPI模式，数据实体被定义在服务器的一堆url中，当发送请求时返回数据

缺点：同时发送多个请求，或者我们想要得到该请求结果的一部分数据，这种请求会让我们获取到少于我们想要的结果，或者多余的结果

![传统restAPI模式](./assets/info3.png)

- graphQL模式只有单个入口，没有多个url，使用特定语法返回数据将转换为json，来查询/获取数据，前端开发者描述需要的数据，后端来处理返回对应的数据，任何编程语言都能使用这种模式

![GraphQL简介图片](./assets/info1.png)

![GraphQL简介图片](./assets/info2.png)

#### GraphQL 查询语言语法

- schema 模式

```ts
// 枚举
enum Episode {   

}
// 类型
type User {
  appearsIn: [Episode] //是否在Episode中存在
}
// 根类型 入口，所有的查询都从这个入口进入
query [自定义query名称]($变量名: 类型) {
  要查询的query方法(变量名): 方法返回值
}
// mutation 修改数据入口

```




### @apollo/client@v3 + react 前端实现

- 官网地址: [https://www.apollographql.com/docs/react/](https://www.apollographql.com/docs/react/)

- 介绍: 一个全面的 JavaScript 状态管理库，使您能够使用 `GraphQL` 管理本地和远程数据。使用它来获取、缓存和修改应用程序数据，同时自动更新您的 `UI`

### egg + plugin:egg-graphql apollo-server@v3  后端实现

- egg官网地址：[https://eggjs.github.io/zh/guide/plugin.html](https://eggjs.github.io/zh/guide/plugin.html)

- egg Plugin : egg-graphql地址：[https://github.com/eggjs/egg-graphql](https://github.com/eggjs/egg-graphql)

-  apollo-server 地址 : [https://www.apollographql.com/docs/apollo-server/migration](https://www.apollographql.com/docs/apollo-server/migration)