Agent skill
pc-graphql-frontend
前端自定义 GraphQL API 接口. 当需要在 Vue 3 前端调用后端自定义接口(非标准 CRUD)时使用此技能
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/pc-graphql-frontend
Metadata
Additional technical details for this skill
- version
- 1.0
SKILL.md
前端自定义 API 接口开发
文件结构
src/views/{mod}/{table}/
├── Api.ts # 自动生成(尽量不修改)
└── Api2.ts # 手写自定义接口
Query 模板
import type {
Query,
} from "#/types.ts";
/** 接口描述 */
export async function 函数名(
id: XxxId,
opt?: GqlOpt,
) {
const res: {
函数名: Query["函数名"];
} = await query({
query: /* GraphQL */ `
query($id: XxxId!) {
函数名(id: $id) {
field1
field2
}
}
`,
variables: { id },
}, opt);
const data = res.函数名;
return data;
}
Mutation 模板
import type {
Mutation,
XxxInput,
} from "#/types.ts";
/** 接口描述 */
export async function updateXxx(
id: XxxId,
input: XxxInput,
opt?: GqlOpt,
) {
const res: {
updateXxx: Mutation["updateXxx"];
} = await mutation({
query: /* GraphQL */ `
mutation($id: XxxId!, $input: XxxInput!) {
updateXxx(id: $id, input: $input)
}
`,
variables: {
id,
input,
},
}, opt);
const data = res.updateXxx;
return data;
}
核心规则
| 规则 | 说明 |
|---|---|
| 类型导入 | 从 #/types.ts 导入 Query、Mutation、XxxInput 等,如果是标准的{Table}Model,{Table}Input,{Table}Search就不需要引入,因为已经在Model.ts全局定义了 |
| 返回类型 | 使用 Query["xxx"] 或 Mutation["xxx"] 声明 |
| 命名 | 函数驼峰式,参数蛇形式,与后端保持一致 |
开发流程
- 后端接口开发完成并重启服务
- 类型自动生成到
#/types.ts - 在
Api2.ts创建接口函数 - 使用
Query或Mutation声明返回类型
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?