first iteration for relations

Author: nikgraf

apps/events/package.json

@@ -27,6 +27,7 @@
     "lucide-react": "^0.471.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-select": "^5.10.0",
     "siwe": "^2.3.2",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",

apps/events/src/components/todos.tsx

@@ -1,25 +1,34 @@
 import { useCreateEntity, useDeleteEntity, useQueryEntities, useUpdateEntity } from '@graphprotocol/hypergraph-react';
 import { useState } from 'react';
-import { Todo } from '../schema';
+import Select from 'react-select';
+import { Todo, User } from '../schema';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 
 export const Todos = () => {
   const todos = useQueryEntities(Todo);
+  const users = useQueryEntities(User);
   const createEntity = useCreateEntity(Todo);
   const updateEntity = useUpdateEntity(Todo);
   const deleteEntity = useDeleteEntity();
-  const [newTodoTitle, setNewTodoTitle] = useState('');
+  const [newTodoName, setNewTodoName] = useState('');
+  const [assignees, setAssignees] = useState<{ value: string; label: string }[]>([]);
 
+  const userOptions = users.map((user) => ({ value: user.id, label: user.name }));
   return (
     <>
       <h1 className="text-2xl font-bold">Todos</h1>
-      <div className="flex flex-row gap-2">
-        <Input type="text" value={newTodoTitle} onChange={(e) => setNewTodoTitle(e.target.value)} />
+      <div className="flex flex-col gap-2">
+        <Input type="text" value={newTodoName} onChange={(e) => setNewTodoName(e.target.value)} />
+        <Select isMulti value={assignees} onChange={(e) => setAssignees(e.map((a) => a))} options={userOptions} />
         <Button
           onClick={() => {
-            createEntity({ name: newTodoTitle, completed: false });
-            setNewTodoTitle('');
+            if (newTodoName === '') {
+              alert('Todo text is required');
+              return;
+            }
+            createEntity({ name: newTodoName, completed: false, assignees: assignees.map(({ value }) => value) });
+            setNewTodoName('');
           }}
         >
           Create Todo
@@ -28,6 +37,11 @@ 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 && (
+            <span className="text-xs text-gray-500">
+              Assigned to: {todo.assignees.map((assignee) => assignee.name).join(', ')}
+            </span>
+          )}
           <input
             type="checkbox"
             checked={todo.completed}

apps/events/src/components/users.tsx

@@ -0,0 +1,37 @@
+import { useCreateEntity, useDeleteEntity, useQueryEntities } from '@graphprotocol/hypergraph-react';
+import { useState } from 'react';
+import { User } from '../schema';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+
+export const Users = () => {
+  const users = useQueryEntities(User);
+  const createEntity = useCreateEntity(User);
+  const deleteEntity = useDeleteEntity();
+  const [newUserName, setNewUserName] = useState('');
+
+  return (
+    <>
+      <h1 className="text-2xl font-bold">Users</h1>
+      <div className="flex flex-row gap-2">
+        <Input type="text" value={newUserName} onChange={(e) => setNewUserName(e.target.value)} />
+        <Button
+          onClick={() => {
+            createEntity({ name: newUserName });
+            setNewUserName('');
+          }}
+        >
+          Create User
+        </Button>
+      </div>
+      {users.map((user) => (
+        <div key={user.id} className="flex flex-row items-center gap-2">
+          <h2>
+            {user.name} <span className="text-xs text-gray-500">({user.id})</span>
+          </h2>
+          <Button onClick={() => deleteEntity(user.id)}>Delete</Button>
+        </div>
+      ))}
+    </>
+  );
+};

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

@@ -7,6 +7,7 @@ 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 { Users } from '@/components/users';
 import { availableAccounts } from '@/lib/availableAccounts';
 import { useEffect, useState } from 'react';
 import { getAddress } from 'viem';
@@ -39,6 +40,7 @@ function Space() {
   return (
     <div className="flex flex-col gap-4 max-w-screen-sm mx-auto py-8">
       <HypergraphSpaceProvider space={spaceId}>
+        <Users />
         <Todos />
         <TodosReadOnly />
         {show2ndTodos && <Todos />}

apps/events/src/schema.ts

@@ -1,7 +1,13 @@
 import { Entity } from '@graphprotocol/hypergraph';
 
+export class User extends Entity.Class<User>('User')({
+  id: Entity.Generated(Entity.Text),
+  name: Entity.Text,
+}) {}
+
 export class Todo extends Entity.Class<Todo>('Todo')({
   id: Entity.Generated(Entity.Text),
   name: Entity.Text,
   completed: Entity.Checkbox,
+  assignees: Entity.Reference(Entity.ReferenceArray(User)),
 }) {}

packages/hypergraph/src/Entity.ts

@@ -3,6 +3,7 @@ import * as VariantSchema from '@effect/experimental/VariantSchema';
 import * as Data from 'effect/Data';
 import * as Schema from 'effect/Schema';
 import { generateId } from './utils/generateId.js';
+import { hasArrayField } from './utils/hasArrayField.js';
 
 const {
   Class,
@@ -35,7 +36,6 @@ export type AnyNoContext = Schema.Schema.AnyNoContext & {
 
 export type Update<S extends Any> = S['update'];
 export type Insert<S extends Any> = S['insert'];
-
 export interface Generated<S extends Schema.Schema.All | Schema.PropertySignature.All>
   extends VariantSchema.Field<{
     readonly select: S;
@@ -88,6 +88,7 @@ type DecodedEntitiesCache = Map<
   string, // type name
   {
     decoder: (data: unknown) => unknown;
+    type: Any; // TODO should be the type of the entity
     entities: Map<string, Entity<AnyNoContext>>; // holds all entities of this type
     queries: Map<
       string, // instead of serializedQueryKey as string we could also have the actual params
@@ -147,7 +148,39 @@ export const subscribeToDocumentChanges = (handle: DocHandle<DocumentContent>) =
         const cacheEntry = decodedEntitiesCache.get(typeName);
         if (!cacheEntry) continue;
 
-        const decoded = cacheEntry.decoder({ ...entity, id: entityId });
+        const relations: Record<string, Entity<AnyNoContext>> = {};
+        for (const [fieldName, field] of Object.entries(cacheEntry.type.fields)) {
+          // check if the type exists in the cach and is a proper relation
+          // TODO: what's the right way to get the name of the type?
+          // @ts-expect-error name is defined
+          const fieldCacheEntry = decodedEntitiesCache.get(field.name);
+          if (!fieldCacheEntry) continue;
+
+          const relationEntities: Array<Entity<AnyNoContext>> = [];
+
+          if (hasArrayField(entity, fieldName)) {
+            for (const relationEntityId of entity[fieldName]) {
+              const relationEntity = doc.entities?.[relationEntityId];
+              if (
+                !relationEntity ||
+                typeof relationEntity !== 'object' ||
+                !('@@types@@' in relationEntity) ||
+                !Array.isArray(relationEntity['@@types@@'])
+              )
+                continue;
+
+              relationEntities.push({ ...relationEntity, id: relationEntityId });
+            }
+          }
+
+          relations[fieldName] = relationEntities;
+        }
+
+        const decoded = cacheEntry.decoder({
+          ...entity,
+          ...relations,
+          id: entityId,
+        });
         cacheEntry.entities.set(entityId, decoded);
 
         const query = cacheEntry.queries.get('all');
@@ -379,11 +412,54 @@ export function subscribeToFindMany<const S extends AnyNoContext>(
 
     decodedEntitiesCache.set(typeName, {
       decoder: decode,
+      type,
       entities: entitiesMap,
       queries,
     });
   }
 
+  const allTypes = new Set<S>();
+  for (const [_key, field] of Object.entries(type.fields)) {
+    // TODO check if it is a class instead of specific name
+    // TODO: what's the right way to extract the name from the ast
+    // @ts-expect-error rest is defined
+    if (field.ast.rest) {
+      // @ts-expect-error name is defined
+      const typeName = field.ast.rest[0].type.to.toString();
+      if (typeName === 'User') {
+        allTypes.add(field as S);
+      }
+    }
+  }
+
+  for (const type of allTypes) {
+    // TODO: what's the right way to get the name of the type?
+    // @ts-expect-error name is defined
+    const typeName = type.name;
+    const entities = findMany(handle, type);
+
+    if (decodedEntitiesCache.has(typeName)) {
+      // add a listener to the existing query
+      const cacheEntry = decodedEntitiesCache.get(typeName);
+
+      for (const entity of entities) {
+        cacheEntry?.entities.set(entity.id, entity);
+      }
+    } else {
+      const entitiesMap = new Map();
+      for (const entity of entities) {
+        entitiesMap.set(entity.id, entity);
+      }
+
+      decodedEntitiesCache.set(typeName, {
+        decoder: decode,
+        type,
+        entities: entitiesMap,
+        queries: new Map(),
+      });
+    }
+  }
+
   const subscribe = (callback: () => void) => {
     const query = decodedEntitiesCache.get(typeName)?.queries.get(queryKey);
     if (query?.listeners) {
@@ -435,3 +511,12 @@ export const findOne =
 
     return undefined;
   };
+
+export const Reference = <S extends Schema.Schema.All | Schema.PropertySignature.All>(schema: S) =>
+  Field({
+    select: schema,
+    insert: Schema.optional(Schema.Array(Schema.String)),
+    update: Schema.optional(Schema.Array(Schema.String)),
+  });
+
+export const ReferenceArray = Schema.Array;

packages/hypergraph/src/utils/hasArrayField.ts

@@ -0,0 +1,4 @@
+export const hasArrayField = (obj: unknown, key: string): obj is { [K in string]: string[] } => {
+  // biome-ignore lint/suspicious/noExplicitAny: any is fine here
+  return obj !== null && typeof obj === 'object' && key in obj && Array.isArray((obj as any)[key]);
+};