tRPC (TypeScript Remote Procedure Call) adalah sebuah framework yang memungkinkan kita untuk membangun API secara end-to-end dengan tipe data yang konsisten antara client dan server. Walaupun tRPC sangat erat hubungannya dengan TypeScript, penggunaannya dalam JavaScript juga memungkinkan, meskipun akan lebih manual dalam hal penanganan tipe data.

Artikel ini akan membahas tentang bagaimana menggunakan tRPC dalam proyek JavaScript, mencakup instalasi, konfigurasi, hingga implementasi dasar API.

Apa itu tRPC?

tRPC adalah sebuah solusi yang memungkinkan kita untuk membangun API tanpa memerlukan pengaturan REST atau GraphQL yang rumit. Dengan tRPC, kita dapat memanggil fungsi di server seolah-olah fungsi tersebut adalah bagian dari kode client, sambil tetap memastikan komunikasi antar client-server yang aman dan efisien. Keunggulan tRPC yang paling menonjol adalah integrasinya dengan TypeScript, namun kita tetap dapat memanfaatkannya dalam JavaScript dengan beberapa penyesuaian.

Kelebihan Menggunakan tRPC

• Tanpa Skema API: tRPC tidak memerlukan penulisan skema API seperti GraphQL atau OpenAPI, sehingga dapat mengurangi boilerplate.
• Integrasi dengan TypeScript: Meskipun kita menggunakan JavaScript, tRPC tetap memberikan dasar yang kuat jika nanti kita beralih ke TypeScript.
• End-to-End Typesafe: Dalam penggunaan TypeScript, tRPC menjamin bahwa tipe data di client dan server selalu konsisten.

Instalasi tRPC di JavaScript

Untuk menggunakan tRPC dalam proyek JavaScript, kita bisa memulai dengan menginstal dependensinya melalui npm atau yarn:

npm install @trpc/server @trpc/client zod

Dalam proyek ini, kita juga menginstal zod, sebuah library untuk validasi schema yang sangat sering digunakan bersama tRPC untuk memvalidasi data yang dikirimkan.

Konfigurasi Server tRPC

Pertama, kita akan membuat server tRPC sederhana di JavaScript. Buat file server.js untuk mendefinisikan router dan prosedur RPC:

const { initTRPC } = require('@trpc/server');
const { z } = require('zod');

// Inisialisasi tRPC
const t = initTRPC.create();

// Membuat router
const appRouter = t.router({
  greet: t.procedure
    .input(z.string())
    .query(({ input }) => {
      return `Hello, ${input}!`;
    }),
});

// Ekspor tipe router
module.exports = { appRouter };

Dalam kode di atas, kita membuat router dengan satu prosedur bernama greet. Prosedur ini menerima input berupa string dan mengembalikan sapaan berdasarkan input tersebut.

Membuat Server HTTP untuk tRPC

Setelah membuat router tRPC, kita perlu mengintegrasikannya dengan server HTTP. Untuk keperluan ini, kita bisa menggunakan express sebagai server HTTP:

npm install express @trpc/server/adapters/express

Kemudian kita buat server Express untuk melayani endpoint tRPC:

const express = require('express');
const { expressMiddleware } = require('@trpc/server/adapters/express');
const { appRouter } = require('./server');

const app = express();

// Middleware tRPC
app.use(
  '/trpc',
  expressMiddleware({
    router: appRouter,
  })
);

app.listen(4000, () => {
  console.log('Server berjalan di http://localhost:4000');
});

Server ini akan menjalankan endpoint tRPC pada /trpc dan mendengarkan pada port 4000.
Konfigurasi Client tRPC di JavaScript

Sekarang kita akan membuat client yang dapat memanggil server tRPC. Buat file client.js untuk berkomunikasi dengan server:

npm install axios

Setelah itu, kita konfigurasi client tRPC di client.js:

const { createTRPCProxyClient, httpBatchLink } = require('@trpc/client');
const axios = require('axios');

// Membuat client tRPC
const trpc = createTRPCProxyClient({
  links: [
    httpBatchLink({
      url: 'http://localhost:4000/trpc',
    }),
  ],
});

// Memanggil prosedur greet
(async () => {
  try {
    const greeting = await trpc.greet.query('Dunia');
    console.log(greeting); // Output: Hello, Dunia!
  } catch (error) {
    console.error('Error:', error);
  }
})();

Pada bagian client ini, kita menggunakan httpBatchLink untuk melakukan pemanggilan batch ke server tRPC, yang kemudian kita panggil prosedur greet dengan memberikan input Dunia.

Kesimpulan

tRPC menawarkan solusi yang simpel dan efisien untuk membangun API tanpa harus bergantung pada REST atau GraphQL, dan meskipun kekuatan utamanya terletak pada integrasi dengan TypeScript, framework ini tetap bisa digunakan dalam proyek JavaScript. Dalam contoh di atas, kita telah melihat bagaimana membuat server dan client tRPC sederhana menggunakan JavaScript, serta bagaimana cara berkomunikasi antara keduanya.

Meskipun menggunakan tRPC dengan JavaScript mungkin tidak sekuat dengan TypeScript, terutama dalam hal penanganan tipe, ini adalah titik awal yang baik bagi mereka yang ingin mencoba pendekatan RPC modern tanpa banyak konfigurasi.