如何将 GraphQL 与 TypeScript 和 graphql-code-generator 生成的类型一起使用？

Question

我按照Apollo Docs 教程使用 TypeScript 构建 Apollo Server (Express)，并且还使用GraphQL 代码生成器根据我的 GraphQL 架构生成必要的类型。

这是我当前的codegen.json配置：

{
  "schema": "./lib/schema/index.graphql",
  "generates": {
    "./dist/typings/graphql/schema.d.ts": {
      "plugins": [
        "typescript",
        "typescript-resolvers"
      ],
      "config": {
        "typesPrefix": "GQL",
        "skipTypename": true,
        "noSchemaStitching": true,
        "useIndexSignature": true
      }
    }
  }
}

这是我当前基于教程的 GraphQL 模式（它并不完整，我还没有完成整个事情，我已经修剪了一些东西以使示例更小）：

type Query {
    launch(id: ID!): Launch
}

type Launch {
    id: ID!
    site: String
    mission: Mission
}

enum PatchSize {
    SMALL
    LARGE
}

type Mission {
    name: String
    missionPatch(mission: String, size: PatchSize): String
}

它会生成以下 TypeScript 类型：

{
  "schema": "./lib/schema/index.graphql",
  "generates": {
    "./dist/typings/graphql/schema.d.ts": {
      "plugins": [
        "typescript",
        "typescript-resolvers"
      ],
      "config": {
        "typesPrefix": "GQL",
        "skipTypename": true,
        "noSchemaStitching": true,
        "useIndexSignature": true
      }
    }
  }
}

这是我的resolvers.ts文件：

type Query {
    launch(id: ID!): Launch
}

type Launch {
    id: ID!
    site: String
    mission: Mission
}

enum PatchSize {
    SMALL
    LARGE
}

type Mission {
    name: String
    missionPatch(mission: String, size: PatchSize): String
}

最后，我的launches.ts班级文件LaunchesAPI：

import { GraphQLResolveInfo } from 'graphql';
export type Maybe<T> = T | null;
export type RequireFields<T, K extends keyof T> = { [X in Exclude<keyof T, K>]?: T[X] } & { [P in K]-?: NonNullable<T[P]> };
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
  ID: string,
  String: string,
  Boolean: boolean,
  Int: number,
  Float: number,
};

export type GQLLaunch = {
  id: Scalars['ID'],
  site?: Maybe<Scalars['String']>,
  mission?: Maybe<GQLMission>,
};

export type GQLMission = {
  name?: Maybe<Scalars['String']>,
  missionPatch?: Maybe<Scalars['String']>,
};


export type GQLMissionMissionPatchArgs = {
  mission?: Maybe<Scalars['String']>,
  size?: Maybe<GQLPatchSize>
};

export enum GQLPatchSize {
  Small = 'SMALL',
  Large = 'LARGE'
}

export type GQLQuery = {
  launch?: Maybe<GQLLaunch>,
};


export type GQLQueryLaunchArgs = {
  id: Scalars['ID']
};

export type WithIndex<TObject> = TObject & Record<string, any>;
export type ResolversObject<TObject> = WithIndex<TObject>;

export type ResolverTypeWrapper<T> = Promise<T> | T;

export type ResolverFn<TResult, TParent, TContext, TArgs> = (
  parent: TParent,
  args: TArgs,
  context: TContext,
  info: GraphQLResolveInfo
) => Promise<TResult> | TResult;

export type Resolver<TResult, TParent = {}, TContext = {}, TArgs = {}> = ResolverFn<TResult, TParent, TContext, TArgs>;

export type SubscriptionSubscribeFn<TResult, TParent, TContext, TArgs> = (
  parent: TParent,
  args: TArgs,
  context: TContext,
  info: GraphQLResolveInfo
) => AsyncIterator<TResult> | Promise<AsyncIterator<TResult>>;

export type SubscriptionResolveFn<TResult, TParent, TContext, TArgs> = (
  parent: TParent,
  args: TArgs,
  context: TContext,
  info: GraphQLResolveInfo
) => TResult | Promise<TResult>;

