Is this code wrong for handling multiple proto generated service clients?

I'm building for the first time a new app in Typescript designing it with Proto files.

I'm having doubts about which is the best strategy to manage the many service clients in this web app.

"Best" in terms of a good compromise between user's device RAM and Javascript execution speed (main thread ops).

This is what I'm doing right now, this is the main file:

• main.ts:

import { GrpcWebFetchTransport } from '@protobuf-ts/grpcweb-transport';

import { PlayerServiceClient } from './grpc/generated/player.client';
import { TeamServiceClient } from './proto/team.client';
import { RefereeServiceClient } from './proto/referee.client';
import { FriendServiceClient } from './proto/friend.client';
import { PrizeServiceClient } from './proto/prize.client';
import { WinnerServiceClient } from './proto/winner.client';
import { CalendarServiceClient } from './proto/calendar.client';

const transport = new GrpcWebFetchTransport({ baseUrl: 'http://localhost:3000/api' });

let playerService: PlayerServiceClient;
export const getPlayerService = (): PlayerServiceClient =>
    playerService || ((playerService = new PlayerServiceClient(transport)), playerService);

let teamService: TeamServiceClient;
export const getTeamService = (): TeamServiceClient =>
    teamService || ((teamService = new TeamServiceClient(transport)), teamService);

let refereeService: RefereeServiceClient;
export const getRefereeService = (): RefereeServiceClient =>
    refereeService || ((refereeService = new RefereeServiceClient(transport)), refereeService);

let friendService: FriendServiceClient;
export const getFriendService = (): FriendServiceClient =>
    friendService || ((friendService = new FriendServiceClient(transport)), friendService);

let prizeService: PrizeServiceClient;
export const getPrizeService = (): PrizeServiceClient =>
    prizeService || ((prizeService = new PrizeServiceClient(transport)), prizeService);

let winnerService: WinnerServiceClient;
export const getWinnerService = (): WinnerServiceClient =>
    winnerService || ((winnerService = new WinnerServiceClient(transport)), winnerService);

let calendarService: CalendarServiceClient;
export const getCalendarService = (): CalendarServiceClient =>
    calendarService || ((calendarService = new CalendarServiceClient(transport)), calendarService);

// and so on... a lot more...

As you can see there are many service clients.

I'm using this code because I thought it was better given my web app structure based on routes almost overlapping with client services:

I mean, if the player goes from /home to /players page I can use it like this:

import { getPlayerService } from 'main';

const players = async () => await getPlayerService().queryPlayers()

In this way, if the PlayerService does not exist, it is created at the moment and returned, otherwise it returns the one created before.

Since the user switches pages frequently this way I can avoid the sudden creation and destruction of those clients, right?

But in this way I am using global variables which I don't like to use.

What do you suggest me to do?

Is there a better way?

Can I refactor this code into only one class?