invoke list spaces when using useSpaces for private case

Author: nikgraf

apps/events/src/routes/index.tsx

@@ -19,7 +19,6 @@ function Index() {
   const accountInboxes = useSelector(store, (state) => state.context.accountInboxes);
   const {
     createSpace,
-    listSpaces,
     listInvitations,
     invitations,
     acceptInvitation,
@@ -30,11 +29,10 @@ function Index() {
 
   useEffect(() => {
     if (!isConnecting) {
-      listSpaces();
       listInvitations();
       getOwnAccountInboxes();
     }
-  }, [isConnecting, listSpaces, listInvitations, getOwnAccountInboxes]);
+  }, [isConnecting, listInvitations, getOwnAccountInboxes]);
 
   if (isConnecting) {
     return <div className="flex justify-center items-center h-screen">Loading …</div>;

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

@@ -2,6 +2,8 @@ import { store } from '@graphprotocol/hypergraph';
 import { useQuery } from '@tanstack/react-query';
 import { useSelector } from '@xstate/store/react';
 import { gql, request } from 'graphql-request';
+import { useEffect } from 'react';
+import { useHypergraphApp } from '../HypergraphAppContext.js';
 import { GEO_API_TESTNET_ENDPOINT } from '../internal/constants.js';
 
 const publicSpacesQueryDocument = gql`
@@ -47,6 +49,14 @@ export const useSpaces = (params: { mode: 'public' | 'private' }) => {
     enabled: params.mode === 'public' && !!accountAddress,
   });
 
+  const { isConnecting, listSpaces } = useHypergraphApp();
+
+  useEffect(() => {
+    if (params.mode === 'private' && !isConnecting) {
+      listSpaces();
+    }
+  }, [params.mode, listSpaces, isConnecting]);
+
   const spaces = useSelector(store, (state) => state.context.spaces);
   const spacesLoadingIsPending = useSelector(store, (state) => state.context.spacesLoadingIsPending);