0Pricing
TypeScript Academy · Pelajaran

Resolver Bertipe dengan GraphQL Code Generator

Tulis resolver dengan tipe masukan dan nilai kembali yang tepat.

Resolver Bertipe dengan GraphQL Code Generator adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Masalah Pemberian Tipe Resolver

Resolver GraphQL adalah fungsi biasa, tetapi tanpa tanda tangan bertipe, Anda mudah mengembalikan bentuk yang salah. Codegen menghasilkan tipe resolver yang memastikan nilai kembalian benar.

// Without typed resolvers — any type allowed
const userResolver = async (_, { id }) => fetchUser(id);

Menambahkan Plugin Resolvers

Pasang dan konfigurasikan @graphql-codegen/typescript-resolvers untuk menghasilkan tipe peta resolver.

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

codegen.yml untuk Resolvers

Tambahkan keluaran plugin resolvers di samping tipe TypeScript dasar.

# codegen.yml
generates:
  src/generated/types.ts:
    plugins:
      - typescript
  src/generated/resolvers.ts:
    plugins:
      - typescript-resolvers

Menggunakan ResolverMap yang Dibuat

Terapkan tipe Resolvers yang dibuat pada objek peta resolver Anda untuk keamanan tipe penuh.

import { Resolvers } from "./generated/resolvers";

const resolvers: Resolvers = {
  Query: {
    user: async (_, { id }) => fetchUser(id),
    // Return type enforced: must match User schema
  },
};

Pemberian Tipe Context

Berikan tipe context Anda ke generik Resolvers agar fungsi resolver menerima objek context bertipe.

interface Context { db: Database; user?: AuthUser; }

// codegen.yml
config:
  contextType: "src/context#Context"

// Generated: Resolvers<Context>
const resolvers: Resolvers<Context> = {
  Query: {
    me: (_, __, ctx) => ctx.user, // ctx: Context
  },
};

Tipe Pemetaan

Tipe pemetaan memungkinkan Anda memetakan tipe GraphQL ke tipe model internal, sehingga resolver dapat mengembalikan objek domain, bukan tipe keluaran GraphQL.

# codegen.yml
config:
  mappers:
    User: "src/models#UserModel"

Pemberian Tipe Resolver Field

Resolver field individual pada tipe juga diberi tipe, termasuk argumen parent dan context.

// Typed field resolver on User type
const resolvers: Resolvers<Context> = {
  User: {
    fullName: (parent) => `${parent.firstName} ${parent.lastName}`,
    // parent is UserModel (from mapper)
  },
};

Mutasi Bertipe

Resolver mutasi menerima argumen input bertipe yang diturunkan dari tipe input skema.

// Schema: createUser(input: CreateUserInput!): User!
const resolvers: Resolvers = {
  Mutation: {
    createUser: (_, { input }) => {
      // input: CreateUserInput — fully typed
      return createUser(input.name, input.email);
    },
  },
};

Subscription Bertipe

Resolver subscription memiliki fungsi subscribe dan fungsi resolve, yang keduanya diberi tipe oleh codegen.

const resolvers: Resolvers = {
  Subscription: {
    messageAdded: {
      subscribe: () => pubsub.asyncIterator("MESSAGE_ADDED"),
      resolve: (payload) => payload.messageAdded, // typed
    },
  },
};

Menjaga Sinkronisasi Codegen

Tambahkan hook pra-pembangunan atau pra-komit untuk membuat ulang tipe resolver ketika skema berubah, sehingga tipe usang tidak masuk ke produksi.

// package.json
{
  "scripts": {
    "predev": "graphql-codegen",
    "prebuild": "graphql-codegen"
  }
}

Rangkuman: Resolver Bertipe

Plugin codegen typescript-resolvers menghasilkan tipe Resolvers yang memastikan bentuk kembalian, tipe argumen, dan struktur context yang benar di seluruh resolver GraphQL Anda.

Pemeriksaan Singkat

Apa fungsi opsi konfigurasi contextType dalam codegen?

Yang Anda Pelajari

Resolver GraphQL bertipe dengan codegen memastikan tipe kembalian, bentuk argumen, dan objek context yang benar di seluruh peta resolver Anda. Gunakan tipe pemetaan untuk objek domain dan pertahankan codegen dalam alur kerja pembangunan agar tidak terjadi ketidaksinkronan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Resolver Bertipe dengan GraphQL Code Generator” gratis?

Ya — teks lengkap “Resolver Bertipe dengan GraphQL Code Generator” 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 “Resolver Bertipe dengan GraphQL Code Generator”?

Tulis resolver dengan tipe masukan dan nilai kembali yang tepat. 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 2 dari 4.

Berapa lama pelajaran “Resolver Bertipe dengan GraphQL Code Generator” 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