Client side RPC

[ElasticBottle]

Not sure if this is already possible, but it would be interesting to be able to mix and match server side with client side procedures.

For example. I might have a signUpClient and a signUp procedure. The route can then be constructed like:

base.router({
  signUpClient,
  signUp
});

and when actually using it, I can just call api.signUpClient() which might do some client side validation before under the hood calling signUp

[unnoq]

You can, with interceptor and contract-first, please check response validation plugin for reference

[ElasticBottle]

Thanks for pointing me there, I got a better understanding of what I'm suggesting

I think the response validation plugin is close.

ideally there would be something like the following for the orpc contract pacakge:

export const exampleContract = oc
  .input(
    z.object({
      name: z.string(),
      age: z.number().int().min(0),
    }),
  )
  .output(
    z.object({
      id: z.number().int().min(0),
      name: z.string(),
      age: z.number().int().min(0),
    }),
  ).pre(()=> {
    // do stuff here on the client before calling the server.
  }).post(()=> {
    // do stuff here on the client after calling the server.
  })

And then you'd use a clientHookPlugin to run the pre / post steps in a type state way.

If this is already possible today with just the contract first model, I apologize! Did not find anything about this in the contract-first section of the docs

[ElasticBottle]

Dug a little more, and I think you can kind of do this with the contract first package + meta props and a client plugin similar to the validation plugin like you pointed out

import { oc } from "@orpc/contract";
import { type } from "arktype";

const outputType = type({
  hello: "string",
});

oc.meta({
  clientOnly: true,
  pre: () => { // to be more in line with the interceptors name, maybe onStart, onSuccess, and onError might be better callbacks here
    console.log("", "pre");
  },
  post: (data: typeof outputType.infer) => {
    console.log("", "post");
  },
});

The only thing that is kind of clunky right now is that I have to manually type the arg type to the pre and post callback for the input and output data respectively

fwiw, I also took a look at actions, which seems close, but two things stood out making it not quite work for the above:

• I think it mostly works with just Next.js right now? (I'm using tanstack start, and we have to wrap the function with their callback additionally)
• unclear where the interceptors run, although I'm guessing it's on the server since we initialize context

[unnoq]

Please check source code of response validation plugin - and you will see what you need to done.

[unnoq]

#999

[ElasticBottle]

wait, so you think we can support extra method to be chained just via a link plugin?

As far as I can tell, the plugin used existing data already on the contract (in this case the input and output schemas)

[ElasticBottle]

I think the approach mentioned here looks like the extent we can go with the response validation plugin method