query name in public use space (#288)

Author: nikgraf

apps/events/src/components/playground.tsx

@@ -3,6 +3,7 @@ import {
   _useDeleteEntityPublic,
   useHypergraphApp,
   useQuery,
+  useSpace,
 } from '@graphprotocol/hypergraph-react';
 import { useState } from 'react';
 import { Event } from '../schema';
@@ -21,18 +22,16 @@ export const Playground = () => {
   const [isCreating, setIsCreating] = useState(false);
   const { getSmartSessionClient } = useHypergraphApp();
 
-  const deleteEntity = _useDeleteEntityPublic(Event, {
-    space: 'a57cd482-6dd3-4ba3-ac44-e2e8ea7a2862',
-  });
+  const { name, id: spaceId } = useSpace({ mode: 'public' });
 
-  const createEntity = _useCreateEntityPublic(Event, {
-    space: 'a57cd482-6dd3-4ba3-ac44-e2e8ea7a2862',
-  });
+  const deleteEntity = _useDeleteEntityPublic(Event, { space: spaceId });
+  const createEntity = _useCreateEntityPublic(Event, { space: spaceId });
 
   console.log({ isLoading, isError, data });
 
   return (
     <div>
+      <h2 className="text-lg font-bold">Space: {name}</h2>
       {isLoading && <div>Loading...</div>}
       {isError && <div>Error</div>}
       <Button

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

@@ -9,13 +9,14 @@ export const Route = createLazyFileRoute('/playground')({
 });
 
 function RouteComponent() {
+  const space = 'a57cd482-6dd3-4ba3-ac44-e2e8ea7a2862';
   return (
-    <HypergraphSpaceProvider space="a57cd482-6dd3-4ba3-ac44-e2e8ea7a2862">
+    <HypergraphSpaceProvider space={space}>
       <div className="flex flex-col gap-4 max-w-(--breakpoint-sm) mx-auto py-8">
         <h1 className="text-2xl font-bold">Playground</h1>
         <Playground />
-        <CreatePropertiesAndTypesEvent space="a57cd482-6dd3-4ba3-ac44-e2e8ea7a2862" />
-        <CreateEvents space="a57cd482-6dd3-4ba3-ac44-e2e8ea7a2862" />
+        <CreatePropertiesAndTypesEvent space={space} />
+        <CreateEvents space={space} />
       </div>
     </HypergraphSpaceProvider>
   );

packages/hypergraph-react/src/HypergraphSpaceContext.tsx

@@ -14,6 +14,7 @@ import {
   useSyncExternalStore,
 } from 'react';
 import { useHypergraphApp } from './HypergraphAppContext.js';
+import { usePublicSpace } from './internal/use-public-space.js';
 
 // TODO space can be undefined
 export type HypergraphContext = { space: string };
@@ -64,8 +65,9 @@ export function useSpace(options: { space?: string; mode: 'private' | 'public' }
   const spaceId = spaceIdFromParams ?? spaceIdFromContext;
   const handle = useSubscribeToSpaceAndGetHandle({ spaceId, enabled: options.mode === 'private' });
   const ready = options.mode === 'public' ? true : handle ? handle.isReady() : false;
-  const space = useSelector(store, (state) => state.context.spaces.find((space) => space.id === spaceId));
-  return { ready, name: space?.name, id: spaceId };
+  const privateSpace = useSelector(store, (state) => state.context.spaces.find((space) => space.id === spaceId));
+  const publicSpace = usePublicSpace({ spaceId, enabled: options.mode === 'public' });
+  return { ready, name: options.mode === 'private' ? privateSpace?.name : publicSpace?.name, id: spaceId };
 }
 
 export function useCreateEntity<const S extends Entity.AnyNoContext>(type: S, options?: { space?: string }) {

packages/hypergraph-react/src/internal/use-public-space.tsx

@@ -0,0 +1,40 @@
+import { useQuery } from '@tanstack/react-query';
+import { gql, request } from 'graphql-request';
+import { GEO_API_TESTNET_ENDPOINT } from '../internal/constants.js';
+
+const spaceQueryDocument = gql`
+query Space($spaceId: String!) {
+  space(id: $spaceId) {
+    entity {
+      name
+    }
+  }
+}
+`;
+
+type SpaceQueryResult = {
+  space: {
+    entity: {
+      name: string;
+    };
+  } | null;
+};
+
+export const usePublicSpace = ({ spaceId, enabled }: { spaceId: string; enabled: boolean }) => {
+  const result = useQuery({
+    queryKey: ['hypergraph-public-space', spaceId],
+    queryFn: async () => {
+      const result = await request<SpaceQueryResult>(GEO_API_TESTNET_ENDPOINT, spaceQueryDocument, {
+        spaceId,
+      });
+      return result?.space?.entity
+        ? {
+            name: result.space.entity.name,
+          }
+        : null;
+    },
+    enabled,
+  });
+
+  return result.data;
+};