🚨 Breaking Changes Alert 🚨
The @orpc/client package has been rewritten to include powerful new features: Client Context and Dynamic Link mechanisms! 🎉
🧩 Client Context
The Client Context feature allows you to pass additional contextual information (like caching policies) to your client calls.
type ClientContext = { cache?: RequestCache } | undefined;
// If the context is not `undefined`, you must provide it in every call.
const orpcLink = new ORPCLink<ClientContext>({
url: 'http://localhost:3000/api',
// headers: Add custom headers here.
fetch: (input, init, context) => globalThis.fetch(input, {
...init,
cache: context?.cache, // Leverages the client context.
}),
});
const client = createORPCClient<typeof router, ClientContext>(orpcLink);
client.getting({ name: 'unnoq' }, { context: { cache: 'force-cache' } });Note: This works seamlessly with Vue Query and React Query.
🔄 Dynamic Link
With the Dynamic Link mechanism, you can define custom logic to dynamically choose between different links based on the request's context, path, or input.
const orpcLink1 = new ORPCLink({
url: 'http://localhost:3000/api',
// headers: Add custom headers here.
});
const orpcLink2 = new ORPCLink({
url: 'http://localhost:8000/api',
// headers: Add custom headers here.
});
const dynamicLink = new DynamicLink((path, input, options) => {
// Custom logic to select the appropriate link.
if (path.includes('post')) {
return orpcLink1;
}
return orpcLink2;
});