0Pricing
TypeScript Academy · Ders

GraphQL Şemasından TypeScript Türlerine

Kod üretimiyle .graphql dosyalarından türler oluşturun

GraphQL Şemasından TypeScript Türlerine, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 4 dersten oluşur.

Sorun: Şema ve Türlerin Ayrışması

GraphQL projelerinde, otomasyon olmadan sunucu şeması ile istemci TypeScript türleri kolayca birbirinden ayrılabilir. Kod üretimi, türleri doğrudan şemadan türeterek bu sorunu çözer.

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

GraphQL Kod Üreteci

@graphql-codegen/cli, GraphQL şemanızı okur ve TypeScript türlerini otomatik olarak oluşturur.

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

codegen.yml Yapılandırması

Şema kaynağını ve çıktı konumunu codegen.yml içinde yapılandırın.

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

Üreteci Çalıştırma

Şemanızdan TypeScript türleri oluşturmak için graphql-codegen çalıştırın.

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

Oluşturulan Çıktı Örneği

Oluşturulan dosya, şemanızdaki her GraphQL türüyle eşleşen TypeScript arayüzlerini içerir.

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

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

Uzak Uç Noktadan Şema

Kod üretimi, iç gözlem kullanarak şemayı canlı bir GraphQL uç noktasından da alabilir.

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

Skaler Tür Eşleme

Özel GraphQL skalerlerini kod üretimi yapılandırmasında TypeScript türleriyle eşleyin.

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

Numaralandırma İşleme

GraphQL numaralandırmaları, kod üretimi yapılandırmasına bağlı olarak TypeScript dize numaralandırmalarına veya birleşim türlerine eşlenir.

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

Boş Olmayan ve Maybe

GraphQL'de null olabilir alanlar, oluşturulan türlerde şemanın null olabilirlik durumunu yansıtacak şekilde Maybe<T> (yani T | null | undefined) olur.

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

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

CI Entegrasyonu

Oluşturulan türlerin güncel olduğunu doğrulamak için kod üretimini CI'da çalıştırın. Şema değiştiği hâlde yeniden oluşturulmadıysa derlemeyi başarısız kılın.

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

Özet: Şemadan Türlere

GraphQL Kod Üreteci şemanızı okur ve TypeScript türlerini otomatik olarak oluşturur. codegen.yml ile yapılandırın, graphql-codegen çalıştırın ve şema ayrışmasını önlemek için CI'a entegre edin.

Hızlı Kontrol

GraphQL Kod Üretecinin temel amacı nedir?

Öğrendikleriniz

GraphQL Kod Üreteci, şemanızdan TypeScript oluşturarak şema-tür ayrışmasını ortadan kaldırır. Aracı codegen.yml ile yapılandırın, özel skalerleri eşleyin ve güncelliği zorunlu kılmak için CI'a entegre edin.

Sıkça Sorulan Sorular

“GraphQL Şemasından TypeScript Türlerine” dersi ücretsiz mi?

Evet — “GraphQL Şemasından TypeScript Türlerine” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 4 dersten oluşur.

“GraphQL Şemasından TypeScript Türlerine” dersinde ne öğreneceğim?

Kod üretimiyle .graphql dosyalarından türler oluşturun TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“GraphQL Şemasından TypeScript Türlerine” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. GraphQL Şemasından TypeScript Türlerine
  2. GraphQL Kod Üreticisiyle Türlendirilmiş Çözücüler
  3. Apollo ve urql ile Türlendirilmiş GraphQL İstemcisi
  4. Uçtan Uca Tür Güvenliği: Önce Şema İş Akışı
← TypeScript Academy Sayfasına Dön