migrate to new schema

Author: nikgraf

apps/events/src/components/todos.tsx

@@ -1,32 +1,34 @@
 import {
-  useCreateEntity,
+  useCreateEntityNew,
   useDeleteEntity,
-  useQuery,
+  useQueryNew,
   useRemoveRelation,
   useSpace,
   useUpdateEntity,
 } from '@graphprotocol/hypergraph-react';
 import { useEffect, useState } from 'react';
 import Select from 'react-select';
-import { Todo, User } from '../schema';
+import { Todo, TodoNew, UserNew } from '../schema';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 
 export const Todos = () => {
-  const { data: todos } = useQuery(Todo, {
+  const { data: todos } = useQueryNew(TodoNew, {
     mode: 'private',
-    include: { assignees: {} },
+    // include: { assignees: {} },
     // filter: { or: [{ name: { startsWith: 'aa' } }, { name: { is: 'sdasd' } }] },
   });
-  const { data: users } = useQuery(User, { mode: 'private' });
+  const { data: users } = useQueryNew(UserNew, { mode: 'private' });
   const { ready: spaceReady } = useSpace({ mode: 'private' });
-  const createEntity = useCreateEntity(Todo);
+  const createEntity = useCreateEntityNew(TodoNew);
   const updateEntity = useUpdateEntity(Todo);
   const deleteEntity = useDeleteEntity();
   const removeRelation = useRemoveRelation();
   const [newTodoName, setNewTodoName] = useState('');
   const [assignees, setAssignees] = useState<{ value: string; label: string }[]>([]);
 
+  console.log(todos);
+
   useEffect(() => {
     setAssignees((prevFilteredAssignees) => {
       // filter out assignees that are not in the users array whenever users change
@@ -54,7 +56,7 @@ export const Todos = () => {
             createEntity({
               name: newTodoName,
               completed: false,
-              assignees: assignees.map(({ value }) => value),
+              // assignees: assignees.map(({ value }) => value),
             });
             setNewTodoName('');
           }}
@@ -65,7 +67,7 @@ export const Todos = () => {
       {todos.map((todo) => (
         <div key={todo.id} className="flex flex-row items-center gap-2">
           <h2>{todo.name}</h2>
-          {todo.assignees.length > 0 && (
+          {/* {todo.assignees.length > 0 && (
             <span className="text-xs text-gray-500">
               Assigned to:{' '}
               {todo.assignees.map((assignee) => (
@@ -85,7 +87,7 @@ export const Todos = () => {
                 </span>
               ))}
             </span>
-          )}
+          )} */}
           <input
             type="checkbox"
             checked={todo.completed}

apps/events/src/components/users.tsx

@@ -1,16 +1,18 @@
-import { useCreateEntity, useQuery, useSpace } from '@graphprotocol/hypergraph-react';
+import { useCreateEntityNew, useQueryNew, useSpace } from '@graphprotocol/hypergraph-react';
 import { useState } from 'react';
-import { User } from '../schema.js';
+import { UserNew } from '../schema.js';
 import { Button } from './ui/button.js';
 import { Input } from './ui/input.js';
 import { UserEntry } from './user-entry.js';
 
 export const Users = () => {
-  const { data: users } = useQuery(User, { mode: 'private' });
+  const { data: users } = useQueryNew(UserNew, { mode: 'private' });
   const { ready: spaceReady } = useSpace({ mode: 'private' });
-  const createEntity = useCreateEntity(User);
+  const createEntityNew = useCreateEntityNew(UserNew);
   const [newUserName, setNewUserName] = useState('');
 
+  console.log(users);
+
   if (!spaceReady) {
     return <div>Loading space...</div>;
   }
@@ -22,7 +24,9 @@ export const Users = () => {
         <Input type="text" value={newUserName} onChange={(e) => setNewUserName(e.target.value)} />
         <Button
           onClick={() => {
-            createEntity({ name: newUserName });
+            // createEntity({ name: newUserName });
+            const user = createEntityNew({ name: newUserName });
+            console.log(user);
             setNewUserName('');
           }}
         >

apps/events/src/schema.ts

@@ -1,4 +1,4 @@
-import { Entity, Type } from '@graphprotocol/hypergraph';
+import { Entity, EntityNew, Id, Type, TypeNew } from '@graphprotocol/hypergraph';
 
 export class User extends Entity.Class<User>('User')({
   name: Type.String,
@@ -41,3 +41,44 @@ export class Todo3 extends Entity.Class<Todo3>('Todo3')({
   completed: Type.Boolean,
   description: Type.String,
 }) {}
+
+export const UserNew = EntityNew(
+  {
+    name: TypeNew.String,
+  },
+  {
+    types: [Id('bffa181e-a333-495b-949c-57f2831d7eca')],
+    properties: {
+      name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+    },
+  },
+);
+
+export const TodoNew = EntityNew(
+  {
+    name: TypeNew.String,
+    completed: TypeNew.Boolean,
+    // assignees: TypeNew.Relation(UserNew),
+  },
+  {
+    types: [Id('44fe82a9-e4c2-4330-a395-ce85ed78e421')],
+    properties: {
+      name: Id('c668aa67-bbca-4b2c-908c-9c5599035eab'),
+      completed: Id('71e7654f-2623-4794-88fb-841c8f3dd9b4'),
+    },
+  },
+);
+
+export const JobOfferNew = EntityNew(
+  {
+    name: TypeNew.String,
+    salary: TypeNew.Number,
+  },
+  {
+    types: [Id('bffa181e-a333-495b-949c-57f2831d7eca')],
+    properties: {
+      name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+      salary: Id('baa36ac9-78ac-4cf7-8394-6b2d3006bebe'),
+    },
+  },
+);

packages/hypergraph-react/src/hooks/use-create-entity.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { Entity } from '@graphprotocol/hypergraph';
+import type * as Schema from 'effect/Schema';
 import { useHypergraphSpaceInternal } from '../internal/use-hypergraph-space-internal.js';
 import { useSubscribeToSpaceAndGetHandle } from '../internal/use-subscribe-to-space.js';
 
@@ -16,3 +17,16 @@ export function useCreateEntity<const S extends Entity.AnyNoContext>(type: S, op
   }
   return Entity.create(handle, type);
 }
+
+export function useCreateEntityNew<const S extends Schema.Schema.AnyNoContext>(type: S, options?: { space?: string }) {
+  const { space: spaceIdFromParams } = options ?? {};
+  const { space: spaceFromContext } = useHypergraphSpaceInternal();
+  const spaceId = spaceIdFromParams ?? spaceFromContext;
+  const handle = useSubscribeToSpaceAndGetHandle({ spaceId, enabled: true });
+  if (!handle) {
+    return () => {
+      throw new Error('Space not found or not ready');
+    };
+  }
+  return Entity.createNew(handle, type);
+}

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

@@ -1,6 +1,6 @@
 import type { Entity } from '@graphprotocol/hypergraph';
 import type * as Schema from 'effect/Schema';
-import { useQueryPrivate } from '../internal/use-query-private.js';
+import { useQueryPrivate, useQueryPrivateNew } from '../internal/use-query-private.js';
 import { useQueryPublic } from '../internal/use-query-public.js';
 
 type QueryParams<S extends Entity.AnyNoContext> = {
@@ -34,3 +34,33 @@ export function useQuery<const S extends Entity.AnyNoContext>(type: S, params: Q
     preparePublish: preparePublishDummy,
   };
 }
+
+type QueryParamsNew<S extends Schema.Schema.AnyNoContext> = {
+  mode: 'public' | 'private';
+  filter?: Entity.EntityFilter<Schema.Schema.Type<S>> | undefined;
+  // TODO: for multi-level nesting it should only allow the allowed properties instead of Record<string, Record<string, never>>
+  include?: { [K in keyof Schema.Schema.Type<S>]?: Record<string, Record<string, never>> } | undefined;
+  space?: string | undefined;
+  first?: number | undefined;
+};
+
+export function useQueryNew<const S extends Schema.Schema.AnyNoContext>(type: S, params: QueryParamsNew<S>) {
+  const { mode, filter, include, space, first } = params;
+  const publicResult = useQueryPublic(type, { enabled: mode === 'public', filter, include, first, space });
+  const localResult = useQueryPrivateNew(type, { enabled: mode === 'private', filter, include, space });
+
+  if (mode === 'public') {
+    return {
+      ...publicResult,
+      deleted: [],
+      preparePublish: preparePublishDummy,
+    };
+  }
+
+  return {
+    ...publicResult,
+    data: localResult.entities,
+    deleted: localResult.deletedEntities,
+    preparePublish: preparePublishDummy,
+  };
+}

packages/hypergraph-react/src/index.ts

@@ -1,18 +1,12 @@
 export { PublishDiff } from './components/publish-diff/publish-diff.js';
 export { createWalletClient } from './create-wallet-client.js';
-export {
-  HypergraphAppProvider,
-  useHypergraphApp,
-  useHypergraphAuth,
-} from './HypergraphAppContext.js';
-export { HypergraphSpaceProvider } from './HypergraphSpaceContext.js';
-export { useCreateEntity } from './hooks/use-create-entity.js';
+export { useCreateEntity, useCreateEntityNew } from './hooks/use-create-entity.js';
 export { useDeleteEntity } from './hooks/use-delete-entity.js';
 export { useEntity } from './hooks/use-entity.js';
 export { useHardDeleteEntity } from './hooks/use-hard-delete-entity.js';
 export { usePrivyAuthCreatePrivateSpace as _usePrivyAuthCreatePrivateSpace } from './hooks/use-privy-auth-create-private-space.js';
 export { usePrivyAuthCreatePublicSpace as _usePrivyAuthCreatePublicSpace } from './hooks/use-privy-auth-create-public-space.js';
-export { useQuery } from './hooks/use-query.js';
+export { useQuery, useQueryNew } from './hooks/use-query.js';
 export { useRemoveRelation } from './hooks/use-remove-relation.js';
 export { useSpace } from './hooks/use-space.js';
 export { useSpaces } from './hooks/use-spaces.js';
@@ -23,6 +17,12 @@ export { useOwnAccountInbox } from './hooks/useOwnAccountInbox.js';
 export { useOwnSpaceInbox } from './hooks/useOwnSpaceInbox.js';
 export { usePublicAccountInboxes } from './hooks/usePublicAccountInboxes.js';
 export { usePublishToPublicSpace } from './hooks/usePublishToSpace.js';
+export {
+  HypergraphAppProvider,
+  useHypergraphApp,
+  useHypergraphAuth,
+} from './HypergraphAppContext.js';
+export { HypergraphSpaceProvider } from './HypergraphSpaceContext.js';
 export { generateDeleteOps as _generateDeleteOps } from './internal/generate-delete-ops.js';
 export { useCreateEntityPublic as _useCreateEntityPublic } from './internal/use-create-entity-public.js';
 export { useDeleteEntityPublic as _useDeleteEntityPublic } from './internal/use-delete-entity-public.js';

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

@@ -53,3 +53,53 @@ export function useQueryPrivate<const S extends Entity.AnyNoContext>(type: S, pa
 
   return { entities, deletedEntities };
 }
+
+type QueryParamsNew<S extends Schema.Schema.AnyNoContext> = {
+  space?: string | undefined;
+  enabled: boolean;
+  filter?: Entity.EntityFilter<Schema.Schema.Type<S>> | undefined;
+  include?: { [K in keyof Schema.Schema.Type<S>]?: Record<string, Record<string, never>> } | undefined;
+};
+
+export function useQueryPrivateNew<const S extends Schema.Schema.AnyNoContext>(type: S, params?: QueryParamsNew<S>) {
+  const { enabled = true, filter, include, space: spaceFromParams } = params ?? {};
+  const entitiesRef = useRef<Entity.EntityNew<S>[]>([]);
+  const subscriptionRef = useRef<Entity.FindManySubscriptionNew<S>>({
+    subscribe: () => () => undefined,
+    getEntities: () => entitiesRef.current,
+  });
+  const { space: spaceFromContext } = useHypergraphSpaceInternal();
+  const handle = useSubscribeToSpaceAndGetHandle({ spaceId: spaceFromParams ?? spaceFromContext, enabled });
+  const handleIsReady = handle ? handle.isReady() : false;
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: allow to change filter and include
+  useLayoutEffect(() => {
+    if (enabled && handle && handleIsReady) {
+      const subscription = Entity.subscribeToFindManyNew(handle, type, filter, include);
+      subscriptionRef.current.subscribe = subscription.subscribe;
+      subscriptionRef.current.getEntities = subscription.getEntities;
+    }
+  }, [enabled, handleIsReady, handle, type]);
+
+  // TODO: allow to change the enabled state
+  const allEntities = useSyncExternalStore(
+    subscriptionRef.current.subscribe,
+    subscriptionRef.current.getEntities,
+    () => entitiesRef.current,
+  );
+
+  const { entities, deletedEntities } = useMemo(() => {
+    const entities: Entity.EntityNew<S>[] = [];
+    const deletedEntities: Entity.EntityNew<S>[] = [];
+    for (const entity of allEntities) {
+      if (entity.__deleted === true) {
+        deletedEntities.push(entity);
+      } else {
+        entities.push(entity);
+      }
+    }
+    return { entities, deletedEntities };
+  }, [allEntities]);
+
+  return { entities, deletedEntities };
+}

packages/hypergraph/src/entity/create.ts

@@ -2,7 +2,8 @@ import type { DocHandle } from '@automerge/automerge-repo';
 import * as Schema from 'effect/Schema';
 import { generateId } from '../utils/generateId.js';
 import { isRelationField } from '../utils/isRelationField.js';
-import { findOne } from './findOne.js';
+import { encodeToGrc20Json } from './entity-new.js';
+import { findOne, findOneNew } from './findOne.js';
 import type { AnyNoContext, DocumentContent, DocumentRelation, Entity, Insert } from './types.js';
 
 /**
@@ -56,3 +57,21 @@ export const create = <const S extends AnyNoContext>(handle: DocHandle<DocumentC
     return findOne(handle, type)(entityId) as Entity<S>;
   };
 };
+
+export const createNew = <const S extends Schema.Schema.AnyNoContext>(handle: DocHandle<DocumentContent>, type: S) => {
+  // TODO: return type
+  return (data: Readonly<Schema.Schema.Type<S>>) => {
+    const entityId = generateId();
+    const encoded = encodeToGrc20Json(type, { ...data, id: entityId });
+
+    handle.change((doc) => {
+      doc.entities ??= {};
+      doc.entities[entityId] = {
+        ...encoded,
+        __deleted: false,
+      };
+    });
+
+    return findOneNew(handle, type)(entityId);
+  };
+};

packages/hypergraph/src/entity/decodedEntitiesCacheNew.ts

@@ -0,0 +1,37 @@
+import type * as Schema from 'effect/Schema';
+import type { EntityNew } from './types.js';
+
+export type QueryEntry = {
+  data: Array<EntityNew<Schema.Schema.AnyNoContext>>; // holds the decoded entities of this query and must be a stable reference and use the same reference for the `entities` array
+  listeners: Array<() => void>; // listeners to this query
+  isInvalidated: boolean;
+  include: { [K in keyof Schema.Schema.Type<Schema.Schema.AnyNoContext>]?: Record<string, Record<string, never>> };
+};
+
+export type DecodedEntitiesCacheEntry = {
+  type: Schema.Schema.AnyNoContext; // TODO should be the type of the entity
+  entities: Map<string, EntityNew<Schema.Schema.AnyNoContext>>; // holds all entities of this type
+  queries: Map<
+    string, // instead of serializedQueryKey as string we could also have the actual params
+    QueryEntry
+  >;
+  isInvalidated: boolean;
+};
+
+/*
+/*
+ * Note: Currently we only use one global cache for all entities.
+ * In the future we probably want a build function that creates a cache and returns the
+ * functions (create, update, findMany, …) that use this specific cache.
+ *
+ * How does it work?
+ *
+ * We store all decoded entities in a cache and for each query we reference the entities relevant to this query.
+ * Whenever a query is registered we add it to the cache and add a listener to the query. Whenever a query is unregistered we remove the listener from the query.
+ */
+type DecodedEntitiesCache = Map<
+  string, // serialized type IDs
+  DecodedEntitiesCacheEntry
+>;
+
+export const decodedEntitiesCache: DecodedEntitiesCache = new Map();