fix change subscription

Author: nikgraf

apps/events/src/components/todos-read-only.tsx

@@ -0,0 +1,18 @@
+import { useQueryEntities } from '@graphprotocol/hypergraph-react';
+import { Todo } from '../schema';
+
+export const TodosReadOnly = () => {
+  const todos = useQueryEntities(Todo);
+
+  return (
+    <>
+      <h1 className="text-2xl font-bold">Todos (read only)</h1>
+      {todos.map((todo) => (
+        <div key={todo.id} className="flex flex-row items-center gap-2">
+          <h2>{todo.name}</h2>
+          <input type="checkbox" checked={todo.completed} readOnly />
+        </div>
+      ))}
+    </>
+  );
+};

apps/events/src/routes/space/$spaceId.tsx

@@ -5,6 +5,7 @@ import { useSelector } from '@xstate/store/react';
 
 import { DevTool } from '@/components/dev-tool';
 import { Todos } from '@/components/todos';
+import { TodosReadOnly } from '@/components/todos-read-only';
 import { Button } from '@/components/ui/button';
 import { availableAccounts } from '@/lib/availableAccounts';
 import { useEffect, useState } from 'react';
@@ -39,6 +40,7 @@ function Space() {
     <div className="flex flex-col gap-4 max-w-screen-sm mx-auto py-8">
       <HypergraphSpaceProvider space={spaceId}>
         <Todos />
+        <TodosReadOnly />
         {show2ndTodos && <Todos />}
         <h3 className="text-xl font-bold">Invite people</h3>
         <div className="flex flex-row gap-2">

packages/hypergraph-react/src/HypergraphSpaceContext.tsx

@@ -5,7 +5,7 @@ import { useRepo } from '@automerge/automerge-repo-react-hooks';
 import { Entity, Utils } from '@graphprotocol/hypergraph';
 import type { DocumentContent } from '@graphprotocol/hypergraph/Entity';
 import * as Schema from 'effect/Schema';
-import { type ReactNode, createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { type ReactNode, createContext, useContext, useRef, useState, useSyncExternalStore } from 'react';
 
 export type HypergraphContext = {
   space: string;
@@ -66,13 +66,7 @@ export function useQueryEntities<const S extends Entity.AnyNoContext>(type: S) {
     return Entity.subscribeToFindMany(hypergraph.handle, type);
   });
 
-  useEffect(() => {
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [subscription]);
-
-  return useSyncExternalStore(subscription.listener, subscription.getEntities, () => []);
+  return useSyncExternalStore(subscription.subscribe, subscription.getEntities, () => []);
 }
 
 export function useQueryEntity<const S extends Entity.AnyNoContext>(type: S, id: string) {

packages/hypergraph/src/Entity.ts

@@ -134,6 +134,9 @@ export const subscribeToDocumentChanges = (handle: DocHandle<DocumentContent>) =
     }
 
     const entityTypes = new Set<string>();
+    // collect all query entries that changed and only at the end make one copy to change the
+    // reference to reduce the amount of O(n) operations per query to 1
+    const touchedQueries = new Set<Array<string>>();
 
     // loop over all changed entities and update the cache
     for (const entityId of changedEntities) {
@@ -155,6 +158,7 @@ export const subscribeToDocumentChanges = (handle: DocHandle<DocumentContent>) =
           } else {
             query.data.push(decoded);
           }
+          touchedQueries.add([typeName, 'all']);
         }
 
         entityTypes.add(typeName);
@@ -173,12 +177,23 @@ export const subscribeToDocumentChanges = (handle: DocHandle<DocumentContent>) =
             const index = query.data.findIndex((entity) => entity.id === entityId);
             if (index !== -1) {
               query.data.splice(index, 1);
+              touchedQueries.add([affectedTypeName, 'all']);
             }
           }
         }
       }
     }
 
