add type optional (#382)

Author: nikgraf

.changeset/pretty-showers-tap.md

@@ -0,0 +1,7 @@
+---
+"@graphprotocol/hypergraph-react": patch
+"@graphprotocol/hypergraph": patch
+---
+
+add Type.optional
+  

apps/events/package.json

@@ -14,6 +14,7 @@
     "@noble/hashes": "^1.8.0",
     "@radix-ui/react-avatar": "^1.1.9",
     "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-slot": "^1.2.2",
     "@tanstack/react-query": "^5.75.5",
     "@tanstack/react-router": "^1.120.2",

apps/events/src/components/events/events.tsx

@@ -10,6 +10,7 @@ import { useState } from 'react';
 import { Event } from '../../schema';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
+import { Label } from '../ui/label';
 
 export const Events = () => {
   const { data: eventsLocalData } = useQuery(Event, { mode: 'private' });
@@ -43,6 +44,7 @@ export const Events = () => {
       {eventsLocalData.map((event) => (
         <div key={event.id} className="flex flex-row items-center gap-2">
           <h2>{event.name}</h2>
+          <p>{event.description}</p>
           <div className="text-xs">{event.id}</div>
           <select
             value={selectedSpace}
@@ -66,10 +68,22 @@ export const Events = () => {
           e.preventDefault();
           const formData = new FormData(e.target as HTMLFormElement);
           const name = formData.get('name') as string;
-          createEvent({ name });
+          const description = formData.get('description') as string;
+          if (!name) {
+            alert('Name is required');
+            return;
+          }
+          if (description) {
+            createEvent({ name, description });
+          } else {
+            createEvent({ name });
+          }
         }}
       >
-        <Input type="text" name="name" />
+        <Label htmlFor="name">Name</Label>
+        <Input type="text" name="name" required />
+        <Label htmlFor="description">Description</Label>
+        <Input type="text" name="description" />
         <Button type="submit">Create Event</Button>
       </form>
     </>

apps/events/src/components/playground.tsx

@@ -17,7 +17,7 @@ export const Playground = ({ spaceId }: { spaceId: string }) => {
         jobOffers: {},
       },
     },
-    first: 2,
+    first: 10,
     space: spaceId,
   });
   const [isDeleting, setIsDeleting] = useState(false);

apps/events/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import type * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

apps/events/src/mapping.ts

@@ -6,6 +6,7 @@ export const mapping: Mapping.Mapping = {
     typeIds: [Id.Id('7f9562d4-034d-4385-bf5c-f02cdebba47a')],
     properties: {
       name: Id.Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+      description: Id.Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'),
     },
     relations: {
       sponsors: Id.Id('6860bfac-f703-4289-b789-972d0aaf3abe'),

apps/events/src/schema.ts

@@ -33,6 +33,6 @@ export class Company extends Entity.Class<Company>('Company')({
 
 export class Event extends Entity.Class<Event>('Event')({
   name: Type.Text,
-  // description: Type.Text,
+  description: Type.optional(Type.Text),
   sponsors: Type.Relation(Company),
 }) {}

docs/docs/schema.md

@@ -56,6 +56,20 @@ export class Company extends Entity.Class<Company>('Company')({
 }) {}
 ```
 
+## Optional Fields
+
+You can make a field optional by wrapping it in `Type.optional`.
+
+```ts
+import { Entity, Type } from '@graphprotocol/hypergraph';
+
+export class Company extends Entity.Class<Company>('Company')({
+  name: Type.Text,
+  description: Type.optional(Type.Text),
+  founded: Type.optional(Type.Date),
+}) {}
+```
+
 ## Schema Examples
 
 You can search for dozens of schema/mapping examples on the [Hypergraph Schema Browser](https://schema-browser.vercel.app/).

packages/hypergraph-react/src/hooks/use-spaces.ts

@@ -24,7 +24,7 @@ type PublicSpacesQueryResult = {
     spaceAddress: string;
     page: {
       name: string;
-    };
+    } | null;
   }[];
 };
 
@@ -43,7 +43,7 @@ export const useSpaces = (params: { mode: 'public' | 'private' }) => {
       return result?.spaces
         ? result.spaces.map((space) => ({
             id: space.id,
-            name: space.page.name,
+            name: space.page?.name,
             spaceAddress: space.spaceAddress,
           }))
         : [];

packages/hypergraph-react/src/internal/use-create-entity-public.ts

@@ -1,6 +1,6 @@
 import { Graph, Id, type PropertiesParam, type RelationsParam } from '@graphprotocol/grc-20';
 import type { Connect, Entity } from '@graphprotocol/hypergraph';
-import { store, Type } from '@graphprotocol/hypergraph';
+import { store, TypeUtils } from '@graphprotocol/hypergraph';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSelector } from '@xstate/store/react';
 import type * as Schema from 'effect/Schema';
@@ -33,14 +33,20 @@ export function useCreateEntityPublic<const S extends Entity.AnyNoContext>(
       const fields = type.fields;
       const values: PropertiesParam = [];
       for (const [key, value] of Object.entries(mappingEntry.properties || {})) {
+        if (data[key] === undefined) {
+          if (TypeUtils.isOptional(fields[key])) {
+            continue;
+          }
+          throw new Error(`Value for ${key} is undefined`);
+        }
         let serializedValue: string = data[key];
-        if (fields[key] === Type.Checkbox) {
+        if (TypeUtils.isCheckboxOrOptionalCheckboxType(fields[key])) {
           serializedValue = Graph.serializeCheckbox(data[key]);
-        } else if (fields[key] === Type.Date) {
+        } else if (TypeUtils.isDateOrOptionalDateType(fields[key])) {
           serializedValue = Graph.serializeDate(data[key]);
-        } else if (fields[key] === Type.Point) {
+        } else if (TypeUtils.isPointOrOptionalPointType(fields[key])) {
           serializedValue = Graph.serializePoint(data[key]);
-        } else if (fields[key] === Type.Number) {
+        } else if (TypeUtils.isNumberOrOptionalNumberType(fields[key])) {
           serializedValue = Graph.serializeNumber(data[key]);
         }