API tRPC Selamat Jenis dari Hujung ke Hujung · Pelajaran

Mencipta Konteks tRPC

Fahami cara mencipta dan mengisi objek konteks tRPC dengan data khusus permintaan seperti maklumat pengguna.

Pelajaran 1 daripada 411 langkah

Mencipta Konteks 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.

Apakah Konteks tRPC?

Selamat datang! Dalam tRPC, konteks ialah objek khas yang dicipta untuk setiap permintaan masuk ke pelayan anda.

Anggaplah ia sebagai beg galas peribadi bagi setiap permintaan. Anda boleh mengisi beg ini dengan apa-apa data yang perlu diakses oleh prosedur tRPC anda.

Mengapa Menggunakan Konteks tRPC?

Konteks tRPC amat berguna untuk berkongsi data khusus permintaan merentas semua prosedur API anda. Ini menghalang anda daripada menghantar argumen yang sama berulang kali.

  • Pengesahan: Menyimpan butiran pengguna yang telah disahkan.
  • Sambungan Pangkalan Data: Menyediakan klien pangkalan data untuk permintaan semasa.
  • Data Khusus Permintaan: Mengakses pengepala, alamat IP atau maklumat permintaan yang lain.
  • Pembalakan: Melampirkan ID permintaan unik untuk penjejakan.

Mentakrifkan createContext

Anda mentakrifkan konteks menggunakan fungsi yang biasanya dinamakan createContext. Fungsi ini dijalankan sekali bagi setiap permintaan tRPC yang masuk.

Fungsi ini menerima objek yang mengandungi butiran tentang permintaan HTTP yang masuk seperti pengepala, dan harus mengembalikan objek konteks.

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

// This function runs on every request
function createContext(req: { headers: Record<string, string> }) {
  console.log('Context created for a new request!');
  return {
    // We'll add more here later!
  };
}

// We'll use this context to initialize tRPC
const t = initTRPC.context<ReturnType<typeof createContext>>().create();

console.log('tRPC initialized with context.');

Mengakses Butiran Permintaan

Dalam fungsi createContext anda, anda mendapat akses kepada objek permintaan HTTP yang mendasarinya. Ini membolehkan anda mengekstrak maklumat seperti pengepala permintaan atau parameter pertanyaan.

Mari kita ambil pengepala tersuai sebagai contoh.

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

function createContext(req: { headers: Record<string, string> }) {
  const userAgent = req.headers['user-agent'] || 'unknown';
  return {
    userAgent: userAgent
  };
}

type Context = ReturnType<typeof createContext>;
const t = initTRPC.context<Context>().create();

// Simulate a request
const mockRequest = {
  headers: { 'user-agent': 'CoddyKit-Browser' }
};

const ctx = createContext(mockRequest);
console.log('User Agent in context:', ctx.userAgent);

Mengisi Konteks dengan Data Tersuai

Anda boleh mengisi objek konteks dengan apa-apa data yang diperoleh daripada permintaan. Kes penggunaan yang biasa ialah menambahkan ID pengguna atau objek pengguna lengkap selepas pemeriksaan pengesahan.

Buat masa ini, mari kita tambahkan ID pengguna tiruan berdasarkan pengepala.

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

function createContext(req: { headers: Record<string, string> }) {
  // In a real app, this would come from a JWT or session
  const userId = req.headers['x-user-id'] || 'guest_user';
  return {
    userId: userId,
    timestamp: new Date().toISOString()
  };
}

type Context = ReturnType<typeof createContext>;
const t = initTRPC.context<Context>().create();

// Simulate a request with a custom user ID header
const mockRequest = {
  headers: { 'x-user-id': 'coddykit_student_123' }
};

const ctx = createContext(mockRequest);
console.log('Context for request:', ctx);

Mentaip Konteks Anda

TypeScript ialah kuasa hebat tRPC! Mentaip objek konteks dengan betul amat penting supaya tRPC dapat menyediakan keselamatan jenis menyeluruh dari hujung ke hujung.

Anda boleh membuat kesimpulan jenisnya terus daripada fungsi createContext menggunakan ReturnType.

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

function createContext(req: { headers: Record<string, string> }) {
  const userId = req.headers['x-user-id'] || 'anonymous';
  return {
    userId: userId
  };
}

// Infer the Context type from createContext function
type Context = ReturnType<typeof createContext>;

// Now, when initializing tRPC, provide this type
const t = initTRPC.context<Context>().create();

console.log('Context type inferred and used!');
// Example of how TypeScript would see the context:
// const typedContext: Context = { userId: 'some_id' };

