improve publish data docs

Author: nikgraf

docs/docs/publishing-public-data.md

@@ -2,6 +2,13 @@
 
 Once you want to share your data with the world you need to publish it. This is done by creating the necessary `Opertations` (Ops) and then publishing them.
 
+There are two functions to help you with this:
+
+- `preparePublish` - creates the necessary `Operations` to publish the data
+- `publishOps` - publishes the `Operations` to the public space
+
+You can generate the Ops for multiple entities and publish them in one go by concatenating the `ops` arrays.
+
 ## Prepare Publish
 
 Based on entity Ids, the source space and the target space this function calculates the necessary `Operations` to publish the data.
@@ -17,42 +24,32 @@ const { ops } = preparePublish({
 
 The entity can come from a `useCreateEntity` result or from a `useQuery` result e.g.
 
-```tsx
-const MyComponent = () => {
-  const { data: events } = useQuery(Event, { mode: "private" });
+## Publish
 
-  const createOpsForPublishing = async (event) => {
-    const { ops } = preparePublish({
-      entity: event,
-      publicSpace: "public-space-id",
-    });
-  };
+The `publishOps` function is used to publish the changes to the public space.
 
-  return (
-    <div>
-      {events.map((event) => (
-        <button key={event.id} onClick={() => createOpsForPublishing(event)}>
-          {event.name}
-        </button>
-      ))}
-    </div>
-  );
-};
-```
+```tsx
+import { publishOps } from "@graphprotocol/hypergraph-react";
 
-## Publish
+const { result } = publishOps({
+  ops,
+  walletClient: smartSessionClient,
+  space: publicSpaceId,
+  name: "Create Event", // description which can be any string
+});
+```
 
-The `publishOps` function is used to publish the changes to the public space. Here is a full example flow:
+Here is a full example flow:
 
 ```tsx
-import { publishOps } from "@graphprotocol/hypergraph-react";
+import { publishOps, useHypergraphApp } from "@graphprotocol/hypergraph-react";
 
-const MyComponent = () => {
+const MyComponent = ({ publicSpaceId }: { publicSpaceId: string }) => {
   const { getSmartSessionClient } = useHypergraphApp();
+  const { data: events } = useQuery(Event, { mode: "private" });
 
-  const publishChanges = async () => {
+  const publishEvent = async (entity) => {
     const smartSessionClient = await getSmartSessionClient();
-    const publicSpaceId = "public-space-id";
 
     const { ops } = preparePublish({
       entity: entity,
@@ -63,9 +60,19 @@ const MyComponent = () => {
       ops,
       walletClient: smartSessionClient,
       space: publicSpaceId,
-      name: "Create Job Offers",
+      name: "Create Event",
     });
   };
+
+  return (
+    <div>
+      {events.map((event) => (
+        <button key={event.id} onClick={() => publishEvent(event)}>
+          {event.name}
+        </button>
+      ))}
+    </div>
+  );
 };
 ```