introduce filters

Author: nikgraf

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

@@ -0,0 +1,48 @@
+import { useQuery } from '@graphprotocol/hypergraph-react';
+import { Todo } from '../schema';
+
+export const TodosReadOnlyFilter = () => {
+  const { data: todosCompleted } = useQuery(Todo, { mode: 'local', filter: { completed: true } });
+  const { data: todosNotCompleted } = useQuery(Todo, { mode: 'local', filter: { completed: false } });
+
+  return (
+    <>
+      <h1 className="text-2xl font-bold">Todos Filter (read only)</h1>
+      <h2 className="text-lg font-bold">Not completed</h2>
+      {todosNotCompleted.map((todo) => (
+        <div key={todo.id} className="flex flex-row items-center gap-2">
+          <h2>{todo.name}</h2>
+          {todo.assignees.length > 0 && (
+            <span className="text-xs text-gray-500">
+              Assigned to:{' '}
+              {todo.assignees.map((assignee) => (
+                <span key={assignee.id} className="border rounded-sm mr-1 p-1">
+                  {assignee.name}
+                </span>
+              ))}
+            </span>
+          )}
+          <input type="checkbox" checked={todo.completed} readOnly />
+        </div>
+      ))}
+
+      <h2 className="text-lg font-bold">Completed</h2>
+      {todosCompleted.map((todo) => (
+        <div key={todo.id} className="flex flex-row items-center gap-2">
+          <h2>{todo.name}</h2>
+          {todo.assignees.length > 0 && (
+            <span className="text-xs text-gray-500">
+              Assigned to:{' '}
+              {todo.assignees.map((assignee) => (
+                <span key={assignee.id} className="border rounded-sm mr-1 p-1">
+                  {assignee.name}
+                </span>
+              ))}
+            </span>
+          )}
+          <input type="checkbox" checked={todo.completed} readOnly />
+        </div>
+      ))}
+    </>
+  );
+};

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

@@ -1,6 +1,7 @@
 import { DevTool } from '@/components/dev-tool';
 import { Todos } from '@/components/todos';
 import { TodosReadOnly } from '@/components/todos-read-only';
+import { TodosReadOnlyFilter } from '@/components/todos-read-only-filter';
 import { Button } from '@/components/ui/button';
 import { Users } from '@/components/users';
 import { availableAccounts } from '@/lib/availableAccounts';
