Accessing backend service from frontend async factory a.k.a provider binding

I have a backend service called SchedulerService that is bound as shown below


        ({ container }) =>
            // Scheduler service doesn't have a watcher, so little simpler binding
            new JsonRpcConnectionHandler(SERVICE_URL.SCHEDULER, (): SchedulerService => {
                return container.get(SchedulerServiceSymbol);

I am injecting this into a frontend class PropertyStore as shown below

export class PropertyStore {

        readonly objUid: string,

        propNames: string[],

        readonly schedulerService: ISchedulerService
    ) {  }

The PropertyStore is created via an async factory a.k.a provider as follows

        ({ container }) =>
            async (uid: string, propName: string[]): Promise<IPropertyStore> => {
                const child = new Container();
                child.parent = container;


                const propStore = child.get(PropertyStore);

                // HERE --- Below function calls the SchedulerService in the backend
                await propStore.<xyz>()

                return propStore;

However, for some reason the calls to functions in the ScheduleService are never received by the backend.

When I introspected using the browser dev tools, I noticed that the connectionPromise is pending.

Comparing this with a case where I am able to call the ScheduleService APIs, I have a feeling this promise is not supposed to be “pending” for the JSON-RPC to work.

Would the experts here have any thoughts on things I could try to get past this?

PS - I wouldn’t call myself an Inversify expert. If this is an anti-pattern and I should do things a different way, please let me know.

Hey @akhileshraju,

how does the corresponding frontend module look for the SchedulerServiceSymbol? It should be something like this:

    bind(SchedulerServiceSymbol).toDynamicValue(ctx => {
        const provider = ctx.container.get(WebSocketConnectionProvider);
        return provider.createProxy<SchedulerService>(SERVICE_URL.SCHEDULER);

I had everything right but I missed the .inSingletonScope() in the frontend module. With that change, it works now. Thank you very much @msujew!
Just curious, why do we need to use inSingletonScope to create an RPC b/w frontend and backend?
Is it because a service should have only one RPC connection shared among multiple injections?