在 Salesforce 上用 GraphQL 搭 React CRUD：到底要多少管道代码

用 Salesforce CLI 生成带 React 应用与依赖的 SFDX 项目（含 React 样板与所需依赖），连到 sandbox，目标是做一个能读能改真实 Salesforce Case 的小 React UI。结论：管道代码少得惊人，只需四步。

四步集成

1. 生成 GraphQL schema

npm run graphql:schema

schema 描述 org 里可访问的对象和可执行的查询。

2. 定义 GraphQL 操作

基于 schema 定义 UI 需要的操作：查询 Get Cases、Get Case details，变更 Update a Case。

3. 生成 TypeScript 类型

用 GraphQL Code Generator 从 Salesforce schema 与操作生成 TS 类型：

npm run graphql:codegen

查询结果、变量、变更都拿到类型安全定义，不用手写数据形状。

4. 配置 GraphQL 客户端

用 @salesforce/platform-sdk 的 Data SDK——内含 GraphQL 客户端，处理认证与 CSRF token 管理。

然后 AI 编码工具完成了大部分 React 实现：Cases → Case details → Edit → Save。

有趣的部分：不是 GraphQL 也不是 React 单独

作者指出，这个集成真正值得注意的是四块拼图的契合：

• React 极擅长构建 UI；
• GraphQL 极擅长取你需要的（含关联）数据——一条查询就能取 account、它的关联 cases、contacts 等；
• AI 编码 agent 极擅长生成 React 样板、GraphQL 查询与接线；
• Salesforce 提供后端：数据模型、关系、认证、权限、校验与 API。

于是省下的是集成时间，投入的是 UI/UX 与"你想要什么数据"的决策。

实践建议

• 有 Salesforce 后端时，GraphQL 的关联查询能力（一次取多层关系）是 REST 聚合调用的直接替代；
• 代码生成（schema → 操作 → 类型）链路要固定进 npm scripts，保证 schema 变更不破坏前端类型；
• 认证与 CSRF 交给 Data SDK 处理，不要在应用层重造。

来源：Building a React CRUD App on Salesforce with GraphQL - DEV Community