TypeScript Academy · Pelajaran

Keamanan Tipe Menyeluruh: Alur Kerja Skema Terlebih Dahulu

Pertahankan satu sumber kebenaran dari skema hingga klien.

Pelajaran 4 dari 413 langkah

Keamanan Tipe Menyeluruh: Alur Kerja Skema Terlebih Dahulu adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Apa Itu Skema sebagai Sumber Utama

Pendekatan skema sebagai sumber utama berarti skema GraphQL adalah satu-satunya sumber kebenaran. Tipe sisi klien, fungsi penyelesai sisi server, dan kontrak API semuanya diturunkan darinya—sehingga mencegah lapisan mana pun menjadi tidak sinkron.

# The workflow:
# 1. Define schema (.graphql or SDL)
# 2. Generate server resolver types
# 3. Generate client operation types
# 4. Both sides automatically stay in sync

Mendefinisikan Skema

Tulis skema GraphQL Anda dalam SDL (berkas .graphql), lalu simpan ke repositori sebagai kontrak antara klien dan server.

# schema.graphql
type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  user(id: ID!): User
}

Server: Menghasilkan Tipe Fungsi Penyelesai

Jalankan codegen dengan pengaya typescript-resolvers untuk menghasilkan deklarasi fungsi penyelesai bertipe dari skema.

# Server codegen step
npx graphql-codegen --config codegen.server.yml

Klien: Menghasilkan Tipe Operasi

Jalankan codegen dengan typescript-operations serta pengaya Apollo/urql untuk menghasilkan kait bertipe dari berkas operasi .graphql.

# Client codegen step
npx graphql-codegen --config codegen.client.yml

Mendeteksi Perubahan yang Merusak

Gunakan graphql-inspector untuk mendeteksi perubahan skema yang merusak (menghapus bidang atau mengubah tipe) sebelum perubahan tersebut mencapai produksi.

npx graphql-inspector diff ./api/schema.graphql ./api/schema.new.graphql
# Reports: BREAKING: Field 'User.email' was removed

Registri Skema

Registri skema (Apollo Studio, Hive) menyimpan versi skema, melacak perubahan dari waktu ke waktu, dan memberikan peringatan tentang perubahan yang merusak dalam CI.

# Push schema to Apollo Studio:
npx apollo schema:push --endpoint https://api.example.com/graphql

Membuat Tiruan dengan Skema

Gunakan skema untuk menghasilkan data tiruan selama pengembangan klien tanpa server nyata, sehingga tiruan tetap sesuai dengan skema.

import { buildClientSchema, introspectionFromSchema } from "graphql";
import { addMocksToSchema } from "@graphql-tools/mock";
const schema = buildClientSchema(introspectionResult);
const mockedSchema = addMocksToSchema({ schema });

tRPC sebagai Alternatif

Untuk proyek yang hanya menggunakan TypeScript, tRPC menyediakan keamanan tipe menyeluruh tanpa bahasa skema—tipe router server IS kontrak klien.

// Server: router infers types
const router = t.router({ getUser: t.procedure.query(() => fetchUser()) });
// Client: types flow automatically via inference
const { data } = trpc.getUser.useQuery();

Zod + tRPC untuk Validasi

Gabungkan skema Zod dengan validator masukan tRPC untuk validasi saat runtime dan tipe saat kompilasi dari satu definisi.

const createUser = t.procedure
  .input(z.object({ name: z.string(), email: z.string().email() }))
  .mutation(({ input }) => saveUser(input));
// input: { name: string; email: string } — from Zod schema

CI: Alur Keamanan Skema Menyeluruh

Alur CI lengkap untuk keamanan dengan pendekatan skema sebagai sumber utama: periksa gaya skema → periksa perubahan yang merusak → jalankan codegen → periksa tipe → jalankan pengujian.

# .github/workflows/schema.yml
- run: npx graphql-inspector validate ...
- run: npx graphql-codegen --check
- run: npx tsc --noEmit
- run: npm test

Ringkasan: Alur Kerja Skema sebagai Sumber Utama

TypeScript dengan pendekatan skema sebagai sumber utama: definisikan SDL → hasilkan tipe fungsi penyelesai server → hasilkan tipe operasi klien → deteksi perubahan yang merusak dalam CI. Skema adalah satu-satunya sumber kebenaran untuk semua lapisan keamanan tipe.

Pemeriksaan Singkat

Apa peran skema GraphQL dalam alur kerja dengan pendekatan skema sebagai sumber utama?

Jawab di pelajaran interaktif

Yang Anda Pelajari

Alur kerja TypeScript dengan pendekatan skema sebagai sumber utama menurunkan semua tipe dari skema GraphQL. Hasilkan tipe fungsi penyelesai untuk server dan tipe operasi untuk klien, deteksi perubahan yang merusak dalam CI, serta pelihara skema sebagai kontrak antara semua lapisan.

Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 101
Pelajaran: 352

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Keamanan Tipe Menyeluruh: Alur Kerja Skema Terlebih Dahulu” gratis?

Ya — teks lengkap “Keamanan Tipe Menyeluruh: Alur Kerja Skema Terlebih Dahulu” 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 “Keamanan Tipe Menyeluruh: Alur Kerja Skema Terlebih Dahulu”?

Pertahankan satu sumber kebenaran dari skema hingga klien. 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 4 dari 4.

Berapa lama pelajaran “Keamanan Tipe Menyeluruh: Alur Kerja Skema Terlebih Dahulu” 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

Skema GraphQL ke Tipe TypeScript
Resolver Bertipe dengan GraphQL Code Generator
Klien GraphQL Bertipe dengan Apollo dan urql
Keamanan Tipe Menyeluruh: Alur Kerja Skema Terlebih Dahulu

← Kembali ke TypeScript Academy