1
pnpm add -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-msw @graphql-codegen/typescript-operations msw @graphql-tools/utils
1
2
3
pnpm add @urql/vue graphql graphql-tag

pnpm add graphql graphql-tag
  1. Ensure mockServiceWorker.js is in your public directory.
    1
    npx msw init public/

codegen.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// codegen.ts
import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  schema: "./src/mocks/schema.graphql",
  documents: ["src/graphql/**/*.ts"], // 你的 gql 查询语句位置
  generates: {
    "./src/graphql/generated.ts": {
      plugins: [
        "typescript", // 生成基础类型
        "typescript-operations", // 针对 operation 生成变量、返回值类型
        "typescript-msw", // 生成 MSW 支持的 GraphQL 文档（如 GetBooksDocument）
      ],
    },
  },
  overwrite: true,
  emitLegacyCommonJSImports: false,
};

export default config;