feat: useQuerySync hook

examples/react/react-app/src/App.tsx

@@ -1,20 +1,31 @@
-import { useComponentValue } from "@dojoengine/react";
+import { useComponentValue, useQuerySync } from "@dojoengine/react";
 import { Entity } from "@dojoengine/recs";
 import { useEffect, useState } from "react";
 import "./App.css";
 import { Direction } from "./utils";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
 import { useDojo } from "./dojo/useDojo";
+import { getSyncEntities } from "@dojoengine/state";
+import { Subscription } from "@dojoengine/torii-client";
 
 function App() {
     const {
         setup: {
             systemCalls: { spawn, move },
             clientComponents: { Position, Moves, DirectionsAvailable },
+            toriiClient,
+            contractComponents,
         },
         account,
     } = useDojo();
 
+    useQuerySync(
+        toriiClient,
+        contractComponents as any,
+        ["Moves", "Position", "DirectionsAvailable"],
+        [account?.account.address.toString()]
+    );
+
     const [clipboardStatus, setClipboardStatus] = useState({
         message: "",
         isError: false,

examples/react/react-app/src/dojo/generated/setup.ts

@@ -27,13 +27,6 @@ export async function setup({ ...config }: DojoConfig) {
     const clientComponents = createClientComponents({ contractComponents });
 
     // fetch all existing entities from torii
-    const sync = await getSyncEntities(toriiClient, contractComponents as any, {
-        Keys: {
-            keys: ["player"],
-            models: ["Moves"],
-            pattern_matching: "VariableLen",
-        },
-    });
 
     // create dojo provider
     const dojoProvider = new DojoProvider(config.manifest, config.rpcUrl);
@@ -83,6 +76,6 @@ export async function setup({ ...config }: DojoConfig) {
         dojoProvider,
         burnerManager,
         toriiClient,
-        sync,
+        // sync,
     };
 }

packages/react/src/index.ts

@@ -3,4 +3,5 @@ export * from "./usePromise";
 export * from "./usePromise";
 export * from "./useEntityQuery";
 export * from "./utils";
+export * from "./useQuerySync";
 // export * from "./useFindEntity";

packages/react/src/useQuerySync.ts

@@ -0,0 +1,51 @@
+import { Component, Metadata, Schema } from "@dojoengine/recs";
+import { useCallback, useEffect } from "react";
+import {
+    Client,
+    PatternMatching,
+    Subscription,
+} from "@dojoengine/torii-client";
+import { getSyncEntities } from "@dojoengine/state";
+
+export function useQuerySync<S extends Schema>(
+    toriiClient: Client,
+    components: Component<S, Metadata, undefined>[],
+    models: string[],
+    keys: string[],
+    patternMatching: PatternMatching = "VariableLen"
+) {
+    const setupSync = useCallback(async () => {
+        try {
+            const sync = await getSyncEntities(toriiClient, components, {
+                Keys: {
+                    keys,
+                    models,
+                    pattern_matching: patternMatching,
+                },
+            });
+
+            return sync;
+        } catch (error) {
+            throw error;
+        }
+    }, [toriiClient, components, keys, patternMatching]);
+
+    useEffect(() => {
+        let unsubscribe: Subscription | undefined;
+
+        setupSync()
+            .then((sync) => {
+                unsubscribe = sync;
+            })
+            .catch((error) => {
+                console.error("Error setting up entity sync:", error);
+            });
+
+        return () => {
+            if (unsubscribe) {
+                unsubscribe.cancel();
+                console.log("Sync unsubscribed");
+            }
+        };
+    }, [setupSync]);
+}