https://github.com/jsonnull/electron-trpc

Build type-safe Electron inter-process communication using tRPC
https://github.com/jsonnull/electron-trpc

electron hacktoberfest ipc trpc typescript

Last synced: 13 days ago
JSON representation

Build type-safe Electron inter-process communication using tRPC

• Host: GitHub
• URL: https://github.com/jsonnull/electron-trpc
• Owner: jsonnull
• License: mit
• Created: 2022-07-27T04:15:59.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-19T04:59:33.000Z (7 months ago)
• Last Synced: 2024-04-19T19:26:08.399Z (7 months ago)
• Topics: electron, hacktoberfest, ipc, trpc, typescript
• Language: TypeScript
• Homepage: https://www.electron-trpc.dev
• Size: 558 KB
• Stars: 206
• Watchers: 2
• Forks: 20
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# electron-trpc



  

    

  

   

   

  

  

    

  





**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.

- Full support for queries, mutations, and subscriptions.

## Installation

```sh

# Using pnpm

pnpm add electron-trpc

# Using yarn

yarn add electron-trpc

# Using npm

npm install --save electron-trpc

```

## Basic Setup

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

   ```ts

   import { app } from 'electron';

   import { createIPCHandler } from 'electron-trpc/main';

   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](https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts):

   ```ts

   import { exposeElectronTRPC } from 'electron-trpc/preload';

   process.once('loaded', async () => {

     exposeElectronTRPC();

   });

   ```

   > 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):

   ```ts

   import { createTRPCProxyClient } from '@trpc/client';

   import { ipcLink } from 'electron-trpc/renderer';

   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`).