时间戳

首页 > 解决方案 > 如何将 GraphQL 与 TypeScript 和从 graphql-code-generator 生成的类型一起使用？

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

问题描述

我正在按照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 类型：

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()with的结果GQLLaunch，所以mission属性类型是GQLMission，并且这种类型只有两个属性，name并且missionPatch。它没有missionPatchSmall或missionPatchLarge因此我收到此错误：

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

resolvers.ts当文件尝试读取mission.missionPatchSmall或在type 的对象中mission.missionPatchLarge不存在时，文件中存在类似的错误：missionGQLMission

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

我不确定如何处理这个，建议？

标签： typescriptgraphqltypescript-typingsapollo-server

解决方案

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

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

因此，您的选择通常是：

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

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

  1. 让您的解析器实现正确的类型，并更新您的架构以匹配。这意味着更改GQLMission架构中的类型以匹配解析器的返回类型（包括两者missionPatchLarge和missionPatchSmall属性），并允许您的客户通过他们直接查询架构来查询一个或两个。
  2. 让您的模式作为正确的类型，并更新您的解析器实现以匹配。这意味着摆脱您当前用于简化实现的多余返回属性 (missionPatchLarge和)，并在子解析器中重新获取适当的值（理想情况下命中缓存以防止性能命中）。missionPatchSmallmissionPatchmissionPatchResolver
  3. 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 以及有关图像的详细信息，如纵横比或本机宽度或高度。

推荐阅读