hook for publishing public data (#416)

Author: baiirun

.changeset/tame-eagles-crash.md

@@ -0,0 +1,6 @@
+---
+"create-hypergraph": patch
+---
+
+Update vite template to use usePublishToPublicSpace
+  

.changeset/tidy-ghosts-clean.md

@@ -0,0 +1,6 @@
+---
+"@graphprotocol/hypergraph-react": patch
+---
+
+Add usePublishToPublicSpace hook
+  

.tool-versions

@@ -0,0 +1 @@
+pnpm 10.14.0

apps/create-hypergraph/template-vite-react/src/routes/private-space/$space-id.tsx

@@ -2,13 +2,11 @@ import { Button } from '@/components/ui/button';
 import { Address } from '@/schema';
 import {
   HypergraphSpaceProvider,
-  preparePublish,
-  publishOps,
   useCreateEntity,
-  useHypergraphApp,
   useQuery,
   useSpace,
   useSpaces,
+  usePublishToPublicSpace
 } from '@graphprotocol/hypergraph-react';
 import { createFileRoute } from '@tanstack/react-router';
 import { useState } from 'react';
@@ -34,7 +32,10 @@ function PrivateSpace() {
   const [selectedSpace, setSelectedSpace] = useState<string>('');
   const createAddress = useCreateEntity(Address);
   const [addressName, setAddressName] = useState('');
-  const { getSmartSessionClient } = useHypergraphApp();
+  const { mutate: publishToPublicSpace, isPending } = usePublishToPublicSpace({
+    onSuccess: () => alert('Address published to public space'),
+    onError: () => alert('Error publishing address to public space') 
+  });
 
   if (!ready) {
     return (
@@ -53,31 +54,6 @@ function PrivateSpace() {
     setAddressName('');
   };
 
-  const publishToPublicSpace = async (address: Address) => {
-    if (!selectedSpace) {
-      alert('No space selected');
-      return;
-    }
-    try {
-      const { ops } = await preparePublish({ entity: address, publicSpace: selectedSpace });
-      const smartSessionClient = await getSmartSessionClient();
-      if (!smartSessionClient) {
-        throw new Error('Missing smartSessionClient');
-      }
-      const publishResult = await publishOps({
-        ops,
-        space: selectedSpace,
-        name: 'Publish Address',
-        walletClient: smartSessionClient,
-      });
-      console.log(publishResult, ops);
-      alert('Address published to public space');
-    } catch (error) {
-      console.error(error);
-      alert('Error publishing address to public space');
-    }
-  };
-
   return (
     <div className="min-h-screen bg-background">
       <div className="container mx-auto px-4 py-8 max-w-4xl">
@@ -153,8 +129,8 @@ function PrivateSpace() {
                         </div>
 
                         <Button
-                          onClick={() => publishToPublicSpace(address)}
-                          disabled={!selectedSpace}
+                          onClick={() => publishToPublicSpace({ entity: address, spaceId: selectedSpace })}
+                          disabled={!selectedSpace || isPending}
                           variant="outline"
                           size="sm"
                           className="w-full"

docs/docs/publishing-public-data.md

@@ -39,35 +39,24 @@ const { result } = publishOps({
 });
 ```
 
-Here is a full example flow:
+Additionally, we export a `usePublishToPublishSpace` hook which abstracts the above functionality into a single function call. This function internally uses React Query's useMutate hook, so you have access to the same state machine and callback functions.
 
 ```tsx
-import { publishOps, useHypergraphApp } from "@graphprotocol/hypergraph-react";
+import { usePublishToPublicSpace, useHypergraphApp } from "@graphprotocol/hypergraph-react";
 
 const MyComponent = ({ publicSpaceId }: { publicSpaceId: string }) => {
   const { getSmartSessionClient } = useHypergraphApp();
   const { data: events } = useQuery(Event, { mode: "private" });
+  const { mutate, isPending } = usePublishToPublicSpace();
 
-  const publishEvent = async (entity) => {
-    const smartSessionClient = await getSmartSessionClient();
-
-    const { ops } = preparePublish({
-      entity: entity,
-      publicSpace: publicSpaceId,
-    });
-
-    const result = await publishOps({
-      ops,
-      walletClient: smartSessionClient,
-      space: publicSpaceId,
-      name: "Create Event",
-    });
-  };
+  if (isPending) {
+    return <div>Publishing...</div>
+  }
 
   return (
     <div>
       {events.map((event) => (
-        <button key={event.id} onClick={() => publishEvent(event)}>
+        <button key={event.id} onClick={() => mutate({ entity: event, spaceId: publicSpaceId })}>
           {event.name}
         </button>
       ))}

packages/hypergraph-react/src/hooks/usePublishToSpace.ts

@@ -0,0 +1,41 @@
+import type { Entity } from '@graphprotocol/hypergraph';
+import { type UseMutationOptions, useMutation } from '@tanstack/react-query';
+import { useHypergraphApp } from '../HypergraphAppContext.js';
+import { preparePublish } from '../prepare-publish.js';
+import { publishOps } from '../publish-ops.js';
+import type { OmitStrict } from '../types.js';
+
+type Variables<S extends Entity.AnyNoContext> = {
+  entity: S;
+  spaceId: string;
+};
+
+type UsePublishToSpaceOptions = OmitStrict<
+  UseMutationOptions<Awaited<ReturnType<typeof publishOps>>, Error, Variables<Entity.AnyNoContext>, unknown>,
+  'mutationFn' | 'mutationKey'
+>;
+
+export function usePublishToPublicSpace(options: UsePublishToSpaceOptions = {}) {
+  const { getSmartSessionClient } = useHypergraphApp();
+
+  return useMutation({
+    ...options,
+    mutationFn: async ({ entity, spaceId }) => {
+      const { ops } = await preparePublish({
+        entity,
+        publicSpace: spaceId,
+      });
+      const smartSessionClient = await getSmartSessionClient();
+      if (!smartSessionClient) {
+        throw new Error('Missing smartSessionClient');
+      }
+
+      return await publishOps({
+        ops,
+        space: spaceId,
+        name: 'Published entity',
+        walletClient: smartSessionClient,
+      });
+    },
+  });
+}

packages/hypergraph-react/src/index.ts

@@ -22,6 +22,7 @@ export { useExternalSpaceInbox } from './hooks/useExternalSpaceInbox.js';
 export { useOwnAccountInbox } from './hooks/useOwnAccountInbox.js';
 export { useOwnSpaceInbox } from './hooks/useOwnSpaceInbox.js';
 export { usePublicAccountInboxes } from './hooks/usePublicAccountInboxes.js';
+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';

packages/hypergraph-react/src/types.ts

@@ -2,6 +2,8 @@ import type { Op } from '@graphprotocol/grc-20';
 import type { Entity } from '@graphprotocol/hypergraph';
 import type * as Schema from 'effect/Schema';
 
+export type OmitStrict<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
 export type EntityLike = {
   id: string;
   [key: string]: unknown;