export interface SubscriptionSubscriberObject<TResult, TKey extends string, TParent, TContext, TArgs> {
  subscribe: SubscriptionSubscribeFn<{ [key in TKey]: TResult }, TParent, TContext, TArgs>;
  resolve?: SubscriptionResolveFn<TResult, { [key in TKey]: TResult }, TContext, TArgs>;
}

export interface SubscriptionResolverObject<TResult, TParent, TContext, TArgs> {
  subscribe: SubscriptionSubscribeFn<any, TParent, TContext, TArgs>;
  resolve: SubscriptionResolveFn<TResult, any, TContext, TArgs>;
}

export type SubscriptionObject<TResult, TKey extends string, TParent, TContext, TArgs> =
  | SubscriptionSubscriberObject<TResult, TKey, TParent, TContext, TArgs>
  | SubscriptionResolverObject<TResult, TParent, TContext, TArgs>;

export type SubscriptionResolver<TResult, TKey extends string, TParent = {}, TContext = {}, TArgs = {}> =
  | ((...args: any[]) => SubscriptionObject<TResult, TKey, TParent, TContext, TArgs>)
  | SubscriptionObject<TResult, TKey, TParent, TContext, TArgs>;

export type TypeResolveFn<TTypes, TParent = {}, TContext = {}> = (
  parent: TParent,
  context: TContext,
  info: GraphQLResolveInfo
) => Maybe<TTypes>;

export type NextResolverFn<T> = () => Promise<T>;

export type DirectiveResolverFn<TResult = {}, TParent = {}, TContext = {}, TArgs = {}> = (
  next: NextResolverFn<TResult>,
  parent: TParent,
  args: TArgs,
  context: TContext,
  info: GraphQLResolveInfo
) => TResult | Promise<TResult>;

/** Mapping between all available schema types and the resolvers types */
export type GQLResolversTypes = ResolversObject<{
  Query: ResolverTypeWrapper<{}>,
  ID: ResolverTypeWrapper<Scalars['ID']>,
  Launch: ResolverTypeWrapper<GQLLaunch>,
  String: ResolverTypeWrapper<Scalars['String']>,
  Mission: ResolverTypeWrapper<GQLMission>,
  PatchSize: GQLPatchSize,
  Boolean: ResolverTypeWrapper<Scalars['Boolean']>,
}>;

/** Mapping between all available schema types and the resolvers parents */
export type GQLResolversParentTypes = ResolversObject<{
  Query: {},
  ID: Scalars['ID'],
  Launch: GQLLaunch,
  String: Scalars['String'],
  Mission: GQLMission,
  PatchSize: GQLPatchSize,
  Boolean: Scalars['Boolean'],
}>;

export type GQLLaunchResolvers<ContextType = any, ParentType extends GQLResolversParentTypes['Launch'] = GQLResolversParentTypes['Launch']> = ResolversObject<{
  id?: Resolver<GQLResolversTypes['ID'], ParentType, ContextType>,
  site?: Resolver<Maybe<GQLResolversTypes['String']>, ParentType, ContextType>,
  mission?: Resolver<Maybe<GQLResolversTypes['Mission']>, ParentType, ContextType>,
}>;

export type GQLMissionResolvers<ContextType = any, ParentType extends GQLResolversParentTypes['Mission'] = GQLResolversParentTypes['Mission']> = ResolversObject<{
  name?: Resolver<Maybe<GQLResolversTypes['String']>, ParentType, ContextType>,
  missionPatch?: Resolver<Maybe<GQLResolversTypes['String']>, ParentType, ContextType, GQLMissionMissionPatchArgs>,
}>;

export type GQLQueryResolvers<ContextType = any, ParentType extends GQLResolversParentTypes['Query'] = GQLResolversParentTypes['Query']> = ResolversObject<{
  launch?: Resolver<Maybe<GQLResolversTypes['Launch']>, ParentType, ContextType, RequireFields<GQLQueryLaunchArgs, 'id'>>,
}>;

