fix useSpaces and Space.findManyPublic for new API (#578)

Author: nikgraf

.changeset/eighty-hornets-kiss.md

@@ -0,0 +1,7 @@
+---
+"@graphprotocol/hypergraph-react": patch
+"@graphprotocol/hypergraph": patch
+---
+
+fix useSpaces and Space.findManyPublic for new API
+  

apps/events/src/Boot.tsx

@@ -14,7 +14,11 @@ declare module '@tanstack/react-router' {
 
 export function Boot() {
   return (
-    <HypergraphAppProvider syncServerUri="http://localhost:3030" appId="93bb8907085a4a0e83dd62b0dc98e793">
+    <HypergraphAppProvider
+      syncServerUri="http://localhost:3030"
+      appId="93bb8907085a4a0e83dd62b0dc98e793"
+      apiOrigin="https://testnet-api.geobrowser.io"
+    >
       <RouterProvider router={router} />
     </HypergraphAppProvider>
   );

apps/events/src/routes/index.tsx

@@ -1,5 +1,5 @@
 import { store } from '@graphprotocol/hypergraph';
-import { useHypergraphApp, useSpaces } from '@graphprotocol/hypergraph-react';
+import { useHypergraphApp, usePublicSpaces, useSpaces } from '@graphprotocol/hypergraph-react';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { useSelector } from '@xstate/store/react';
 import { useEffect, useState } from 'react';
@@ -17,6 +17,13 @@ window.HYPERGRAPH_STORE = store;
 function Index() {
   const { data: publicSpaces } = useSpaces({ mode: 'public' });
   const { data: privateSpaces } = useSpaces({ mode: 'private' });
+
+  const { data: publicSpaces2, invalidSpaces } = usePublicSpaces({
+    filter: { editorId: 'b0043a26-cb81-379c-1217-dfd2283b67b8' },
+  });
+
+  console.log({ invalidSpaces });
+
   const [spaceName, setSpaceName] = useState('');
 
   const accountInboxes = useSelector(store, (state) => state.context.accountInboxes);
@@ -124,6 +131,18 @@ function Index() {
             </li>
           );
         })}
+        v2
+        {publicSpaces2?.map((space) => {
+          return (
+            <li key={space.id}>
+              <Card>
+                <CardHeader>
+                  <CardTitle>{space.name}</CardTitle>
+                </CardHeader>
+              </Card>
+            </li>
+          );
+        })}
       </ul>
 
       <div className="flex flex-col gap-2">

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

@@ -117,7 +117,7 @@ function RouteComponent() {
   console.log({ topics });
 
   const { data: spaces } = usePublicSpaces({
-    filter: { memberAccountAddress: '0xE86b4a182779ae6320cA04ad43Fe6a1bed051e24' },
+    filter: { memberId: 'cbbb9a68568e4e88938080ad0706f365' },
   });
   console.log('spaces', spaces);
 

docs/docs/query-public-data.md

@@ -12,7 +12,7 @@ When you only need the list of public spaces (with optional avatar metadata) you
 import { usePublicSpaces } from '@graphprotocol/hypergraph-react';
 
 const { data: spaces, invalidSpaces, isPending } = usePublicSpaces({
-  filter: { editorAccountAddress: '0x1234...' },
+  filter: { editorId: '0x1234...' },
 });
 ```
 
@@ -30,11 +30,11 @@ You can restrict the result set to spaces where a given account is a member or a
 
 ```ts
 await Space.findManyPublic({
-  filter: { memberAccountAddress: '0x1234...' },
+  filter: { memberId: '23kd4...' },
 });
 
 await Space.findManyPublic({
-  filter: { editorAccountAddress: '0x1234...' },
+  filter: { editorId: '23kd4...' },
 });
 ```
 

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

@@ -6,8 +6,8 @@ import { useEffect } from 'react';
 import { useHypergraphApp } from '../HypergraphAppContext.js';
 
 const publicSpacesQueryDocument = gql`
-query Spaces($accountAddress: String!) {
-  spaces(filter: {members: {some: {address: {is: $accountAddress}}}}) {
+query Spaces($memberId: UUID!) {
+  spaces(filter: {members: {some: {memberSpaceId: {is: $memberId}}}}) {
     id
     page {
       name

packages/hypergraph/src/space/find-many-public.ts

@@ -32,16 +32,16 @@ query spaces {
 `;
 
 const memberSpacesQueryDocument = `
-query memberSpaces($accountAddress: String!) {
-  spaces(filter: {members: {some: {address: {is: $accountAddress}}}}) {
+query memberSpaces($accountId: UUID!) {
+  spaces(filter: {members: {some: {memberSpaceId: {is: $accountId}}}}) {
     ${spaceFields}
   }
 }
 `;
 
 const editorSpacesQueryDocument = `
-query editorSpaces($accountAddress: String!) {
-  spaces(filter: {editors: {some: {address: {is: $accountAddress}}}}) {
+query editorSpaces($accountId: UUID!) {
+  spaces(filter: {editors: {some: {memberSpaceId: {is: $accountId}}}}) {
     ${spaceFields}
   }
 }
@@ -73,7 +73,7 @@ type SpacesQueryResult = {
 };
 
 type SpacesQueryVariables = {
-  accountAddress: string;
+  accountId: string;
 };
 
 type SpaceQueryEntry = NonNullable<SpacesQueryResult['spaces']>[number];
@@ -115,35 +115,35 @@ export const parseSpacesQueryResult = (queryResult: SpacesQueryResult) => {
 };
 
 export type FindManyPublicFilter =
-  | Readonly<{ memberAccountAddress: string; editorAccountAddress?: never }>
-  | Readonly<{ editorAccountAddress: string; memberAccountAddress?: never }>
-  | Readonly<{ memberAccountAddress?: undefined; editorAccountAddress?: undefined }>;
+  | Readonly<{ memberId: string; editorId?: never }>
+  | Readonly<{ editorId: string; memberId?: never }>
+  | Readonly<{ memberId?: undefined; editorId?: undefined }>;
 
 export type FindManyPublicParams = Readonly<{
   filter?: FindManyPublicFilter;
 }>;
 
 export const findManyPublic = async (params?: FindManyPublicParams) => {
   const filter = params?.filter;
-  const memberAccountAddress = filter?.memberAccountAddress;
-  const editorAccountAddress = filter?.editorAccountAddress;
+  const memberId = filter?.memberId;
+  const editorId = filter?.editorId;
 
-  if (memberAccountAddress && editorAccountAddress) {
-    throw new Error('Provide only one of memberAccountAddress or editorAccountAddress when calling findManyPublic().');
+  if (memberId && editorId) {
+    throw new Error('Provide only one of memberId or editorId when calling findManyPublic().');
   }
 
   const endpoint = `${Config.getApiOrigin()}/v2/graphql`;
 
-  if (memberAccountAddress) {
+  if (memberId) {
     const queryResult = await request<SpacesQueryResult, SpacesQueryVariables>(endpoint, memberSpacesQueryDocument, {
-      accountAddress: memberAccountAddress,
+      accountId: memberId,
     });
     return parseSpacesQueryResult(queryResult);
   }
 
-  if (editorAccountAddress) {
+  if (editorId) {
     const queryResult = await request<SpacesQueryResult, SpacesQueryVariables>(endpoint, editorSpacesQueryDocument, {
-      accountAddress: editorAccountAddress,
+      accountId: editorId,
     });
     return parseSpacesQueryResult(queryResult);
   }