More than 3 years have passed since last update.

graphql-toolsでDateTimeなど独自の型に対応する。

Posted at 2020-05-20

説明

graphql-toolsでGraphQLのスキーマからTypeScrptの型を生成しているんですが、GraphQLはStringやIntなど最低限の型しかなく、日付のDateですらデフォルトでは存在してません。

なのでDateTimeを独自の型として定義し、JavaScriptではDateで表すということをします。

まずこんなGraphQLのスキーマがあるとします。

// 独自の方として宣言
scalar DateTime

type Foo {
  id: ID!
  name: String
  createdAt: DateTime
}

そしてgraphql-toolsでTypeScriptの型を生成します。
ここでポイントは--passthroughCustomScalarsです。これをつけると独自の型をそのままのTypeScriptの型として生成します。

$ apollo client:codegen --target typescript --passthroughCustomScalars

こんな型ができます。
しかしTypeScriptは独自に定義したDateTimeという型を知りません。

export interface Foo {
  __typename: "Foo";
  id: string;
  name: string;
  createdAt: DateTime;
}

なのでDateTimeが何かを定義してあげます。

types.d.ts

declare type DateTime = string;

これでDateTimeの型を扱えるようになりました。