export type GQLResolvers<ContextType = any> = ResolversObject<{
  Launch?: GQLLaunchResolvers<ContextType>,
  Mission?: GQLMissionResolvers<ContextType>,
  Query?: GQLQueryResolvers<ContextType>,
}>;

launchReducer()现在，因为我正在输入with的结果GQLLaunch，所以mission属性类型为GQLMission并且该类型只有两个属性name和missionPatch。它没有missionPatchSmallormissionPatchLarge因此我收到此错误：

输入 '{ 名称：任意；MissionPatchSmall：任何；MissionPatchLarge：任何；}' 不可分配给类型“GQLMission”。对象文字只能指定已知属性，并且“GQLMission”类型中不存在“missionPatchSmall”。TS(2339)

resolvers.ts当文件尝试读取mission.missionPatchSmall或mission.missionPatchLarge因为它们不存在于mission类型的对象中时，文件中存在类似的错误GQLMission：

类型“GQLMission”上不存在属性“missionPatchSmall”。TS(2339)

我不知道如何处理这个问题，有建议吗？

Answer 1

您将属性放在mission不属于 的一部分上GQLMission，然后显式键入mission到GQLMission。一般来说，您尝试从架构生成类型，但解析器的返回类型与架构指定的类型不匹配。

大多数时候，您面临的挑战是由模式设计中的某些缺陷或解析器实现中的一些黑客行为引起的。

因此，您的选择通常是：

• 放弃为解析器使用模式生成的类型（这是我最不喜欢的选项。）
• 更改您的架构以匹配您的解析器返回类型（解决架构缺陷。）
• 更改您的解析器以匹配您的架构返回类型（解决解析器缺陷。）
• 更改您的架构和解析器以返回一些新的共享类型（解决架构缺陷并更新新架构的解析器实现。）

假设您打算继续为解析器使用架构生成的类型，我们可以消除选项 1 并考虑适用于您的情况的最后三个选项。

2. 让您的解析器实现正确的类型，并更新您的架构以匹配。这意味着更改GQLMission架构中的类型以匹配解析器的返回类型（包括missionPatchLarge和missionPatchSmall属性），并允许您的客户端直接通过架构查询来查询其中之一或两者。
3. 让您的架构成为正确的类型，并更新您的解析器实现以匹配。这意味着摆脱多余的返回属性（missionPatchLarge和missionPatchSmall），您当前正在使用它们来简化实现，并missionPatch在missionPatchResolver子解析器中重新获取适当的值（理想情况下命中缓存以防止性能命中）。
4. missionPatch重新考虑您对模式的表示。考虑 a 的性质missionPatch。这真的是一个非此即彼的情况吗？该解决方案将涉及围绕 size 和 更改模式 API 的形状missionPatch，然后需要将其镜像到您的解析器实现上。

你做什么将取决于 a 的性质missionPatch。我的猜测是最后三个选项之一在这里是有意义的。如果这两种类型实际上是不同的变体，则更改为missionPatch可能有意义，它返回一个对象数组，可以通过 进行过滤。如果一个是另一个的衍生，那么将它们保留为单独的并通过模式公开字符串可能是最有意义的。missionPatchmissionPatchesMissionPatchsizemissionPatchmissionPatchSmall

编辑：查看您正在使用的 api，很明显这些是可以请求的独立值。没有什么小或大的使命。这些是同一任务的不同尺寸的图像。我的方法可能是将这两个值直接包含在您的架构中或包含在嵌套missionPatch属性上，例如

export type GQLMission = {
  name?: Maybe<Scalars['String']>,

  smallPatchUrl: String,
  largePatchUrl: String,

  # OR

  patch?: MissionPatch,
};

export type MissionPatch = {
  smallUrl: String,
  largeUrl: String
};

旁注：通过图像自身的值对象类型来表示图像并不罕见，其中可能包括不同大小的图像的 url 以及有关图像的详细信息（如长宽比或本机宽度或高度）。