IPC query invalidation

frontend/apps/electron/src/api.ts

@@ -1,9 +1,9 @@
 import z from 'zod'
 import {initTRPC} from '@trpc/server'
-// import {observable} from '@trpc/server/observable'
+import {observable} from '@trpc/server/observable'
 // import {EventEmitter} from 'events'
 import superjson from 'superjson'
-import {BrowserWindow} from 'electron'
+import {BrowserWindow, ipcMain} from 'electron'
 import {createIPCHandler} from 'electron-trpc/main'
 import path from 'path'
 
@@ -13,6 +13,12 @@ let windowIdCount = 1
 
 const allWindows = new Map<string, BrowserWindow>()
 
+const invalidationHandlers = new Set<(queryKey: any) => void>()
+
+ipcMain.on('invalidate_queries', (_event, info) => {
+  invalidationHandlers.forEach((handler) => handler(info))
+})
+
 export const router = t.router({
   createAppWindow: t.procedure
     .input(
@@ -73,19 +79,17 @@ export const router = t.router({
       // if (!import.meta.env.PROD) browserWindow.webContents.openDevTools()
     }),
 
-  // subscription: t.procedure.subscription(() => {
-  //   return observable((emit) => {
-  //     function onGreet(text: string) {
-  //       emit.next({text})
-  //     }
-
-  //     ee.on('greeting', onGreet)
-
-  //     return () => {
-  //       ee.off('greeting', onGreet)
-  //     }
-  //   })
-  // }),
+  queryInvalidation: t.procedure.subscription(() => {
+    return observable((emit) => {
+      function handler(value: any[]) {
+        emit.next(value)
+      }
+      invalidationHandlers.add(handler)
+      return () => {
+        invalidationHandlers.delete(handler)
+      }
+    })
+  }),
 })
 
 const trpcHandlers = createIPCHandler({router, windows: []})

frontend/apps/electron/src/ipc.ts

@@ -3,7 +3,7 @@ import {AppIPC} from '@mintter/app/src/app-ipc'
 import {client} from './trpc'
 import {decodeRouteFromPath} from '@mintter/app/src/utils/route-encoding'
 // import {ipcRenderer} from 'electron/renderer'
-console.log('load ipc.ts')
+
 export function createIPC(): AppIPC {
   return {
     invoke: async (cmd: string, args?: Record<string, unknown>) => {

frontend/apps/electron/src/preload.ts

@@ -13,13 +13,18 @@ ipcRenderer.addListener('initWindow', (info, event) => {
 
 contextBridge.exposeInMainWorld('ipc', {
   send: (cmd, args) => {
+    console.log('IPC SENDING', cmd, args)
     ipcRenderer.send(cmd, args)
   },
   listen: async (cmd: string, handler: (event: any) => void) => {
+    const innerHandler = (value: any) => {
+      console.log('IPC event received', cmd, value)
+      handler(value)
+    }
     console.log('listening!', cmd)
-    ipcRenderer.addListener(cmd, handler)
+    ipcRenderer.addListener(cmd, innerHandler)
     return () => {
-      ipcRenderer.removeListener(cmd, handler)
+      ipcRenderer.removeListener(cmd, innerHandler)
     }
   },
 })

frontend/apps/electron/src/root.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo, useState} from 'react'
+import React, {useEffect, useMemo, useState} from 'react'
 import ReactDOM from 'react-dom/client'
 import Main from '@mintter/app/src/pages/main'
 import {createGrpcWebTransport} from '@bufbuild/connect-web'
@@ -19,6 +19,7 @@ import {createTRPCReact} from '@trpc/react-query'
 import superjson from 'superjson'
 import {AppIPC} from '@mintter/app/src/app-ipc'
 import {decodeRouteFromPath} from '@mintter/app/src/utils/route-encoding'
+import {client} from './trpc'
 
 const trpcReact = createTRPCReact<AppRouter>()
 
@@ -113,6 +114,16 @@ function MainApp({
 function ElectronApp() {
   const ipc = useMemo(() => createIPC(), [])
   const queryClient = useMemo(() => getQueryClient(ipc), [ipc])
+  useEffect(() => {
+    const sub = client.queryInvalidation.subscribe(undefined, {
+      onData: (queryKey) => {
+        queryClient.client.invalidateQueries(queryKey)
+      },
+    })
+    return () => {
+      sub.unsubscribe()
+    }
+  }, [queryClient])
   const trpcClient = useMemo(
     () =>
       trpcReact.createClient({

frontend/packages/app/src/query-client.ts

@@ -59,7 +59,8 @@ export function getQueryClient(ipc: AppIPC): AppQueryClient {
 
   function appInvalidateQueries(queryKey: QueryKey) {
     ipc.send?.('invalidate_queries', queryKey)
-    client.invalidateQueries(queryKey)
+    // this invalidation is required in Tauri but not in electron because the ipc invalidation will be triggered in root.tsx
+    // client.invalidateQueries(queryKey)
   }
 
   return {