Spring for GraphQLで日付型を設定しGraphQL Code Generatorで型として使用できるようにする

概要

Spring for GraphQLのスキーマ定義で日付型を設定し、それをGraphQL Code Generatorでコード出力して日付型として使用できるようにする方法のメモ書きです。

対応方針

• Spring for GraphQLで日付型を使用するために[SpringBoot2.7][GraphQL]カスタムscalar型を利用できるようにするで紹介されている、graphql-java-extended-scalarsのライブラリを使用することにします。ライブラリの内容としてはgraphql-java-extended-scalarsのReadmeにある通り、日付型に加えJavaのLong型などにも対応しています。
• GraphQL Code Generator側ではGraphQL Code GeneratorでTypeScriptのDateを扱うの記事を参考に、codegen.tsの設定に日付型の型設定を行います。

前提

• 使用したgraphql-java-extended-scalarsのバージョンは22.0です。
• 使用したgraphql-codegen/cliのバージョンは5.0.2です。また、今回の型の設定はgraphql-codegen/client-presetを用いて行いまして、使用したバージョンは4.3.3"です。

実装サンプル

まずはSpring for GraphQL側です。

今回はschema.graphqlsのMutationで設定し、以下の通りとなります。

scalar DateTime
  @specifiedBy(url: "https://scalars.graphql.org/andimarek/date-time.html")

type Mutation {
  addPost(
    title: String!
    visitedDate: DateTime!
    detail: String
  ): Boolean!
}

Controller側では、OffsetDateTimeで受け取ります。

@MutationMapping
public Boolean addPost(
    @Argument String title,
    @Argument OffsetDateTime visitedDate,
    @Argument String detail) {
	    // 実処理は割愛
        return true;
    }

続いてフロントエンド側の設定です。codegen.tsにて、以下のようにscalarsにDateTimeを設定します。

codegen.ts

const config: CodegenConfig = {
  schema: "schema.graphql",
  documents: ["query/*.ts"],
  ignoreNoDocuments: true, // for better experience with the watcher
  generates: {
    "./gql/": {
      preset: "client",
      presetConfig: {
        fragmentMasking: false,
      },
      config: {
        useTypeImports: true,
        scalars: {
          DateTime: "Date",
        },
      },
    },
  },
};

以下のような感じで、型がgenerateされます。

export type Scalars = {
  ID: { input: string; output: string; }
  String: { input: string; output: string; }
  Boolean: { input: boolean; output: boolean; }
  Int: { input: number; output: number; }
  Float: { input: number; output: number; }
  DateTime: { input: Date; output: Date; }
};

export type AddPostMutationVariables = Exact<{
  title: Scalars['String']['input'];
  visitedDate: Scalars['DateTime']['input'];
  detail?: InputMaybe<Scalars['String']['input']>;
}>;