Composed RPC Client

By default, Vovk.ts generates a single RPC client that aggregates all RPC modules from every segment. This approach—called the Composed RPC Client—is useful for single-page applications where you want a single import entry point for all RPC modules across all segments. The files are emitted to the reconfigurable node_modules/.vovk-client folder and are re-exported by the vovk-client package.

The structure of the node_modules/.vovk-client folder generated by the default cjs + mjs templates looks like this:

- index.cjs
- index.d.cts
- index.mjs
- index.d.mts
- schema.cjs
- schema.d.cts
- openapi.json
- openapi.cjs
- openapi.d.cts

The vovk-client package re-exports index.cjs, index.mjs, etc., from its own entry points.

node_modules/vovk-client/index.mjs


export * from '../.vovk-client/index.mjs';

node_modules/vovk-client/index.d.mts


export * from '../.vovk-client/index.d.mts';

etc.

The default generation can be reproduced with the CLI command:


npx vovk generate --from mjs --from cjs --out-dir node_modules/.vovk-client


pnpm dlx vovk generate --from mjs --from cjs --out-dir node_modules/.vovk-client


yarn dlx vovk generate --from mjs --from cjs --out-dir node_modules/.vovk-client


bun x vovk generate --from mjs --from cjs --out-dir node_modules/.vovk-client

Composed Client Config

The composed client can be configured with the following options:

vovk.config.mjs


/** @type {import('vovk').VovkConfig} */
const config = {
  composedClient: {
    enabled: true, // default
    fromTemplates: ['mjs', 'cjs'], // default
    outDir: './node_modules/.vovk-client', // default
    includeSegments: ['foo'], // mutually exclusive with `excludeSegments`
    excludeSegments: ['bar'], // mutually exclusive with `includeSegments`
  },
};
export default config;

`enabled`

If set to false, the composed client will not be generated. Useful when you only want segmented clients.

`fromTemplates`

An array of templates used to generate the composed client. By default, ["mjs", "cjs"] produce ESM and CJS modules with TypeScript definitions. You can mix built-in templates and custom templates.

`outDir`

The path where the composed client is generated. Defaults to ./node_modules/.vovk-client. The path is relative to the current working directory (CWD).

`includeSegments`

An array of segments to include in the composed client. By default, all segments are included. Use this to include only specific segments.

`excludeSegments`

An array of segments to exclude from the composed client. By default, none are excluded. This option is mutually exclusive with includeSegments.

`prettifyClient`

Whether to format the generated client code. Defaults to false. If set to true, the client code is formatted with Prettier using your local configuration and slightly increases generation time.

`outputConfig`

Overrides the root outputConfig options.

Troubleshooting

vovk-client and pnpm

If you are using pnpm as your package manager, you might encounter issues with the vovk-client package not being hoisted correctly. This can lead to module resolution errors when importing the client in your application.

To resolve this issue, it’s recommended to compile the composed client into a local directory within your project instead of the default node_modules/.vovk-client and updating fromTemplates to use ts template. At this case vovk-client package is not needed anymore since the client can be imported directly from the local directory.

vovk.config.mjs


/** @type {import('vovk').VovkConfig} */
const config = {
  composedClient: {
    fromTemplates: ['ts'], // overrides the default ['mjs', 'cjs']
    outDir: './src/client', // a project directory
  },
};
 
export default config;