Client Best Practice

I recommend using superjson as the transformer. It is a superset of JSON that supports Dates, BigInts, and more. this is not required, but it is a good practice. using this transformer will make your life easier when working with dates, bigints, sets, maps, and other javascript/non-json types.

WARNING

Ensure that the server-side uses the same transformer.

Installation

npm i @http-rpc/client superjson

import { createClient } from '@http-rpc/client';
import type { Router } from './server';
import superjson from 'superjson';

export const client = createClient<Router>({
	url: 'http://localhost:3000/rpc',
	transformer: superjson,
	async headers() {
		const token = await getToken();
		return {
			Authorization: `Bearer ${token}`,
		};
	},
	onError(err) {
		console.error(err.response?.data?.title);
		return err;
	},
});

so if a server Endpoint returns a Date object, it will be automatically transformed to a Date object on the client-side.

for example:

server.ts

export const someEndpoint = publicRoute.get(() => {
	return {
		someMap: new Map([['key', 'value']]),
		date: new Date(),
		primitive: 1,
	};
});

client.ts

const result = await client.someEndpoint.get();
// ^? { someMap: Map<string, string>, date: Date, primitive: number }