GraphQL 漸進學習 07-graphql-node-server-模塊化

GraphQL 漸進學習 07-graphql-node-server-模塊化

目標

• 爲了便於維護，模塊化 node 服務端 代碼

• 代碼抽取層次分爲

  • schema 定義

    • 類型
    • 業務對象
    • 查詢
    • 更改

  • resolvers 實現

    • 查詢
    • 方法

  • typeResolvers 實現

    • 自定義類型
    • 標準類型

  • utils 工具

    • mock

代碼

• graphQL-example/modular/

目錄結構

.
├── index.js                                | 主程序
├── resolvers                               | 查詢 更新 實現
│   ├── Mutations.js                        | 更新
│   ├── Querys.js                           | 查詢
│   └── index.js                            | 入口
├── schema                                  | 模型定義
│   ├── business                            | 業務定義
│   │   ├── comment.graphql                 | 評論
│   │   └── post.graphql                    | 文章
│   └── std                                 | 類型定義
│       ├── Mutation.graphql                | 更新
│       ├── Query.graphql                   | 查詢
│       ├── enum.graphql                    | 枚舉
│       ├── interface.graphql               | 接口
│       ├── scalar.graphql                  | 自定義類型
│       └── union.graphql                   | 聯合
├── typeResolvers                           | 類型實現
│   ├── index.js                            | 入口
│   ├── interfaces.js                       | 接口
│   ├── scalars.js                          | 自定義類型
│   ├── types.js                            | 業務類型
│   └── unions.js                           | 聯合
└── utils                                   | 工具
    └── mock.js                             | 模擬

• 說明

  • 這是按 Graphql 組件層次來切分的，適合小業務項目
  • 若是是業務系統龐大，就須要外面套一層 子業務模塊 的目錄
  • 若是業務很微小，能夠把目錄下的多個文件合成一個，切的過於細小也帶來維護的麻煩，具體尺度本身感受哈

步驟

1. schema 定義採用文件擴展名 .graphql

規範點總有好處的，你能夠寫成 .gpl 或者 .graphql

2. 安裝 VSCode 語法支持插件 GraphQL for VSCode

• 安裝地址 GraphQL for VSCode
• 語法高亮
  
• 前去定義
  
• 自動完成代碼
  

我主要用語法高亮

3. 安裝 npm 插件 require-graphql-file 支持模塊化 .graphql 文件

• 安裝插件

npm i -S require-graphql-file

• 使用，打開 index.js

import requireGraphQLFile from 'require-graphql-file'
...
// 讀取 schema
const typeDefs = [
  requireGraphQLFile('./schema/std/scalar'),
  // requireGraphQLFile('./schema/std/enum'),
  // requireGraphQLFile('./schema/std/interface'),
  // requireGraphQLFile('./schema/std/union'),
  requireGraphQLFile('./schema/business/post'),
  requireGraphQLFile('./schema/business/comment'),
  requireGraphQLFile('./schema/std/Query'),
  requireGraphQLFile('./schema/std/Mutation')
]
...
// 合併 schema
const schema = makeExecutableSchema({
  typeDefs,
  ...
})

其實就是讀取 文本 文件，而後合併了傳參給 makeExecutableSchema

4. 編寫 schema 定義

• 按 業務類型 和 組件類型 切分

  • 由於 業務類型 的文件名都是有意義的業務名稱 Post Comment
  • 而 組件類型 的名字能夠很肯定 enum interface union scalar 方便查找
• 目錄文件

├── schema                                  | 模型定義
│   ├── business                            | 業務定義
│   │   ├── comment.graphql                 | 評論
│   │   └── post.graphql                    | 文章
│   └── std                                 | 類型定義
│       ├── Mutation.graphql                | 更新
│       ├── Query.graphql                   | 查詢
│       ├── enum.graphql                    | 枚舉
│       ├── interface.graphql               | 接口
│       ├── scalar.graphql                  | 自定義類型
│       └── union.graphql                   | 聯合