+    for (const [typeName, queryKey] of touchedQueries) {
+      const cacheEntry = decodedEntitiesCache.get(typeName);
+      if (!cacheEntry) continue;
+
+      const query = cacheEntry.queries.get(queryKey);
+      if (!query) continue;
+
+      query.data = [...query.data]; // must be a new reference for React.useSyncExternalStore
+    }
+
     // invoke all the listeners per type
     for (const typeName of entityTypes) {
       const cacheEntry = decodedEntitiesCache.get(typeName);
@@ -195,7 +210,6 @@ export const subscribeToDocumentChanges = (handle: DocHandle<DocumentContent>) =
   handle.on('change', onChange);
 
   return () => {
-    console.log('unsubscribe document changes');
     handle.off('change', onChange);
     decodedEntitiesCache.clear(); // currently we only support exactly one space
   };
@@ -317,34 +331,18 @@ export function findMany<const S extends AnyNoContext>(
 export function subscribeToFindMany<const S extends AnyNoContext>(
   handle: DocHandle<DocumentContent>,
   type: S,
-): { listener: () => () => void; getEntities: () => Readonly<Array<Entity<S>>>; unsubscribe: () => void } {
+): {
+  subscribe: (callback: () => void) => () => void;
+  getEntities: () => Readonly<Array<Entity<S>>>;
+} {
   const queryKey = 'all';
   const decode = Schema.decodeUnknownSync(type);
   // TODO: what's the right way to get the name of the type?
   // @ts-expect-error name is defined
   const typeName = type.name;
 
   const getEntities = () => {
-    const entities = decodedEntitiesCache.get(typeName)?.queries.get(queryKey)?.data ?? [];
-    return entities;
-  };
-
-  const listener = () => {
-    return () => undefined;
-  };
-
-  const unsubscribe = () => {
-    const query = decodedEntitiesCache.get(typeName)?.queries.get(queryKey);
-    if (query?.listeners) {
-      query.listeners = query.listeners.filter((cachedListener) => cachedListener !== listener);
-      console.log('unsubscribe query', query.listeners);
-    }
-
-    documentChangeListener.subscribedQueriesCount--;
-    if (documentChangeListener.subscribedQueriesCount === 0) {
-      documentChangeListener.unsubscribe?.();
-      documentChangeListener.unsubscribe = undefined;
-    }
+    return decodedEntitiesCache.get(typeName)?.queries.get(queryKey)?.data ?? [];
   };
 
   const entities = findMany(handle, type);
@@ -366,10 +364,6 @@ export function subscribeToFindMany<const S extends AnyNoContext>(
         query.data.push(entity);
       }
     }
-
-    if (query?.listeners) {
-      query.listeners.push(listener);
-    }
   } else {
     const entitiesMap = new Map();
     for (const entity of entities) {
@@ -380,7 +374,7 @@ export function subscribeToFindMany<const S extends AnyNoContext>(
 
     queries.set(queryKey, {
       data: entities,
-      listeners: [listener],
+      listeners: [],
     });
 
     decodedEntitiesCache.set(typeName, {
@@ -390,12 +384,31 @@ export function subscribeToFindMany<const S extends AnyNoContext>(
     });
   }
 
+  const subscribe = (callback: () => void) => {
+    const query = decodedEntitiesCache.get(typeName)?.queries.get(queryKey);
+    if (query?.listeners) {
+      query.listeners.push(callback);
+    }
+    return () => {
+      const query = decodedEntitiesCache.get(typeName)?.queries.get(queryKey);
+      if (query?.listeners) {
+        query.listeners = query?.listeners?.filter((cachedListener) => cachedListener !== callback);
+      }
+
+      documentChangeListener.subscribedQueriesCount--;
+      if (documentChangeListener.subscribedQueriesCount === 0) {
+        documentChangeListener.unsubscribe?.();
+        documentChangeListener.unsubscribe = undefined;
+      }
+    };
+  };
+
   if (documentChangeListener.subscribedQueriesCount === 0) {
     documentChangeListener.unsubscribe = subscribeToDocumentChanges(handle);
   }
   documentChangeListener.subscribedQueriesCount++;
 
-  return { listener, getEntities, unsubscribe };
+  return { subscribe, getEntities };
 }
 
 /**