全书目录

第十六篇：GraphQL 完全指南 —— 智能问询总台宇宙

第七章：变量与 Fragment —— 可填写模板和复用问询单

1 分钟 237 字 第 311 / 962 个阅读单元

当问询单开始变复杂，两个问题就会出现：

  1. 参数不能写死
  2. 同一组字段会反复出现

这时就轮到 变量 和 Fragment。

先看变量：

graphql
query ResidentTickets($residentId: ID!, $status: TicketStatus = OPEN) {
  resident(id: $residentId) {
    id
    name
    tickets(status: $status) {
      id
      title
      status
    }
  }
}

配套变量：

json
{
  "residentId": "r-1001",
  "status": "OPEN"
}

变量的直觉很简单：

text
固定模板 + 动态填空

再看 Fragment：

graphql
fragment TicketCard on Ticket {
  id
  title
  status
  createdAt
  device {
    id
    name
  }
}

query ResidentTickets($residentId: ID!) {
  resident(id: $residentId) {
    id
    name
    tickets {
      ...TicketCard
    }
  }
}

Fragment 就像总台里的“标准问询模板”：

  • 工单卡片要展示哪些字段，统一写在 TicketCard
  • 以后任何页面要复用这张卡片，都直接展开它

如果你不这么做，大项目很快就会出现：

  • 到处抄同一坨字段
  • 某个字段改名后很多查询一起碎
  • UI 组件和数据需求对不上

所以记住：

text
变量 = 问询单里的可填写空格
Fragment = 问询单里的可复用标准段落