0Pricing
TypeScript Academy · Pelajaran

Skema GraphQL ke Tipe TypeScript

Buat tipe dari file .graphql dengan codegen.

Skema GraphQL ke Tipe TypeScript adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Masalahnya: Skema dan Tipe Tidak Sinkron

Dalam proyek GraphQL, skema server dan tipe TypeScript klien mudah tidak sinkron tanpa otomatisasi. Pembuatan kode mengatasi hal ini dengan menurunkan tipe langsung dari skema.

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

Pembuat Kode GraphQL

@graphql-codegen/cli membaca skema GraphQL Anda dan secara otomatis membuat tipe TypeScript.

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

Konfigurasi codegen.yml

Konfigurasikan sumber skema dan lokasi keluaran dalam codegen.yml.

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

Menjalankan Pembuat Kode

Jalankan graphql-codegen untuk membuat tipe TypeScript dari skema Anda.

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

Contoh Keluaran yang Dibuat

Berkas yang dibuat berisi interface TypeScript yang cocok dengan setiap tipe GraphQL dalam skema Anda.

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

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

Skema dari Titik Akhir Jarak Jauh

Codegen juga dapat mengambil skema dari titik akhir GraphQL aktif menggunakan introspeksi.

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

Pemetaan Tipe Skalar

Petakan skalar GraphQL khusus ke tipe TypeScript dalam konfigurasi codegen.

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

Penanganan Enum

Enum GraphQL dipetakan ke enum string TypeScript atau tipe gabungan, bergantung pada konfigurasi codegen.

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

Non-Null dan Maybe

Field GraphQL yang dapat bernilai null menjadi Maybe (yaitu, T | null | undefined) dalam tipe yang dibuat, yang mencerminkan kemungkinan null pada skema.

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

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

Integrasi CI

Jalankan codegen di CI untuk memverifikasi bahwa tipe yang dibuat sudah mutakhir. Gagalkan pembangunan jika skema berubah tanpa dibuat ulang.

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

Rangkuman: Skema menjadi Tipe

Pembuat Kode GraphQL membaca skema Anda dan secara otomatis menghasilkan tipe TypeScript. Konfigurasikan dengan codegen.yml, jalankan graphql-codegen, dan integrasikan ke CI untuk mencegah skema tidak sinkron.

Pemeriksaan Singkat

Apa tujuan utama Pembuat Kode GraphQL?

Yang Anda Pelajari

Pembuat Kode GraphQL menghilangkan ketidaksinkronan antara skema dan tipe dengan menghasilkan TypeScript dari skema Anda. Konfigurasikan dengan codegen.yml, petakan skalar khusus, dan integrasikan ke CI untuk memastikan data tetap mutakhir.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Skema GraphQL ke Tipe TypeScript” gratis?

Ya — teks lengkap “Skema GraphQL ke Tipe TypeScript” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Skema GraphQL ke Tipe TypeScript”?

Buat tipe dari file .graphql dengan codegen. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Skema GraphQL ke Tipe TypeScript” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Skema GraphQL ke Tipe TypeScript
  2. Resolver Bertipe dengan GraphQL Code Generator
  3. Klien GraphQL Bertipe dengan Apollo dan urql
  4. Keamanan Tipe Menyeluruh: Alur Kerja Skema Terlebih Dahulu
← Kembali ke TypeScript Academy