use ConnectRPC Protobuf with React server actions

[alissa-tung]

use ConnectRPC Protobuf with React server actions

[srikrsna]

Hey! You can use toPlainMessage function in @bufbuild/protobuf to covert them to plain objects that are serializable. #505 has more context.

[paul-sachs]

Looking over the details on the react docs site, this still looks fairly experimental so it makes sense to me that this would still be handled in user-land, with a solution something like what you've got above (just modified to support exporting all methods):

// server-client.ts
'use server'

export const client = createPromiseClient(...);

// some-component.tsx
import { client } from "./server-client";

...
client.a(...);

This doesn't export individual methods but it does export the client with those methods, which should provide similar functionality.

I suppose you could build a buf plugin to create a client that exports ALL the methods but I would guess it wouldn't be worth the effort.

[paul-sachs]

So spent some time learning about RSC, and put together an example of using nextjs and server actions along with connect. Hopefully that can at least provide an idea. Also, being a total newbie to RSC, we can build on that with better practices.

[alissa-tung]

Hey! You can use toPlainMessage function in @bufbuild/protobuf to covert them to plain objects that are serializable. #505 has more context.

Thank you

[alissa-tung]

Now the issue just contains how to export all the methods in a file with top level 'use server' 🤔

[srikrsna]

Now the issue just contains how to export all the methods in a file with top level 'use server' 🤔

I don't quite follow, can you elaborate?

[alissa-tung]

Now the issue just contains how to export all the methods in a file with top level 'use server' 🤔

I don't quite follow, can you elaborate?

Yes.

In .proto

service AnyhowService {
    rpc A() returns ();
    rpc B() ...
}

then

const xs : PromiseClient<AnyhowService>
xs.A({})
xs.B({})

those call is not server actions, one should

'use server'

const client = createPromiseClient...

export A = client.A
export B = client.B

then the exported functions are finally server actions

[alissa-tung]

Looking over the details on the react docs site, this still looks fairly experimental so it makes sense to me that this would still be handled in user-land, with a solution something like what you've got above (just modified to support exporting all methods):

// server-client.ts
'use server'

export const client = createPromiseClient(...);

// some-component.tsx
import { client } from "./server-client";

...
client.a(...);

This doesn't export individual methods but it does export the client with those methods, which should provide similar functionality.

I suppose you could build a buf plugin to create a client that exports ALL the methods but I would guess it wouldn't be worth the effort.

thank you, but top level can only export async functions. In this case client is an object

anyway, keeps manually write the exports for every function is not very bad, since the server actions needs auth

[paul-sachs]

Hmm I see. Clearly RSC is more complicated than I thought. In that case, I definitely think a dedicated buf plugin or userland code would be the better approach. This would also be necessary if the entities that need to be returned should be plain objects instead of class objects as well. A plugin would also be easier to update as the RSC paradigm evolves without having to consider how it changes the core client.