Menggunakan Konteks dalam Prosedur

Setelah konteks ditakrifkan dan ditaip, mana-mana prosedur tRPC boleh mengaksesnya dengan mudah. Prosedur menerima objek dengan sifat ctx, yang menyimpan objek konteks anda.

Ini menjadikan data pengguna, klien pangkalan data dan data lain yang khusus untuk permintaan tersedia dengan mudah.

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

function createContext(req: { headers: Record<string, string> }) {
  const userId = req.headers['x-user-id'] || 'guest';
  return { userId };
}

type Context = ReturnType<typeof createContext>;
const t = initTRPC.context<Context>().create();

const appRouter = t.router({
  whoAmI: t.procedure.query(({ ctx }) => {
    // Access userId directly from ctx
    return `Hello, ${ctx.userId}!`;
  }),
});

console.log('Procedure defined using context.');

Konteks dalam Tindakan: Contoh Lengkap

Berikut ialah contoh lengkap yang dipermudah untuk menunjukkan cara createContext ditakrifkan dan cara datanya digunakan dalam prosedur tRPC.

Output ini mensimulasikan perkara yang akan dipulangkan oleh prosedur jika dipanggil dengan permintaan olok-olok.

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

// 1. Define your context function
function createContext(req: { headers: Record<string, string> }) {
  const userId = req.headers['x-user-id'] || 'anonymous_user';
  return {
    userId: userId,
    requestTime: new Date().toLocaleTimeString()
  };
}

// 2. Infer the context type for type safety
type Context = ReturnType<typeof createContext>;

// 3. Initialize tRPC with the context type
const t = initTRPC.context<Context>().create();

// 4. Define a simple procedure that uses context
const appRouter = t.router({
  getUserGreeting: t.procedure.query(({ ctx }) => {
    return `Welcome back, ${ctx.userId}! Last accessed at: ${ctx.requestTime}.`;
  }),
});

// --- Simulate a request and context creation ---
const mockRequest = {
  headers: { 'x-user-id': 'CoddyKitUser' }
};

const contextForRequest = createContext(mockRequest);
console.log('Context created:', contextForRequest);

// Simulate the procedure call with the created context
const simulatedOutput = appRouter._def.procedures.getUserGreeting._def.query({ ctx: contextForRequest, input: undefined });
console.log('\nSimulated Procedure Output:');
console.log(simulatedOutput);

Amalan Terbaik Konteks

Untuk memastikan aplikasi tRPC anda berprestasi baik dan mudah diselenggara:

  • Pastikan Ringkas: Tambahkan hanya data yang benar-benar diperlukan oleh beberapa prosedur.
  • Elakkan Logik Berat: Operasi kompleks (seperti pertanyaan pangkalan data untuk mendapatkan data pengguna) mungkin lebih sesuai diletakkan dalam perisian tengah atau perkhidmatan yang dipanggil daripada konteks.
  • Keselamatan: Sentiasa sahkan dan bersihkan sebarang data yang diekstrak daripada permintaan mentah sebelum menambahkannya ke konteks.

Semakan Pemahaman Konteks

Mari kita semak pemahaman anda tentang konteks tRPC.

Imbas Kembali: Konteks tRPC

Anda telah mempelajari tentang konteks tRPC yang berkuasa!

  • Ia ialah objek yang dicipta bagi setiap permintaan.
  • Ia membolehkan perkongsian data seperti maklumat pengguna atau klien pangkalan data merentas semua prosedur.
  • Anda mentakrifkannya dengan fungsi createContext.
  • Keselamatan jenis dipastikan dengan membuat kesimpulan jenisnya dan menggunakannya semasa pemulaan tRPC.
  • Prosedur mengakses konteks melalui parameter ctx.

Seterusnya, anda akan melihat cara menggunakan konteks untuk melaksanakan pengesahan dengan perisian tengah!

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

Soalan Lazim

Adakah pelajaran “Mencipta Konteks tRPC” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung, termasuk “Mencipta Konteks 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 “Mencipta Konteks tRPC”?

Fahami cara mencipta dan mengisi objek konteks tRPC dengan data khusus permintaan seperti maklumat pengguna. 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 “Mencipta Konteks 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

  1. Mencipta Konteks tRPC
  2. Perisian Tengah Pengesahan
  3. Rantaian Perisian Tengah Tersuai
  4. Middleware Pengelogan dan Pemasa Prestasi
← Kembali ke API tRPC Selamat Jenis dari Hujung ke Hujung