relay-tools / relay-hooks

Use Relay as React hooks
https://relay-tools.github.io/relay-hooks/docs/relay-hooks.html
MIT License
540 stars 56 forks source link

[Feature Request] Provide an option to useQuery and useFragment to skip store subscription #269

Closed Lalitha-Iyer closed 1 week ago

Lalitha-Iyer commented 3 months ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

I have been looking at improving the performance of our application. Our application is mostly read-heavy and has few use cases of mutations/updates/data invalidation. So store subscriptions are not really useful to us. By turning off subscriptions in a patch I measured significant wins w.r.t responsiveness of our application. Would it be useful to have an option in the useQuery and useFragment hooks to turn off subscriptions?

Here is the diff that solved my problem:

diff --git a/node_modules/relay-hooks/lib/es/QueryFetcher.js b/node_modules/relay-hooks/lib/es/QueryFetcher.js
index 29249a6..4fd67fd 100644
--- a/node_modules/relay-hooks/lib/es/QueryFetcher.js
+++ b/node_modules/relay-hooks/lib/es/QueryFetcher.js
@@ -112,7 +112,8 @@ function () {
       if (!_this.snapshot) {
         _this.snapshot = snapshot;

-        _this.subscribe(snapshot);
+        // Lalitha Iyer - Disable subscriptions
+       // _this.subscribe(snapshot);

         resolveUpdate(doUpdate);
       }
diff --git a/node_modules/relay-hooks/lib/es/useOssFragment.js b/node_modules/relay-hooks/lib/es/useOssFragment.js
index b822f43..ae44eb7 100644
--- a/node_modules/relay-hooks/lib/es/useOssFragment.js
+++ b/node_modules/relay-hooks/lib/es/useOssFragment.js
@@ -39,12 +39,13 @@ export function useOssFragment(fragmentNode, fragmentRef, suspense, name, subscr
   var idfragment = useMemo(function () {
     return getFragmentIdentifier(fragment, fragmentRef);
   }, [fragment, fragmentRef]);
-  useEffect(function () {
-    resolver.subscribe();
-    return function () {
-      resolver.unsubscribe();
-    };
-  }, [resolver, idfragment, environment]);
+  // Lalitha Iyer turn off subscription
+  // useEffect(function () {
+  //   resolver.subscribe();
+  //   return function () {
+  //     resolver.unsubscribe();
+  //   };
+  // }, [resolver, idfragment, environment]);
   resolver.subscribeResolve(subscribeResolve);
   resolver.resolve(environment, idfragment, fragment, fragmentRef);

This issue body was partially generated by patch-package.

morrys commented 3 months ago

Hi @Lalitha-Iyer, the request is very particular, because without the subscription an important relay feature is lost and risks showing inconsistent data within the application.

You say that you have few cases of mutations/updates and data invalidation, and in those few cases how do you manage the update of the various components?

Furthermore, subscription is also used when executing queries, for example one query takes the value of a field x = 10, and a second query asks for the same field and the server replies x = 11. this, through subscriptions, updates all the components that use x