Tìm kiếm trang web

tạo mã - Ghi đè từ các kiểu Typescript được tạo từ Schema GraphQL


Tôi đang sử dụng graphql-code-generator để tạo các kiểu TypeScript từ schema GraphQL của mình. Trong GraphQL, bạn có thể tạo các kiểu scalar tùy chỉnh, điều này sẽ tạo ra kiểu sau: /graphql.ts

export type Scalars = {
  String: string;
  Boolean: boolean;
  NodeDescription: any;
};

export type CodeResource = {
  ast: Scalars["NodeDescription"];
};

Như bạn có thể thấy, các loại scalar mặc định của GraphQL như String, Boolean, v.v. sẽ được ánh xạ sang loại tương đương trong Typescript. Các loại scalar tùy chỉnh như NodeDescription sẽ nhận loại typescript là any.

Trong ứng dụng Angular của tôi đã có một kiểu NodeDescription (trong ../app/shared/syntaxtree) mà tôi muốn sử dụng thay cho kiểu any được tạo ra. Có cách nào để ghi đè trường NodeDescription trong kiểu Scalars không? Vậy cuối cùng tôi muốn trường ast của kiểu CodeResource được tạo ra có kiểu NodeDescription thay vì any.

Ý tưởng đầu tiên của tôi là ghi đè kiểu Scalars["NodeDescription"] bằng NodeDescription. Vì vậy, tôi đã thử nhập tất cả các kiểu trong một tệp mới và ghi đè chúng như: /types.ts

import {Scalars} from "./graphql";
import {NodeDescription} from "../app/shared/syntaxtree";
type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
type Scalar = Overwrite<Scalars, {NodeDescription: NodeDescription}>

Điều này thực sự hoạt động, nhưng trường ast của kiểu CodeResource vẫn là kiểu any.

Một ý tưởng khác là sử dụng một tập lệnh bash với một lệnh sed được suy nghĩ kỹ để tập tin được tạo ra sẽ được chỉnh sửa như sau:

import {NodeDescription} from "../app/shared/syntaxtree";
export type Scalars = {
  String: string;
  Boolean: boolean;
  NodeDescription: NodeDescription;
};

Tuy nhiên trước khi tôi triển khai phương pháp đó, tôi muốn biết có cách thông minh nào trong TypeScript để ghi đè các kiểu đã được tạo ra không. Cảm ơn về sự giúp đỡ.

Câu trả lời #1

Tôi đã tìm thấy một giải pháp cụ thể nếu bạn gặp cùng một vấn đề khi sử dụng graphql-code-generator. Có một plugin gọi là add. Vì vậy, trong file codegen.yml bạn có thể thêm các import và xử lý các loại scalar tùy chỉnh. File codegen.yml của tôi bây giờ trông như sau:

overwrite: true
schema: "../schema/graphql/schema.json"
documents: "../schema/graphql/**/*.graphql"
generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-apollo-angular"
      - add:
          content: 'import { NodeDescription } from "../app/shared/syntaxtree";'
    config:
      enumsAsTypes: true
      scalars:
        NodeDescription: NodeDescription
        ISO8601DateTime: string

Bài viết liên quan