Skip to content

skyrpex/electron-trpc

 
 

Repository files navigation

electron-trpc

NPM MIT

Build IPC for Electron with tRPC

  • Expose APIs from Electron's main process to one or more render processes.
  • Build fully type-safe IPC.
  • Secure alternative to opening servers on localhost.
  • Subscription support coming soon.

Installation

# Using pnpm
pnpm add electron-trpc

# Using yarn
yarn add electron-trpc

# Using npm
npm install --save electron-trpc

Setup

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

    import { app, ipcMain } from 'electron';
    import { createIPCHandler } from 'electron-trpc';
    import { router, createContext } from './api';
    
    app.on('ready', () => {
      createIPCHandler({ ipcMain, router, createContext });
    
      // ...
    });
  2. Expose the IPC to the render process from the preload file:

    import { contextBridge, ipcRenderer } from 'electron';
    import { exposeElectronTRPC } from 'electron-trpc';
    
    process.once('loaded', async () => {
      exposeElectronTRPC({ contextBridge, ipcRenderer });
    });

    Note: electron-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 * as trpc from '@trpc/client';
    import { ipcLink } from 'electron-trpc';
    
    export const trpcClient = trpc.createTRPCClient({
      links: [ipcLink()],
    });
  4. Now you can use the client in your render process as you normally would (e.g. using @trpc/react).

About

Electron support for tRPC

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Languages

  • TypeScript 97.1%
  • Nix 2.0%
  • JavaScript 0.9%