TypeScript Academy · Pelajaran

Mendefinisikan Router dan Prosedur

Bangun kueri dan mutasi dengan validasi input.

Mendefinisikan Router dan Prosedur 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.

Menginisialisasi tRPC

Setiap bagian belakang tRPC dimulai dengan membuat instans menggunakan initTRPC. Instans ini mengembalikan pembuat untuk perute dan prosedur. Biasanya Anda membuatnya sekali lalu mengekspor bagian yang diperlukan.

import { initTRPC } from '@trpc/server';

const t = initTRPC.create();
export const router = t.router;
export const publicProcedure = t.procedure;

Prosedur Pertama

Prosedur adalah satu titik akhir API. Prosedur paling sederhana adalah kueri yang mengembalikan sebuah nilai. publicProcedure.query mendefinisikan titik akhir yang dapat dibaca tanpa masukan.

import { router, publicProcedure } from './trpc';

const appRouter = router({
  health: publicProcedure.query(() => 'ok'),
});

Memvalidasi Masukan

Prosedur menyatakan masukannya dengan validator, biasanya berupa skema zod. .input(schema) memvalidasi saat waktu proses sekaligus menginferensikan tipe masukan untuk penyelesai dan client.

import { z } from 'zod';

const greet = publicProcedure
  .input(z.object({ name: z.string() }))
  .query(({ input }) => 'Hello, ' + input.name);

Membaca Masukan

Di dalam penyelesai, masukan yang telah divalidasi tersedia sebagai input dan sepenuhnya bertipe berdasarkan skema. Tidak ada pengubahan tipe secara manual; zod dan tRPC menginferensikan bentuknya bersama-sama.

const byId = publicProcedure
  .input(z.object({ id: z.number() }))
  .query(({ input }) => {
    // input.id is number
    return { id: input.id, name: 'Alice' };
  });

Mutasi

Gunakan .mutation untuk operasi yang mengubah data. Bentuknya sama seperti kueri, tetapi menandakan penulisan, yang memengaruhi penyinggahan client dan metode HTTP.

const createUser = publicProcedure
  .input(z.object({ name: z.string() }))
  .mutation(({ input }) => {
    return { id: 1, name: input.name };
  });

Membangun Perute Aplikasi

Kumpulkan prosedur ke dalam sebuah perute dengan meneruskan objek ke router(...). Setiap kunci menjadi nama prosedur yang dapat dipanggil. appRouter ini adalah seluruh API Anda.

const appRouter = router({
  greet,
  byId,
  createUser,
});

Perute Bertingkat

Perute dapat dibuat bertingkat untuk mengatur API yang besar. Sebuah nilai dalam objek perute dapat berupa perute itu sendiri, sehingga menghasilkan panggilan dengan ruang nama seperti user.byId.

const userRouter = router({ byId, createUser });

const appRouter = router({
  user: userRouter,
  greet,
});
// call paths: user.byId, user.createUser, greet

Mengekspor Tipe Perute

Ekspor yang paling penting adalah tipe perute. client akan mengimpornya untuk mendapatkan keamanan tipe penuh. Ekspor nilainya untuk adaptor peladen dan tipenya untuk client.

export const appRouter = router({ user: userRouter });
export type AppRouter = typeof appRouter;

Memasang Adaptor

Untuk melayani perute melalui HTTP, pasang sebuah adaptor. tRPC menyediakan adaptor untuk Node mandiri, Express, Next.js, Fetch, dan lainnya. Adaptor mengubah permintaan masuk menjadi panggilan prosedur.

import { createHTTPServer } from '@trpc/server/adapters/standalone';

createHTTPServer({ router: appRouter }).listen(3000);

Mengatur Berkas

Tata letak yang umum adalah: trpc.ts yang berisi initTRPC serta router/publicProcedure yang diekspor, perute fitur dalam berkasnya sendiri, dan appRouter utama yang menggabungkannya. Menyimpan initTRPC di satu tempat mencegah pembuatan banyak instans.

// trpc.ts: initTRPC.create(), export router + publicProcedure
// routers/user.ts: userRouter
// router.ts: appRouter = router({ user: userRouter })

Rangkuman Inferensi Masukan

Karena .input(schema) memvalidasi sekaligus menginferensikan, Anda menulis skema sekali dan mendapatkan pemeriksaan saat waktu proses serta tipe statis. client akan melihat persis masukan yang diharapkan setiap prosedur, yang diturunkan dari skema-skema tersebut.

const search = publicProcedure
  .input(z.object({ q: z.string(), page: z.number().optional() }))
  .query(({ input }) => ({ q: input.q, page: input.page ?? 1 }));

Uji Cepat

Uji pemahaman Anda tentang perute dan prosedur.

Rangkuman

Anda telah membangun bagian belakang tRPC.

initTRPC.create() menghasilkan pembuat router dan procedure.
.input(schema) memvalidasi dan menginferensikan masukan.
.query membaca; .mutation menulis.
Gabungkan prosedur ke dalam appRouter dan ekspor type AppRouter = typeof appRouter.

Berikutnya: menggunakannya dengan client yang sepenuhnya bertipe.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mendefinisikan Router dan Prosedur” gratis?

Ya — teks lengkap “Mendefinisikan Router dan Prosedur” 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 “Mendefinisikan Router dan Prosedur”?

Bangun kueri dan mutasi dengan validasi input. 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 “Mendefinisikan Router dan Prosedur” 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

← Kembali ke TypeScript Academy