Skip to content

jsonnull/electron-trpc

Repository files navigation

message-channel-trpc

NPM MIT

Build IPC for MessageChannel with tRPC

  • Build fully type-safe IPC.
  • Secure alternative to opening servers on localhost.
  • Full support for queries, mutations, and subscriptions.

Installation

# Using pnpm
pnpm add message-channel-trpc

# Using yarn
yarn add message-channel-trpc

# Using npm
npm install --save message-channel-trpc

Basic Setup

  1. Add your tRPC router to the MessageChannel main process using createIPCHandler:

    import { app } from 'electron';
    import { createIPCHandler } from 'message-channel-trpc/server';
    import { router } from './api';
    
    app.on('ready', () => {
      const win = new BrowserWindow({
        webPreferences: {
          // Replace this path with the path to your preload file (see next step)
          preload: 'path/to/preload.js',
        },
      });
    
      createIPCHandler({ router, windows: [win] });
    });
  2. Expose the IPC to the render process from the preload file:

    import { exposeMessageChannelTRPC } from 'message-channel-trpc/server';
    
    process.once('loaded', async () => {
      exposeMessageChannelTRPC();
    });

    Note: message-channel-trpc depends on contextIsolation being enabled, which is the default.

  3. When creating the client in the render process, use the ipcLink (instead of the HTTP or batch HTTP links):

    import { createTRPCProxyClient } from '@trpc/client';
    import { ipcLink } from 'message-channel-trpc/client';
    
    export const client = createTRPCProxyClient({
      links: [ipcLink()],
    });
  4. Now you can use the client in your render process as you normally would (e.g. using @trpc/react).