API tRPC Selamat Jenis dari Hujung ke Hujung · Pelajaran

Penstrukturan dengan Penghala tRPC

Pelajari cara menyusun API anda menjadi modul logik menggunakan penghala tRPC dan menggabungkannya dengan berkesan.

Pelajaran 1 daripada 411 langkah

Penstrukturan dengan Penghala tRPC ialah pelajaran API tRPC Selamat Jenis dari Hujung ke Hujung percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus API tRPC Selamat Jenis dari Hujung ke Hujung merangkumi sejumlah 4 pelajaran.

Susun API Anda dengan Penghala

Apabila aplikasi anda berkembang, API anda boleh menjadi berserabut. Penghala tRPC membantu anda menyusun API ke dalam modul yang logik dan boleh digunakan semula.

Anggap penghala sebagai folder untuk titik akhir API anda. Daripada menggunakan satu fail yang besar, anda mengumpulkan operasi berkaitan bersama-sama.

Kemodularan: Pecahkan API yang kompleks.
Kebolehbacaan: Bahagian tertentu lebih mudah difahami.
Kebolehskalaan: Penambahan ciri baharu menjadi lebih mudah.

Mentakrifkan Penghala Pertama Anda

Dalam tRPC, anda mencipta penghala menggunakan trpc.router(). Fungsi ini berasal daripada tika tRPC anda, yang kita anggap telah disediakan.

Penghala bertindak sebagai bekas untuk prosedur API anda (query dan mutation). Setiap penghala boleh mempunyai set prosedurnya sendiri.

Beginilah cara anda boleh mentakrifkan penghala "user" yang ringkas:

const userRouter = t.router({
  // Procedures will go here
});

Prosedur dalam Penghala

Setelah mempunyai penghala, anda boleh menambah prosedur kepadanya. Prosedur ialah titik akhir API sebenar yang melaksanakan tindakan seperti mendapatkan data (query) atau mengubah data (mutation).

Anda melampirkan prosedur menggunakan kaedah seperti .query() atau .mutation() terus pada tika penghala anda. Sebagai contoh, penghala pengguna mungkin mempunyai query getById.

const userRouter = t.router({
  getById: t.procedure
    .input(z.string())
    .query(({ input }) => {
      return { id: input, name: `User ${input}` };
    }),
});

Penghala Pengguna Ringkas dalam Tindakan

Mari lihat penghala tRPC asas untuk pengguna. Contoh ini merangkumi persediaan minimum supaya boleh dijalankan, dengan tumpuan pada takrif penghala.

appRouter ialah penghala utama kita yang akan mengandungi semua penghala lain. Di sini, kita hanya menyediakan satu userRouter dengan query ringkas.

// src/server/trpc.ts (simplified for example)
import { initTRPC } from '@trpc/server';
import { createExpressMiddleware } from '@trpc/server/adapters/express';
import express from 'express';

const t = initTRPC.create();

// Define a user router
const userRouter = t.router({
  getById: t.procedure
    .input((val: unknown) => {
      if (typeof val === 'string') return val;
      throw new Error('Input must be a string');
    })
    .query(({ input }) => {
      // In a real app, you'd fetch from a database
      return { id: input, name: `User ${input}` };
    }),
});

// The main app router that will merge all sub-routers
const appRouter = t.router({
  user: userRouter, // Attach the user router
});

// Export type definition for client-side
export type AppRouter = typeof appRouter;

// --- Express Server Setup (for runnable example) ---
const app = express();
app.use(
  '/trpc',
  createExpressMiddleware({
    router: appRouter,
    createContext: () => ({}),
  })
);

const server = app.listen(3000, () => {
  console.log('tRPC server listening on http://localhost:3000/trpc');
  console.log('Try visiting: http://localhost:3000/trpc/user.getById?input="123"');
});

// To stop the server and exit gracefully after a short delay
setTimeout(() => {
  console.log('Server shutting down.');
  server.close(() => {
    process.exit(0);
  });
}, 5000);

Penskalaan dengan Berbilang Penghala

Bayangkan API untuk laman e-dagang. Anda mungkin mempunyai operasi untuk users, products, orders dan payments.

Meletakkan semuanya dalam satu penghala akan menjadikannya besar dan sukar diurus. Sebaliknya, anda mencipta penghala berasingan bagi setiap domain logik:

userRouter untuk tugas berkaitan pengguna.
productRouter untuk pengurusan produk.
orderRouter untuk pemprosesan pesanan.

Ini memastikan pangkalan kod anda kemas dan menggalakkan kerjasama pasukan yang lebih baik.

Menggabungkan Penghala dengan Merge

Setelah mempunyai beberapa penghala individu, anda memerlukan cara untuk menggabungkannya menjadi satu API yang bersatu supaya boleh digunakan oleh bahagian hadapan. Di sinilah router.merge() digunakan.

Anda menggunakan .merge() pada penghala utama atau "akar" untuk memasukkan semua subpenghala. Ini menjadikan semua prosedur daripada subpenghala tersedia di bawah ruang nama tertentu yang ditentukan oleh kunci yang diberikan.

Menggabungkan Penghala Pengguna dan Catatan

Mari kembangkan contoh kita untuk menyertakan postRouter, kemudian gabungkannya dengan userRouter ke dalam satu appRouter.

