allow to specify and retrieve relation entity values from the knowledge graph (#550)

Author: nikgraf

.changeset/crazy-beans-spend.md

@@ -0,0 +1,45 @@
+---
+"@graphprotocol/hypergraph-react": patch
+"@graphprotocol/hypergraph": patch
+---
+
+Extend Entity.Schema to allow querying for relation entity values
+
+In the following example we define a Project entity and a Podcast entity with the relation `projects` to the Project entity. In the Type.Relation you now can define the properties of the relation entity as a second argument. In the mapping you also need to define the properties of the relation entity instead of just the property id of the relation.
+
+```ts
+export const Project = Entity.Schema(
+  {
+    name: Type.String,
+  },
+  {
+    types: [Id('69732974-c632-490d-81a3-12ea567b2a8e')],
+    properties: {
+      name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+    },
+  },
+);
+
+export const Podcast = Entity.Schema(
+  {
+    name: Type.String,
+    projects: Type.Relation(Project, {
+      properties: {
+        website: Type.optional(Type.String),
+      },
+    }),
+  },
+  {
+    types: [Id('69732974-c632-490d-81a3-12ea567b2a8e')],
+    properties: {
+      name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+      projects: {
+        propertyId: Id('71931b5f-1d6a-462e-81d9-5b8e85fb5c4b'),
+        properties: {
+          website: Id('eed38e74-e679-46bf-8a42-ea3e4f8fb5fb'),
+        },
+      },
+    },
+  },
+);
+```

apps/events/src/routeTree.gen.ts

@@ -23,9 +23,15 @@ import { Route as SpaceSpaceIdPlaygroundRouteImport } from './routes/space/$spac
 import { Route as SpaceSpaceIdEventsRouteImport } from './routes/space/$spaceId/events'
 import { Route as SpaceSpaceIdChatRouteImport } from './routes/space/$spaceId/chat'
 
+const PodcastsLazyRouteImport = createFileRoute('/podcasts')()
 const PlaygroundLazyRouteImport = createFileRoute('/playground')()
 const LoginLazyRouteImport = createFileRoute('/login')()
 
+const PodcastsLazyRoute = PodcastsLazyRouteImport.update({
+  id: '/podcasts',
+  path: '/podcasts',
+  getParentRoute: () => rootRouteImport,
+} as any).lazy(() => import('./routes/podcasts.lazy').then((d) => d.Route))
 const PlaygroundLazyRoute = PlaygroundLazyRouteImport.update({
   id: '/playground',
   path: '/playground',
@@ -98,6 +104,7 @@ export interface FileRoutesByFullPath {
   '/authenticate-success': typeof AuthenticateSuccessRoute
   '/login': typeof LoginLazyRoute
   '/playground': typeof PlaygroundLazyRoute
+  '/podcasts': typeof PodcastsLazyRoute
   '/account-inbox/$inboxId': typeof AccountInboxInboxIdRoute
   '/friends/$accountAddress': typeof FriendsAccountAddressRoute
   '/space/$spaceId': typeof SpaceSpaceIdRouteWithChildren
@@ -113,6 +120,7 @@ export interface FileRoutesByTo {
   '/authenticate-success': typeof AuthenticateSuccessRoute
   '/login': typeof LoginLazyRoute
   '/playground': typeof PlaygroundLazyRoute
+  '/podcasts': typeof PodcastsLazyRoute
   '/account-inbox/$inboxId': typeof AccountInboxInboxIdRoute
   '/friends/$accountAddress': typeof FriendsAccountAddressRoute
   '/space/$spaceId/chat': typeof SpaceSpaceIdChatRoute
@@ -128,6 +136,7 @@ export interface FileRoutesById {
   '/authenticate-success': typeof AuthenticateSuccessRoute
   '/login': typeof LoginLazyRoute
   '/playground': typeof PlaygroundLazyRoute
+  '/podcasts': typeof PodcastsLazyRoute
   '/account-inbox/$inboxId': typeof AccountInboxInboxIdRoute
   '/friends/$accountAddress': typeof FriendsAccountAddressRoute
   '/space/$spaceId': typeof SpaceSpaceIdRouteWithChildren
@@ -145,6 +154,7 @@ export interface FileRouteTypes {
     | '/authenticate-success'
     | '/login'
     | '/playground'
+    | '/podcasts'
     | '/account-inbox/$inboxId'
     | '/friends/$accountAddress'
     | '/space/$spaceId'
@@ -160,6 +170,7 @@ export interface FileRouteTypes {
     | '/authenticate-success'
     | '/login'
     | '/playground'
+    | '/podcasts'
     | '/account-inbox/$inboxId'
     | '/friends/$accountAddress'
     | '/space/$spaceId/chat'
@@ -174,6 +185,7 @@ export interface FileRouteTypes {
     | '/authenticate-success'
     | '/login'
     | '/playground'
+    | '/podcasts'
     | '/account-inbox/$inboxId'
     | '/friends/$accountAddress'
     | '/space/$spaceId'
@@ -190,13 +202,21 @@ export interface RootRouteChildren {
   AuthenticateSuccessRoute: typeof AuthenticateSuccessRoute
   LoginLazyRoute: typeof LoginLazyRoute
   PlaygroundLazyRoute: typeof PlaygroundLazyRoute
+  PodcastsLazyRoute: typeof PodcastsLazyRoute
   AccountInboxInboxIdRoute: typeof AccountInboxInboxIdRoute
   FriendsAccountAddressRoute: typeof FriendsAccountAddressRoute
   SpaceSpaceIdRoute: typeof SpaceSpaceIdRouteWithChildren
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/podcasts': {
+      id: '/podcasts'
+      path: '/podcasts'
+      fullPath: '/podcasts'
+      preLoaderRoute: typeof PodcastsLazyRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/playground': {
       id: '/playground'
       path: '/playground'
@@ -318,6 +338,7 @@ const rootRouteChildren: RootRouteChildren = {
   AuthenticateSuccessRoute: AuthenticateSuccessRoute,
   LoginLazyRoute: LoginLazyRoute,
   PlaygroundLazyRoute: PlaygroundLazyRoute,
+  PodcastsLazyRoute: PodcastsLazyRoute,
   AccountInboxInboxIdRoute: AccountInboxInboxIdRoute,
   FriendsAccountAddressRoute: FriendsAccountAddressRoute,
   SpaceSpaceIdRoute: SpaceSpaceIdRouteWithChildren,

apps/events/src/routes/__root.tsx

@@ -33,6 +33,9 @@ export const Route = createRootRoute({
           <nav className="ml-auto flex gap-4 sm:gap-6">
             {authenticated ? (
               <div className="flex items-center gap-4">
+                <Link className="text-xs" to="/podcasts">
+                  Podcasts
+                </Link>
                 <Link className="text-xs" to="/playground">
                   Playground
                 </Link>

apps/events/src/routes/podcasts.lazy.tsx

@@ -0,0 +1,40 @@
+import { useEntities } from '@graphprotocol/hypergraph-react';
+import { createLazyFileRoute } from '@tanstack/react-router';
+import { Podcast } from '@/schema';
+
+export const Route = createLazyFileRoute('/podcasts')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const space = '530a70d9-d5ee-410a-850a-cf70e4be2ee5';
+
+  const { data, isLoading, isError } = useEntities(Podcast, {
+    mode: 'public',
+    first: 100,
+    space: space,
+    include: {
+      projects: {},
+    },
+  });
+  console.log({ data, isLoading, isError });
+  return (
+    <>
+      <h1>Podcasts</h1>
+      {isLoading && <div>Loading...</div>}
+      {isError && <div>Error</div>}
+      {data?.map((podcast) => (
+        <div key={podcast.id}>
+          <h2>{podcast.name}</h2>
+          {podcast.projects.map((project) => (
+            <div key={project._relation.id}>
+              <h3>- {project.name}</h3>
+              <div>--{project._relation.website}</div>
+            </div>
+          ))}
+        </div>
+      ))}
+      <pre className="text-xs">{JSON.stringify(data, null, 2)}</pre>
+    </>
+  );
+}

apps/events/src/schema.ts

@@ -111,15 +111,42 @@ export const Project = Entity.Schema(
     name: Type.String,
     description: Type.optional(Type.String),
     x: Type.optional(Type.String),
-    avatar: Type.Relation(Image),
   },
   {
     types: [Id('484a18c5-030a-499c-b0f2-ef588ff16d50')],
     properties: {
       name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
       description: Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'),
       x: Id('0d625978-4b3c-4b57-a86f-de45c997c73c'),
-      avatar: Id('1155beff-fad5-49b7-a2e0-da4777b8792c'),
+    },
+  },
+);
+
+export const Podcast = Entity.Schema(
+  {
+    name: Type.String,
+    description: Type.optional(Type.String),
+    dateFounded: Type.Date,
+    rssFeedUrl: Type.optional(Type.String),
+    projects: Type.Relation(Project, {
+      properties: {
+        website: Type.optional(Type.String),
+      },
+    }),
+  },
+  {
+    types: [Id('69732974-c632-490d-81a3-12ea567b2a8e')],
+    properties: {
+      name: Id('a126ca53-0c8e-48d5-b888-82c734c38935'),
+      description: Id('9b1f76ff-9711-404c-861e-59dc3fa7d037'),
+      dateFounded: Id('41aa3d98-47b6-4a97-b7ec-427e575b910e'),
+      rssFeedUrl: Id('4dd1a486-c1ad-48c6-b261-e4c8edf7ac65'),
+      projects: {
+        propertyId: Id('71931b5f-1d6a-462e-81d9-5b8e85fb5c4b'),
+        properties: {
+          website: Id('eed38e74-e679-46bf-8a42-ea3e4f8fb5fb'),
+        },
+      },
     },
   },
 );