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

【问题标题】：How to use GraphQL with TypeScript and typings generated from graphql-code-generator?如何将 GraphQL 与 TypeScript 和从 graphql-code-generator 生成的类型一起使用？
【发布时间】：2020-02-13 15:23:07
【问题描述】：

我正在关注 Apollo Docs tutorial 使用 TypeScript 构建 Apollo 服务器 (Express)，我还使用 GraphQL Code Generator 根据我的 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 类型：

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>,
}>;

这是我的resolvers.ts 文件：

import { GQLPatchSize } from '@typings/graphql/schema';
import { GQLResolvers } from '@typings/graphql/schema';

const resolvers: GQLResolvers = {
    Query: {
        launch: (_, args, { dataSources }) => {
            return dataSources.launchesAPI.getLaunchById(args);
        },
    },
    Mission: {
        missionPatch: (mission, { size } = { size: GQLPatchSize.Large }) => {
            return size === 'SMALL' ? mission.missionPatchSmall : mission.missionPatchLarge;
        },
    },
};

export { resolvers };

最后，我的launches.ts 文件带有LaunchesAPI 类：

import { GQLLaunch } from '@typings/graphql/schema';
import { GQLQueryLaunchArgs } from '@typings/graphql/schema';
import { RESTDataSource } from 'apollo-datasource-rest';

const SPACEX_API_ENDPOINT = 'https://api.spacexdata.com/v3/';

class LaunchesAPI extends RESTDataSource {
    constructor() {
        super();

        this.baseURL = SPACEX_API_ENDPOINT;
    }

    async getLaunchById({ id }: GQLQueryLaunchArgs) {
        const response = await this.get('launches', { flight_number: id });
        return this.launchReducer(response[0]);
    }

    launchReducer(launch: any): GQLLaunch {
        return {
            id: String(launch.flight_number) || '0',
            site: launch.launch_site && launch.launch_site.site_name,
            mission: {
                name: launch.mission_name,
                missionPatchSmall: launch.links.mission_patch_small,
                missionPatchLarge: launch.links.mission_patch,
            },
        };
    }
}

export { LaunchesAPI };

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

键入'{名称：任何；任务补丁小：任何；任务补丁大：任意； }' 不可分配给类型“GQLMission”。对象字面量只能指定已知属性，并且“missionPatchSmall”不存在输入“GQLMission”。 ts(2339)

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

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

我不知道如何处理这个，建议？

【问题讨论】：

标签： typescript graphql typescript-typings apollo-server

【解决方案1】：

您将不属于GQLMission 的属性放在mission 上，然后将mission 显式键入到GQLMission。概括地说，您试图从架构中生成类型，但解析器的返回类型与架构指定的类型不匹配。

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

因此，您的选择通常是：

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

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

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

您要做什么取决于missionPatch 的性质。我的猜测是最后三个选项之一在这里有意义。如果这两个missionPatch 类型实际上是不同的变体，则将missionPatch 更改为missionPatches 可能有意义，这将返回一个MissionPatch 对象数组，可以通过size 进行过滤。如果一个是另一个派生的，那么将它们作为单独的 missionPatch 和 missionPatchSmall 字符串通过架构公开可能最有意义。

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

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

  smallPatchUrl: String,
  largePatchUrl: String,

  # OR

  patch?: MissionPatch,
};

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

旁注：通过自己的值对象类型表示图像并不少见，其中可能包括不同大小图像的 url 以及有关图像的详细信息，例如纵横比或原生宽度或高度。

【讨论】：

我试图简单地按照教程将其转换为 TypeScript，但这个小细节看起来并不像架构有多大意义。关于您的选择... 1）不起作用，因为那样我也必须更改解析器上的类型，这将是一团糟； 2）我以前得出过这个结论，可行，但与教程的方向不同，但也许更有意义？ 3) 没看懂，能举个例子吗？ 4) 也不知道你说的是什么意思，感觉和第二点差不多？
另外，来自 REST API 的两个任务补丁都是字符串，而是指向图像的完整 URL。一张是大图，一张是小图。
如果您可以通过每个选项的示例来编辑您的答案，那就太棒了。这将是这个问题的一个很好的答案，最重要的是，它将帮助我准确地想象你的建议。我对 GraphQL 很陌生，我对您所说的内容的理解可能是错误的。如果你能抽出时间来写这些例子，这些例子真的会有所帮助。谢谢。
我在那里添加了更多细节。希望这可以解决问题。我诚实的意见是，您在架构设计中做出了决定，这并不能准确地代表您提供的实体，这让您在解析器实现中做了一些黑客行为以适应。使用 GraphQL，通常情况下，如果您发现某些事情不应该变得困难或复杂，那么您很可能误解了您试图在架构中表示的实体。跨度>
这是一个很好的答案！