Volume 7 · vtrc-web Deep Dive
เล่มนี้เจาะลึก vtrc-web/ — frontend ฝั่งพนักงาน เป็น React 16 + Apollo Client v2 + AntD v3 + Webpack 4 ที่ ejected จาก CRA
เป้าหมายคือให้อ่านจบแล้วเข้าใจโครงสร้าง รู้จุดที่ต้องระวัง และสามารถแก้ไขหรือเพิ่มฟีเจอร์ได้โดยไม่ทำลาย pattern ที่มีอยู่
vtrc-web คืออะไร
vtrc-web คือเว็บแอปที่พนักงานสภากาชาดใช้งานจริง — ดูสลิปเงินเดือน ยื่นคำขอลา เบิกสวัสดิการรักษาพยาบาล ดูข่าวสารและนโยบาย จัดการกองทุนสงเคราะห์ และอื่น ๆ
ตัวแอปรันที่ https://vtrc.redcross.or.th/ (production) และ https://uat-vtrc.redcross.or.th/ (UAT) — โดยทั้งคู่ใช้ bundle ตัวเดียวกันที่เลือก GraphQL endpoint ตอน runtime ตาม origin ที่เปิด
คู่สมรสของ vtrc-web คือ vtrc-rc-backoffice (ฝั่ง HR) ซึ่งจะอยู่ใน Volume 7 — ทั้งสองแอปใช้ pattern คล้ายกันแต่คนละเวอร์ชัน library (AntD v3 vs v4, Webpack vs CRA) ห้ามสับสน
สไตล์โค้ด — 3 ข้อที่ต้องจำ
- class component +
withApolloHOC เป็นหลัก — ไม่มีuseQuery, ไม่มี<Query>/<Mutation>render props fetchPolicy: 'no-cache'เป็น default ทุก query ดึงใหม่จาก server เสมอ cache ของ Apollo แทบไม่ถูกใช้- endpoint เลือกตอน runtime ด้วย
window.location.hrefในcheckLinkURL()— ไม่ใช้NODE_ENVหรือREACT_APP_*
ตัวเลขที่ควรจำ
| ตัวเลข | ค่า | ที่มา |
|---|---|---|
| Page folders | 48 โฟลเดอร์ (จัดเป็น 11 cluster) | src/pages/user/ |
| GraphQL queries | 138 ตัว (export default keys) | src/graphql/queries.js (4,493 บรรทัด) |
| GraphQL mutations | 41 ตัว (export default keys) | src/graphql/mutations.js (1,447 บรรทัด) |
| Routes | 1,410 บรรทัด | src/config/routes.js |
| SiderLayout (shell) | 1,226 บรรทัด | src/components/user/SiderLayout/index.js |
| AntD override (compiled CSS) | 21,190 บรรทัด | src/config/custom-antd.css |
| React | 16.14 | package.json:75 |
| Apollo Client | v2 (react-apollo@3.1.5) | package.json:76 |
| AntD | v3.26 | package.json:20 |
| Webpack | 4.42 (CRA ejected) | package.json:106 |
| Node (ใน Docker) | 14.20 | Dockerfile:1 |
| Bundle JS (gzip โดยประมาณ) | ~3-4 MB | build/static/js/ |
สิ่งที่ Volume นี้ไม่ cover
- รายละเอียด GraphQL schema ฝั่ง vtrc-api — cover ใน Volume 3 (vtrc-api Deep Dive) โดยเฉพาะบท 3.2 GraphQL pipeline
- HRMI MSSQL schema — cover ใน Volume 8 (Data Model)
- business rule ของแต่ละฟีเจอร์ — cover ใน Volume 1 (Business)
- vtrc-rc-backoffice — Volume 7 แยกต่างหาก (ใช้ AntD v4 + Recoil + MUI v5)
โครงสร้างบท
| บท | ชื่อ | คำถามที่ตอบ |
|---|---|---|
| 6.1 | Repository map + legacy/backup files | โฟลเดอร์ไหนทำอะไร ไฟล์ไหนห้ามแตะ |
| 6.2 | Bootstrap + Webpack build | แอปเริ่มที่ไหน สร้าง bundle อย่างไร |
| 6.3 | Apollo Client + checkLinkURL | ส่ง request อย่างไร เลือก endpoint อย่างไร |
| 6.4 | Routing + auth gate + menu visibility | route ทำงานอย่างไร ซ่อนเมนูอย่างไร |
| 6.5 | GraphQL queries + mutations catalog | มี query/mutation อะไรบ้าง จัดกลุ่มอย่างไร |
| 6.6 | Component + page architecture | component แบ่งอย่างไร ใช้ pattern อะไร |
| 6.7 | Page deep dive — Login, Slip, Leave | หน้าจริงทำงานอย่างไร 3 ตัวอย่าง |
| 6.8 | State, styling, locale (พ.ศ.) | state อยู่ที่ไหน จัดการพ.ศ. อย่างไร |
| 6.9 | Security + performance | จุดเสี่ยงด้านความปลอดภัย ทำไม bundle ใหญ่ |
| 6.10 | Scorecard + known issues | สรุปสุขภาพ repo + ลำดับการแก้ไข |
วิธีอ่านเล่มนี้
ถ้ามีเวลาน้อย — อ่าน 6.1 (map) + 6.3 (Apollo) + 6.10 (scorecard) ก็พอเข้าใจภาพรวม
ถ้าจะแก้ฟีเจอร์ — อ่าน 6.5 (catalog) ก่อนหา query ที่เกี่ยวข้อง แล้วดู 6.7 (deep dive) เป็นตัวอย่างการใช้งาน
ถ้าจะทำ security review — อ่าน 6.9 ก่อน แล้ว cross-check กับ Volume 9 (Security)
ขอแนะนำให้เปิดไฟล์จริงใน repo ควบคู่กับการอ่าน — คู่มือนี้เป็นแผนที่ ไม่ใช่ตัวแทนของโค้ด