name: pc-graphql-frontend description: 前端自定义 GraphQL API 接口. 当需要在 Vue 3 前端调用后端自定义接口（非标准 CRUD）时使用此技能 compatibility: Vue 3 + TypeScript metadata: version: "1.0"

前端自定义 API 接口开发

文件结构

src/views/{module}/{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;
}

核心规则

开发流程

1. 后端接口开发完成并重启服务
2. 类型自动生成到 #/types.ts
3. 在 Api2.ts 创建接口函数
4. 使用 Query 或 Mutation 声明返回类型