This content originally appeared on DEV Community and was authored by Sergey Shpadyrev
In one of my projects I faced a need to make a lot of remote procedure calls between different parts of the app. I needed to call:
- RPC from iframe to its host app
- RPC from this host app to iframe
- RPC from web app to server via HTTP
- RPC from server to web app via websocket
I wanted communication protocol between all of the entities to be fully typed. But I found that there's no convenient TypeScript library to do it. So I wrote my own.
Meet the typed-remote-procedure-call.
First you have to declare your RPC API:
type MyAPI = {
add: (input: { a: number; b: number }) => Promise<number>;
createUser: (input: { name: string }) => Promise<{ age: number; name: string }>;
};
Then you should create an executor in the place where you want this interface to be implemented. Let's say if you do RPC from your server to your web app via websocket it should be implemented on the web app side.
import { createExecutor, ExecutionRequest, ExecutionResponse } from 'typed-remote-procedure-call';
const executor = createExecutor<MyAPI>({
add: async (input: { a: number; b: number }) => input.a + input.b,
createUser: async (input: { name: string }) => ({ age: 20, name: input.name }),
});
// When request from the caller side comes you should execute it
await executor.execute(request)
Then you should create a caller:
import { createRPC, ExecutionRequest } from 'typed-remote-procedure-call';
const rpc = createRPC<MyAPI>({
// Here you should send the request to the execution side by any protocol you want
send: async (request: ExecutionRequest) => sendRequestToExecutionSide(request),
});
After implementing transport protocol from caller to executor and back you can call the methods. Either one by one:
const user = await rpc.call.createUser({ name: 'John' });
const sum = await rpc.call.sum({ a: user.age, b: 2 });
Either you can build a pipe of calls that will be executed in one batch:
const sum = await rpc.chain((call) => {
const user = call.createUser({ name: 'John' });
return call.add({ a: user.age, b: 2 });
});
This chaining works with a little bit of types magic. The value returned from call inside chain function is not a Promise but a reference to step of execution.
This simple library allows you to make well-typed RPC calls really easily. If you find it useful please support me with a star on the Github repo.
This content originally appeared on DEV Community and was authored by Sergey Shpadyrev
Sergey Shpadyrev | Sciencx (2025-02-14T16:17:50+00:00) My useful library for typed RPC calls in TypeScript. Retrieved from https://www.scien.cx/2025/02/14/my-useful-library-for-typed-rpc-calls-in-typescript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.