Perhatikan cara kita melampirkan setiap subpenghala pada kunci (contohnya, user: userRouter), lalu mencipta struktur bersarang untuk panggilan API kita.

// src/server/trpc.ts (simplified for example)
import { initTRPC } from '@trpc/server';
import { createExpressMiddleware } from '@trpc/server/adapters/express';
import express from 'express';

const t = initTRPC.create();

// Define a user router
const userRouter = t.router({
  getById: t.procedure
    .input((val: unknown) => {
      if (typeof val === 'string') return val;
      throw new Error('Input must be a string');
    })
    .query(({ input }) => {
      return { id: input, name: `User ${input}` };
    }),
});

// Define a post router
const postRouter = t.router({
  getAll: t.procedure
    .query(() => {
      return [{ id: 'p1', title: 'First Post' }, { id: 'p2', title: 'Second Post' }];
    }),
  create: t.procedure
    .input((val: unknown) => {
      if (typeof val === 'object' && val !== null && 'title' in val && typeof val.title === 'string') return val as { title: string };
      throw new Error('Input must be an object with a title string');
    })
    .mutation(({ input }) => {
      return { id: `new-${Date.now()}`, title: input.title };
    }),
});

// The main app router that merges all sub-routers
const appRouter = t.router({
  user: userRouter, // Attach user router under 'user' namespace
  post: postRouter, // Attach post router under 'post' namespace
});

export type AppRouter = typeof appRouter;

// --- Express Server Setup (for runnable example) ---
const app = express();
app.use(express.json()); // For handling mutation inputs
app.use(
  '/trpc',
  createExpressMiddleware({
    router: appRouter,
    createContext: () => ({}),
  })
);

const server = app.listen(3000, () => {
  console.log('tRPC server listening on http://localhost:3000/trpc');
  console.log('Available endpoints:');
  console.log('  GET /trpc/user.getById?input="456"');
  console.log('  GET /trpc/post.getAll');
  console.log('  POST /trpc/post.create (body: {"title": "New Post"})');
});

setTimeout(() => {
  console.log('Server shutting down.');
  server.close(() => {
    process.exit(0);
  });
}, 5000);

Mengakses Prosedur yang Digabungkan

Setelah penghala digabungkan, client bahagian hadapan anda boleh mengakses prosedur menggunakan tatatanda titik, yang mencerminkan struktur bersarang yang anda takrifkan.

Untuk memanggil query pengguna: client.user.getById(...)
Untuk memanggil query catatan: client.post.getAll()
Untuk memanggil mutation catatan: client.post.create(...)

Konvensyen penamaan yang jelas ini menjadikan API anda intuitif dan mudah dinavigasi.

Menyusun Fail Penghala Anda

Untuk projek yang lebih besar, setiap penghala biasanya diletakkan dalam failnya sendiri. Ini memastikan pangkalan kod anda modular dan mudah dinavigasi.

Struktur biasa mungkin kelihatan seperti ini:

src/server/trpc.ts (tika tRPC, takrif penghala akar)
src/server/routers/user.ts (takrif userRouter)
src/server/routers/post.ts (takrif postRouter)
src/server/index.ts (persediaan server, penggabungan penghala)

Semakan Penggabungan Penghala

Anda mempunyai productRouter dan orderRouter. Anda mahu menggabungkannya ke dalam appRouter utama supaya kedua-duanya boleh diakses sebagai client.product... dan client.order....

Petikan kod yang manakah menggabungkan penghala ini dengan betul?

Jawab dalam pelajaran interaktif

Imbas Kembali dan Langkah Seterusnya

Anda telah mempelajari cara penghala tRPC membantu menyusun API anda ke dalam modul yang logik dan mudah diurus. Dengan mentakrifkan penghala individu bagi domain yang berbeza, kemudian menggabungkannya ke dalam penghala akar, anda mencipta struktur API yang boleh diskalakan dan diselenggara.

t.router(): Mencipta penghala baharu.
Prosedur: Ditambahkan pada penghala menggunakan .query() atau .mutation().
Penggabungan: Gabungkan penghala menjadi satu API dengan menetapkannya kepada kunci dalam takrif penghala akar.

Seterusnya, anda akan mendalami pelaksanaan prosedur query tertentu!

Percuma untuk bermula

Pelajari API tRPC Selamat Jenis dari Hujung ke Hujung dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 10
Pelajaran: 40

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Penstrukturan dengan Penghala tRPC” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung, termasuk “Penstrukturan dengan Penghala tRPC”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus API tRPC Selamat Jenis dari Hujung ke Hujung merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Penstrukturan dengan Penghala tRPC”?

Pelajari cara menyusun API anda menjadi modul logik menggunakan penghala tRPC dan menggabungkannya dengan berkesan. Anda berlatih API tRPC Selamat Jenis dari Hujung ke Hujung menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan API tRPC Selamat Jenis dari Hujung ke Hujung?

Tiada pengalaman terdahulu diperlukan. Pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Penstrukturan dengan Penghala tRPC” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran API tRPC Selamat Jenis dari Hujung ke Hujung ini?

Ya. Setiap pelajaran API tRPC Selamat Jenis dari Hujung ke Hujung menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke API tRPC Selamat Jenis dari Hujung ke Hujung