• 代碼參考

  • modular/schema/std/
  • modular/schema/business/
• 主程序調用

見上文

5. 編寫 分解器 代碼

• 我認爲 分解器 代碼有兩種

  • 1 實現 Query查詢 Mutations更新 , 我都放在 resolvers 目錄
  • 2 定義各類類型 interface scalar type union , 都放在 typeResolvers 目錄
• 目錄文件

├── resolvers                               | 查詢 更新 實現
│   ├── Mutations.js                        | 更新
│   ├── Querys.js                           | 查詢
│   └── index.js                            | 入口
├── typeResolvers                           | 類型實現
│   ├── index.js                            | 入口
│   ├── interfaces.js                       | 接口
│   ├── scalars.js                          | 自定義類型
│   ├── types.js                            | 業務類型
│   └── unions.js                           | 聯合

• 代碼參考

  • modular/resolvers/
  • modular/typeResolvers/
• 主程序調用

import resolvers from './resolvers'
import typeResolvers from './typeResolvers'
...
// 合併 schema
const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
  typeResolvers,
  resolverValidationOptions: {
    requireResolversForResolveType: false
  }
})

• resolvers typeResolvers 目錄下寫了 index.js 進行合併

6. 工具 mock

• 爲了測試方便，我都用 mock 數據

如何模擬請移步 06-graphql-採用-mockjs-mock數據

測試

# 請求
{
  posts {
    id
    title
    content
    author
    addtime
    comments {
      id
      message
      author
      addtime
    }
  }
}

# 輸出
{
  "data": {
    "posts": [
      {
        "id": 90932,
        "title": "十分長現維整",
        "content": "常氣火熱成或",
        "author": "文霞",
        "addtime": "10:21:14",
        "comments": [
          {
            "id": 30874,
            "message": "十稱軍題片格員主實",
            "author": "局反重間半何",
            "addtime": "22:05:28"
          },
          {
            "id": 7088,
            "message": "克此快候己林層省",
            "author": "備從當提屬",
            "addtime": "15:45:27"
          },
          {
            "id": 74989,
            "message": "部織溫制流統響教廣",
            "author": "領重你包計",
            "addtime": "03:06:03"
          },
          {
            "id": 24501,
            "message": "識消己滿軍子酸",
            "author": "調始相內向中取造還比",
            "addtime": "05:15:38"
          },
          {
            "id": 91765,
            "message": "重開流報着色運黨快但",
            "author": "兒動心裏放改聲口立",
            "addtime": "04:53:28"
          },
          {
            "id": 48731,
            "message": "氣即感共就林始",
            "author": "進在層只做",
            "addtime": "10:29:44"
          }
        ]
      },
      {
        "id": 67359,
        "title": "開被幾此圖位便目做",
        "content": "應衆級向由把",
        "author": "孟傑",
        "addtime": "16:49:30",
        "comments": [
          {
            "id": 28432,
            "message": "大命格我就戰歷",
            "author": "親但美在號場米商",
            "addtime": "13:18:11"
          },
          {
            "id": 36258,
            "message": "紅條由近的備級",
            "author": "自團人老以音狀裝指號",
            "addtime": "13:17:17"
          },
          {
            "id": 90117,
            "message": "麼整片外習達離",
            "author": "滿步該律特",
            "addtime": "16:10:35"
          },
          {
            "id": 14731,
            "message": "場等九百市很安",
            "author": "白石價和林風農",
            "addtime": "18:33:41"
          },
          {
            "id": 23523,
            "message": "二面化權文及照萬",
            "author": "運現裏新政過鐵",
            "addtime": "17:51:59"
          },
          {
            "id": 77423,
            "message": "劃羣低礦流按看實養",
            "author": "個爲然工些效",
            "addtime": "21:56:41"
          }
        ]
      }
    ]
  }
}

參考

• graphql-tools/generate-schema
• require-graphql-file