@@ -43,6 +44,7 @@ function Space() {
         <Users />
         <Todos />
         <TodosReadOnly />
+        <TodosReadOnlyFilter />
         {show2ndTodos && <Todos />}
         <h3 className="text-xl font-bold">Invite people</h3>
         <div className="flex flex-row gap-2">

packages/hypergraph-react/src/HypergraphSpaceContext.tsx

@@ -83,12 +83,13 @@ export function useHardDeleteEntity() {
   return Entity.delete(hypergraph.handle);
 }
 
-type QueryParams = {
+type QueryParams<S extends Entity.AnyNoContext> = {
   enabled: boolean;
+  filter?: Schema.Simplify<Partial<Schema.Schema.Type<S>>> | undefined;
 };
 
-export function useQueryLocal<const S extends Entity.AnyNoContext>(type: S, params?: QueryParams) {
-  const { enabled = true } = params ?? {};
+export function useQueryLocal<const S extends Entity.AnyNoContext>(type: S, params?: QueryParams<S>) {
+  const { enabled = true, filter } = params ?? {};
   const entitiesRef = useRef<Entity.Entity<S>[]>([]);
 
   const hypergraph = useHypergraph();
@@ -100,7 +101,7 @@ export function useQueryLocal<const S extends Entity.AnyNoContext>(type: S, para
       };
     }
 
-    return Entity.subscribeToFindMany(hypergraph.handle, type);
+    return Entity.subscribeToFindMany(hypergraph.handle, type, filter);
   });
 
   // TODO: allow to change the enabled state

packages/hypergraph-react/src/use-query.tsx

@@ -1,5 +1,6 @@
 import type { Entity } from '@graphprotocol/hypergraph';
 import { Utils } from '@graphprotocol/hypergraph';
+import type * as Schema from 'effect/Schema';
 import { useMemo } from 'react';
 import { useHypergraph, useQueryLocal } from './HypergraphSpaceContext.js';
 import { generateDeleteOps } from './internal/generate-delete-ops-geo.js';
@@ -8,8 +9,9 @@ import { useGenerateUpdateOps } from './internal/use-generate-update-ops.js';
 import { parseResult, useQueryPublic } from './internal/use-query-public-geo.js';
 import type { DiffEntry, PublishDiffInfo } from './types.js';
 
-type QueryParams = {
+type QueryParams<S extends Entity.AnyNoContext> = {
   mode: 'merged' | 'public' | 'local';
+  filter?: Schema.Simplify<Partial<Schema.Schema.Type<S>>> | undefined;
 };
 
 const mergeEntities = <S extends Entity.AnyNoContext>(
@@ -116,10 +118,10 @@ const getDiff = <S extends Entity.AnyNoContext>(
 
 const preparePublishDummy = () => undefined;
 
-export function useQuery<const S extends Entity.AnyNoContext>(type: S, params?: QueryParams) {
-  const { mode = 'merged' } = params ?? {};
+export function useQuery<const S extends Entity.AnyNoContext>(type: S, params?: QueryParams<S>) {
+  const { mode = 'merged', filter } = params ?? {};
   const publicResult = useQueryPublic(type, { enabled: mode === 'public' || mode === 'merged' });
-  const localResult = useQueryLocal(type, { enabled: mode === 'local' || mode === 'merged' });
+  const localResult = useQueryLocal(type, { enabled: mode === 'local' || mode === 'merged', filter });
   const { mapping } = useHypergraph();
   const generateCreateOps = useGenerateCreateOps(type, mode === 'merged');
   const generateUpdateOps = useGenerateUpdateOps(type, mode === 'merged');

packages/hypergraph/src/entity/findMany.ts

@@ -1,6 +1,7 @@
 import type { DocHandle, Patch } from '@automerge/automerge-repo';
 import * as Schema from 'effect/Schema';
 import { isRelationField } from '../utils/isRelationField.js';
+import { canonicalize } from '../utils/jsc.js';
 import { type DecodedEntitiesCacheEntry, type QueryEntry, decodedEntitiesCache } from './decodedEntitiesCache.js';
 import { entityRelationParentsMap } from './entityRelationParentsMap.js';
 import { getEntityRelations } from './getEntityRelations.js';
@@ -122,15 +123,9 @@ const subscribeToDocumentChanges = (handle: DocHandle<DocumentContent>) => {
           }
         }
 
-        const query = cacheEntry.queries.get('all');
-        if (query && decoded) {
-          const index = query.data.findIndex((entity) => entity.id === entityId);
-          if (index !== -1) {
-            query.data[index] = decoded;
-          } else {
-            query.data.push(decoded);
-          }
-          touchedQueries.add([typeName, 'all']);
+        for (const [queryKey, query] of cacheEntry.queries) {
+          touchedQueries.add([typeName, queryKey]);
+          query.isInvalidated = true;
         }
 
         entityTypes.add(typeName);
@@ -155,12 +150,12 @@ const subscribeToDocumentChanges = (handle: DocHandle<DocumentContent>) => {
           entityTypes.add(affectedTypeName);
           cacheEntry.entities.delete(entityId);
 
-          for (const [, query] of cacheEntry.queries) {
+          for (const [queryKey, query] of cacheEntry.queries) {
             // find the entity in the query and remove it using splice
             const index = query.data.findIndex((entity) => entity.id === entityId);
             if (index !== -1) {
               query.data.splice(index, 1);
-              touchedQueries.add([affectedTypeName, 'all']);
+              touchedQueries.add([affectedTypeName, queryKey]);
             }
           }
         }
@@ -228,6 +223,7 @@ const subscribeToDocumentChanges = (handle: DocHandle<DocumentContent>) => {
 export function findMany<const S extends AnyNoContext>(
   handle: DocHandle<DocumentContent>,
   type: S,
+  filter?: Schema.Simplify<Partial<Schema.Schema.Type<S>>> | undefined,
 ): { entities: Readonly<Array<Entity<S>>>; corruptEntityIds: Readonly<Array<string>> } {
   const decode = Schema.decodeUnknownSync(type);
   // TODO: what's the right way to get the name of the type?
@@ -246,7 +242,16 @@ export function findMany<const S extends AnyNoContext>(
     if (hasValidTypesProperty(entity) && entity['@@types@@'].includes(typeName)) {
       const relations = getEntityRelations(id, type, doc);
       try {
-        filtered.push({ ...decode({ ...entity, ...relations, id }), type: typeName });
+        const decoded = { ...decode({ ...entity, ...relations, id }), type: typeName };
+        if (filter) {
+          for (const filterEntry in filter) {
+            if (decoded[filterEntry] === filter[filterEntry]) {
+              filtered.push(decoded);
+            }
+          }
+        } else {
+          filtered.push(decoded);
+        }
       } catch (error) {
         corruptEntityIds.push(id);
       }
@@ -261,11 +266,12 @@ const stableEmptyArray: Array<unknown> = [];
 export function subscribeToFindMany<const S extends AnyNoContext>(
   handle: DocHandle<DocumentContent>,
   type: S,
+  filter?: Schema.Simplify<Partial<Schema.Schema.Type<S>>> | undefined,
 ): {
   subscribe: (callback: () => void) => () => void;
   getEntities: () => Readonly<Array<Entity<S>>>;
 } {
-  const queryKey = 'all';
+  const queryKey = filter ? canonicalize(filter) : '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
@@ -282,24 +288,17 @@ export function subscribeToFindMany<const S extends AnyNoContext>(
       return query.data;
     }
 
-    const { entities } = findMany(handle, type);
+    const { entities } = findMany(handle, type, filter);
+
     for (const entity of entities) {
       cacheEntry?.entities.set(entity.id, entity);
-
-      if (!query) continue;
-
-      const index = query.data.findIndex((e) => e.id === entity.id);
-      if (index !== -1) {
-        query.data[index] = entity;
-      } else {
-        query.data.push(entity);
-      }
     }
 
+    // must be a new reference to ensure it can be used in React.useMemo
+    query.data = [...entities];
     cacheEntry.isInvalidated = false;
     query.isInvalidated = false;
-    // must be a new reference to ensure it can be used in React.useMemo
-    query.data = [...query.data];
+
     return query.data;
   };
 
@@ -314,49 +313,36 @@ export function subscribeToFindMany<const S extends AnyNoContext>(
     let cacheEntry = decodedEntitiesCache.get(typeName);
 
     if (!cacheEntry) {
-      const { entities } = findMany(handle, type);
       const entitiesMap = new Map();
-      for (const entity of entities) {
-        entitiesMap.set(entity.id, entity);
-      }
-
       const queries = new Map<string, QueryEntry>();
 
       queries.set(queryKey, {
-        data: [...entities],
+        data: [],
         listeners: [],
-        isInvalidated: false,
+        isInvalidated: true,
       });
 
       cacheEntry = {
         decoder: decode,
         type,
         entities: entitiesMap,
         queries,
-        isInvalidated: false,
+        isInvalidated: true,
       };
 
       decodedEntitiesCache.set(typeName, cacheEntry);
-
-      for (const entity of entities) {
-        for (const [, value] of Object.entries(entity)) {
-          if (Array.isArray(value)) {
-            for (const relationEntity of value) {
-              let relationParentEntry = entityRelationParentsMap.get(relationEntity.id);
-              if (relationParentEntry) {
-                relationParentEntry.set(cacheEntry, (relationParentEntry.get(cacheEntry) ?? 0) + 1);
-              } else {
-                relationParentEntry = new Map();
-                entityRelationParentsMap.set(relationEntity.id, relationParentEntry);
-                relationParentEntry.set(cacheEntry, 1);
-              }
-            }
-          }
-        }
-      }
     }
 
-    const query = cacheEntry.queries.get(queryKey);
+    let query = cacheEntry.queries.get(queryKey);
+    if (!query) {
+      query = {
+        data: [],
+        listeners: [],
+        isInvalidated: true,
+      };
+      // we just set up the query and expect it to correctly set itself up in findMany
+      cacheEntry.queries.set(queryKey, query);
+    }
 
     if (query?.listeners) {
       query.listeners.push(callback);

packages/hypergraph/src/entity/update.ts

@@ -33,12 +33,20 @@ export const update = <const S extends AnyNoContext>(handle: DocHandle<DocumentC
 
       // TODO: Try to get a diff of the entity properties and only override the changed ones.
       updated = { ...decode(entity), ...data };
-      doc.entities[id] = {
+
+      const encoded = {
         ...encode(updated),
         '@@types@@': [typeName],
         __deleted: entity.__deleted ?? false,
         __version: entity.__version ?? '',
       };
+      // filter out undefined values otherwise Automerge will throw an error
+      for (const key in updated) {
+        if (updated[key] === undefined) {
+          delete encoded[key];
+        }
+      }
+      doc.entities[id] = encoded;
     });
 
     if (updated === undefined) {