listing public spaces

Author: nikgraf

apps/events/src/routes/index.tsx

@@ -2,7 +2,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { store } from '@graphprotocol/hypergraph';
-import { useHypergraphApp } from '@graphprotocol/hypergraph-react';
+import { useHypergraphApp, useSpaces } from '@graphprotocol/hypergraph-react';
 import { Link, createFileRoute } from '@tanstack/react-router';
 import { useSelector } from '@xstate/store/react';
 import { useEffect, useState } from 'react';
@@ -12,6 +12,7 @@ export const Route = createFileRoute('/')({
 });
 
 function Index() {
+  const { data: publicSpaces } = useSpaces({ mode: 'public' });
   const spaces = useSelector(store, (state) => state.context.spaces);
   const [spaceName, setSpaceName] = useState('');
 
@@ -89,6 +90,8 @@ function Index() {
           Create space
         </Button>
       </div>
+
+      <h2 className="text-lg font-bold">Private Spaces</h2>
       <ul className="flex flex-col gap-2">
         {spaces.length === 0 && <div>No spaces</div>}
         {spaces.map((space) => {
@@ -106,6 +109,21 @@ function Index() {
         })}
       </ul>
 
+      <h2 className="text-lg font-bold">Public Spaces</h2>
+      <ul className="flex flex-col gap-2">
+        {publicSpaces?.map((space) => {
+          return (
+            <li key={space.id}>
+              <Card>
+                <CardHeader>
+                  <CardTitle>{space.name}</CardTitle>
+                </CardHeader>
+              </Card>
+            </li>
+          );
+        })}
+      </ul>
+
       <div className="flex flex-col gap-2">
         <h2 className="text-lg font-bold">Account Inboxes</h2>
         <Button

packages/hypergraph-react/src/HypergraphAppContext.tsx

@@ -21,6 +21,7 @@ import {
   Utils,
   store,
 } from '@graphprotocol/hypergraph';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useSelector as useSelectorStore } from '@xstate/store/react';
 import { Effect, Exit } from 'effect';
 import * as Schema from 'effect/Schema';
@@ -38,6 +39,8 @@ import type { Address } from 'viem';
 
 const decodeResponseMessage = Schema.decodeUnknownEither(Messages.ResponseMessage);
 
+const queryClient = new QueryClient();
+
 export type HypergraphAppCtx = {
   // auth related
   logout(): void;
@@ -1352,7 +1355,9 @@ export function HypergraphAppProvider({
         ensureSpaceInbox: ensureSpaceInboxForContext,
       }}
     >
-      <RepoContext.Provider value={repo}>{children}</RepoContext.Provider>
+      <QueryClientProvider client={queryClient}>
+        <RepoContext.Provider value={repo}>{children}</RepoContext.Provider>
+      </QueryClientProvider>
     </HypergraphAppContext.Provider>
   );
 }

packages/hypergraph-react/src/HypergraphSpaceContext.tsx

@@ -3,7 +3,6 @@
 import type { AnyDocumentId, DocHandle, Repo } from '@automerge/automerge-repo';
 import { useRepo } from '@automerge/automerge-repo-react-hooks';
 import { Entity, Utils } from '@graphprotocol/hypergraph';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as Schema from 'effect/Schema';
 import { type ReactNode, createContext, useContext, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 
@@ -25,8 +24,6 @@ function useHypergraphSpaceInternal() {
   return context as HypergraphContext;
 }
 
-const queryClient = new QueryClient();
-
 export function HypergraphSpaceProvider({ space, children }: { space: string; children: ReactNode }) {
   const repo = useRepo();
   const ref = useRef<HypergraphContext | undefined>(undefined);
@@ -44,11 +41,7 @@ export function HypergraphSpaceProvider({ space, children }: { space: string; ch
     };
   }
 
-  return (
-    <QueryClientProvider client={queryClient}>
-      <HypergraphReactContext.Provider value={current}>{children}</HypergraphReactContext.Provider>
-    </QueryClientProvider>
-  );
+  return <HypergraphReactContext.Provider value={current}>{children}</HypergraphReactContext.Provider>;
 }
 
 export function useCreateEntity<const S extends Entity.AnyNoContext>(type: S) {

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

@@ -0,0 +1,45 @@
+import { useQuery } from '@tanstack/react-query';
+import { gql, request } from 'graphql-request';
+import { GEO_API_TESTNET_ENDPOINT } from '../internal/constants.js';
+
+const publicSpacesQueryDocument = gql`
+query Spaces($accountAddress: String!) {
+  spaces(filter: {
+      member: { is: $accountAddress }
+  }) {
+    id
+    spaceAddress
+    entity {
+      name
+    }
+  }
+}
+`;
+
+type PublicSpacesQueryResult = {
+  spaces: {
+    id: string;
+    spaceAddress: string;
+    entity: {
+      name: string;
+    };
+  }[];
+};
+
+export const useSpaces = (params: { mode: 'public' }) => {
+  return useQuery({
+    queryKey: ['hypergraph-spaces', params.mode],
+    queryFn: async () => {
+      const result = await request<PublicSpacesQueryResult>(GEO_API_TESTNET_ENDPOINT, publicSpacesQueryDocument, {
+        accountAddress: '0xBE0298aF8D440bEFA78E7e8A538D8ecBFF06bfC7',
+      });
+      return result?.spaces
+        ? result.spaces.map((space) => ({
+            id: space.id,
+            name: space.entity.name,
+            spaceAddress: space.spaceAddress,
+          }))
+        : [];
+    },
+  });
+};

packages/hypergraph-react/src/index.ts

@@ -1,5 +1,6 @@
 export { PublishDiff } from './components/publish-diff/publish-diff.js';
 export { createWalletClient } from './create-wallet-client.js';
+export { useSpaces } from './hooks/use-spaces.js';
 export { useExternalAccountInbox } from './hooks/useExternalAccountInbox.js';
 export { useExternalSpaceInbox } from './hooks/useExternalSpaceInbox.js';
 export { useOwnAccountInbox } from './hooks/useOwnAccountInbox.js';