remove useQueryEntity and add useEntity hook (#532)

Author: nikgraf

.changeset/wise-mugs-swim.md

@@ -0,0 +1,6 @@
+---
+"@graphprotocol/hypergraph": patch
+---
+
+improve include type for fineOne
+  

.changeset/yummy-beans-float.md

@@ -0,0 +1,6 @@
+---
+"@graphprotocol/hypergraph-react": minor
+---
+
+remove useQueryEntity and add useEntity hook
+  

apps/events/src/components/event.tsx

@@ -0,0 +1,30 @@
+import { useEntity } from '@graphprotocol/hypergraph-react';
+import { Event as EventType } from '../schema';
+
+export const Event = ({ spaceId, entityId }: { spaceId: string; entityId: string }) => {
+  const { data, isPending, isError } = useEntity(EventType, {
+    mode: 'public',
+    include: {
+      sponsors: {
+        jobOffers: {},
+      },
+    },
+    id: entityId,
+    space: spaceId,
+  });
+
+  console.log({ component: 'Event', isPending, isError, data });
+
+  return (
+    <div>
+      {isPending && <div>Loading...</div>}
+      {isError && <div>Error</div>}
+      {data && (
+        <div>
+          <h2>Event Details</h2>
+          <pre className="text-xs">{JSON.stringify(data, null, 2)}</pre>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -2,6 +2,7 @@ import { HypergraphSpaceProvider } from '@graphprotocol/hypergraph-react';
 import { createLazyFileRoute } from '@tanstack/react-router';
 import { CreateEvents } from '@/components/create-events';
 import { CreatePropertiesAndTypesEvent } from '@/components/create-properties-and-types-event';
+import { Event } from '@/components/event';
 import { Playground } from '@/components/playground';
 
 export const Route = createLazyFileRoute('/playground')({
@@ -12,6 +13,7 @@ function RouteComponent() {
   const space = 'a393e509-ae56-4d99-987c-bed71d9db631';
   return (
     <>
+      <Event spaceId={space} entityId="cf7c620b-d724-498f-b134-8280dc8249ae" />
       <Playground spaceId={space} />
       <HypergraphSpaceProvider space={space}>
         <div className="flex flex-col gap-4 max-w-(--breakpoint-sm) mx-auto py-8">

packages/hypergraph-react/src/HypergraphSpaceContext.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Entity, store } from '@graphprotocol/hypergraph';
+import { Entity, type Id, store } from '@graphprotocol/hypergraph';
 import { useSelector } from '@xstate/store/react';
 import * as Schema from 'effect/Schema';
 import {
@@ -14,6 +14,7 @@ import {
   useSyncExternalStore,
 } from 'react';
 import { useHypergraphApp } from './HypergraphAppContext.js';
+import { useEntityPublic } from './internal/use-entity-public.js';
 import { usePublicSpace } from './internal/use-public-space.js';
 
 // TODO space can be undefined
@@ -181,19 +182,28 @@ export function useQueryLocal<const S extends Entity.AnyNoContext>(type: S, para
   return { entities, deletedEntities };
 }
 
-export function useQueryEntity<const S extends Entity.AnyNoContext>(
+function useEntityPrivate<const S extends Entity.AnyNoContext>(
   type: S,
-  id: string,
-  params?: { space?: string; include?: { [K in keyof Schema.Schema.Type<S>]?: Record<string, never> } },
+  params: {
+    id: string | Id;
+    enabled?: boolean;
+    space?: string;
+    include?: { [K in keyof Schema.Schema.Type<S>]?: Record<string, Record<string, never>> } | undefined;
+  },
 ) {
   const { space: spaceFromContext } = useHypergraphSpaceInternal();
-  const { space: spaceFromParams, include } = params ?? {};
-  const handle = useSubscribeToSpaceAndGetHandle({ spaceId: spaceFromParams ?? spaceFromContext, enabled: true });
-  const prevEntityRef = useRef<Entity.Entity<S> | undefined>(undefined);
+  const { space: spaceFromParams, include, id, enabled = true } = params;
+  const handle = useSubscribeToSpaceAndGetHandle({ spaceId: spaceFromParams ?? spaceFromContext, enabled });
+  const prevEntityRef = useRef<{
+    data: Entity.Entity<S> | undefined;
+    invalidEntity: Record<string, string | boolean | number | Date> | undefined;
+    isPending: boolean;
+    isError: boolean;
+  }>({ data: undefined, invalidEntity: undefined, isPending: false, isError: false });
   const equals = Schema.equivalence(type);
 
   const subscribe = (callback: () => void) => {
-    if (!handle) {
+    if (!handle || !enabled) {
       return () => {};
     }
     const handleChange = () => {
@@ -214,7 +224,7 @@ export function useQueryEntity<const S extends Entity.AnyNoContext>(
   };
 
   return useSyncExternalStore(subscribe, () => {
-    if (!handle) {
+    if (!handle || !enabled) {
       return prevEntityRef.current;
     }
     const doc = handle.doc();
@@ -223,16 +233,39 @@ export function useQueryEntity<const S extends Entity.AnyNoContext>(
     }
 
     const found = Entity.findOne(handle, type, include)(id);
-    if (found === undefined && prevEntityRef.current !== undefined) {
+    if (found === undefined && prevEntityRef.current.data !== undefined) {
       // entity was maybe deleted, delete from the ref
-      prevEntityRef.current = undefined;
-    } else if (found !== undefined && prevEntityRef.current === undefined) {
-      prevEntityRef.current = found;
-    } else if (found !== undefined && prevEntityRef.current !== undefined && !equals(found, prevEntityRef.current)) {
+      prevEntityRef.current = { data: undefined, invalidEntity: undefined, isPending: false, isError: false };
+    } else if (found !== undefined && prevEntityRef.current.data === undefined) {
+      prevEntityRef.current = { data: found, invalidEntity: undefined, isPending: false, isError: false };
+    } else if (
+      found !== undefined &&
+      prevEntityRef.current.data !== undefined &&
+      !equals(found, prevEntityRef.current.data)
+    ) {
       // found and ref have a value, compare for equality, if they are not equal, update the ref and return
-      prevEntityRef.current = found;
+      prevEntityRef.current = { data: found, invalidEntity: undefined, isPending: false, isError: false };
     }
 
     return prevEntityRef.current;
   });
 }
+
+export function useEntity<const S extends Entity.AnyNoContext>(
+  type: S,
+  params: {
+    id: string | Id;
+    space?: string;
+    mode: 'private' | 'public';
+    include?: { [K in keyof Schema.Schema.Type<S>]?: Record<string, Record<string, never>> } | undefined;
+  },
+) {
+  const resultPublic = useEntityPublic(type, { ...params, enabled: params.mode === 'public' });
+  const resultPrivate = useEntityPrivate(type, { ...params, enabled: params.mode === 'private' });
+
+  if (params.mode === 'public') {
+    return resultPublic;
+  }
+
+  return resultPrivate;
+}

packages/hypergraph-react/src/index.ts

@@ -9,8 +9,8 @@ export {
   HypergraphSpaceProvider,
   useCreateEntity,
   useDeleteEntity,
+  useEntity,
   useHardDeleteEntity,
-  useQueryEntity,
   useQueryLocal as _useQueryLocal,
   useRemoveRelation,
   useSpace,
@@ -26,6 +26,7 @@ export { usePublishToPublicSpace } from './hooks/usePublishToSpace.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';
+export { useEntityPublic as _useEntityPublic } from './internal/use-entity-public.js';
 export { useQueryPublic as _useQueryPublic } from './internal/use-query-public.js';
 export { preparePublish } from './prepare-publish.js';
 export { publishOps } from './publish-ops.js';