TypeScript Academy · レッスン

GraphQLスキーマからTypeScript型へ

Q: 「GraphQLスキーマからTypeScript型へ」で何を学びますか？

codegenで.graphqlファイルから型を生成します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

codegenで.graphqlファイルから型を生成します。

「GraphQLスキーマからTypeScript型へ」はCoddyKit上の無料TypeScript Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

問題：スキーマと型のずれ

GraphQLプロジェクトでは、自動化しないとサーバーのスキーマとクライアントのTypeScript型が簡単にずれてしまいます。コード生成を使うと、スキーマから直接型を導出できるため、この問題を解決できます。

# Without codegen: manual types that drift from schema
interface User { id: string; name: string; } // may not match schema

GraphQL Code Generator

@graphql-codegen/cliはGraphQLスキーマを読み取り、TypeScript型を自動的に生成します。

npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript

codegen.ymlの設定

スキーマのソースと出力先をcodegen.ymlで設定してください。

# codegen.yml
schema: "./api/schema.graphql"
generates:
  src/generated/types.ts:
    plugins:
      - typescript

ジェネレーターを実行する

graphql-codegenを実行して、スキーマからTypeScript型を生成してください。

npx graphql-codegen
# Generates src/generated/types.ts with all schema types

生成される出力の例

生成されたファイルには、スキーマ内のすべてのGraphQL型に対応するTypeScriptインターフェースが含まれます。

// src/generated/types.ts (generated)
export type User = {
  __typename?: "User";
  id: string;
  name: string;
  email: string;
};

export type Query = {
  __typename?: "Query";
  user?: Maybe<User>;
};

リモートエンドポイントからスキーマを取得する

Codegenはイントロスペクションを使って、稼働中のGraphQLエンドポイントからスキーマを取得することもできます。

# codegen.yml with remote schema
schema:
  - https://api.example.com/graphql:
      headers:
        Authorization: "Bearer ${AUTH_TOKEN}"

スカラー型のマッピング

Codegenの設定で、カスタムGraphQLスカラーをTypeScript型にマッピングしてください。

# codegen.yml
config:
  scalars:
    DateTime: string
    JSON: Record<string, unknown>
    Upload: File

列挙型の処理

GraphQLの列挙型は、Codegenの設定に応じてTypeScriptの文字列列挙型またはユニオン型にマッピングされます。

# Generated from GraphQL enum Role { ADMIN USER GUEST }
export enum Role {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST",
}

Non-NullとMaybe

GraphQLのnullableなフィールドは、スキーマのnull許容性を反映して、生成された型ではMaybe（つまりT | null | undefined）になります。

// GraphQL: name: String (nullable)
// Generated: name?: Maybe<string>

// GraphQL: id: ID! (non-null)
// Generated: id: string

CIへの統合

生成された型が最新であることを確認するため、CIでcodegenを実行してください。スキーマが変更されたのに再生成されていない場合は、ビルドを失敗させます。

# CI: check no drift
npx graphql-codegen --check
# Exits 1 if generated files are out of date

振り返り：スキーマから型へ

GraphQL Code Generatorはスキーマを読み取り、TypeScript型を自動的に生成します。codegen.ymlで設定し、graphql-codegenを実行して、CIに統合することでスキーマとのずれを防いでください。

確認問題

GraphQL Code Generatorの主な目的は何ですか？

学んだこと

GraphQL Code GeneratorはスキーマからTypeScriptを生成することで、スキーマと型のずれをなくします。codegen.ymlで設定し、カスタムスカラーをマッピングして、CIに統合することで最新状態を維持してください。

よくある質問

「GraphQLスキーマからTypeScript型へ」レッスンは無料ですか？

はい。「GraphQLスキーマからTypeScript型へ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「GraphQLスキーマからTypeScript型へ」で何を学びますか？

codegenで.graphqlファイルから型を生成します。ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「GraphQLスキーマからTypeScript型へ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← TypeScript Academyに戻る