Bind observableQuery subscribeToMore and remove need for useCallback …

…in suspense hooks
apollographql · Jul 5, 2024 · 141a0e1 · 141a0e1
1 parent 92dcc18
commit 141a0e1
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 21 deletions.
diff --git a/src/core/ObservableQuery.ts b/src/core/ObservableQuery.ts
@@ -163,6 +163,8 @@ export class ObservableQuery<
     this.waitForOwnResult = skipCacheDataFor(options.fetchPolicy);
     this.isTornDown = false;
 
+    this.subscribeToMore = this.subscribeToMore.bind(this);
+
     const {
       watchQuery: { fetchPolicy: defaultFetchPolicy = "cache-first" } = {},
     } = queryManager.defaultOptions;

diff --git a/src/react/hooks/useBackgroundQuery.ts b/src/react/hooks/useBackgroundQuery.ts
@@ -285,16 +285,14 @@ function _useBackgroundQuery<
     [queryRef]
   );
 
-  const subscribeToMore: SubscribeToMoreFunction<TData, TVariables> =
-    React.useCallback(
-      (options) => queryRef.observable.subscribeToMore(options),
-      [queryRef]
-    );
-
   React.useEffect(() => queryRef.softRetain(), [queryRef]);
 
   return [
     didFetchResult.current ? wrappedQueryRef : void 0,
-    { fetchMore, refetch, subscribeToMore },
+    {
+      fetchMore,
+      refetch,
+      subscribeToMore: queryRef.observable.subscribeToMore,
+    },
   ];
 }
diff --git a/src/react/hooks/useQueryRefHandlers.ts b/src/react/hooks/useQueryRefHandlers.ts
@@ -118,11 +118,9 @@ function _useQueryRefHandlers<
     [internalQueryRef]
   );
 
-  const subscribeToMore: SubscribeToMoreFunction<TData, TVariables> =
-    React.useCallback(
-      (options) => internalQueryRef.observable.subscribeToMore(options),
-      [internalQueryRef]
-    );
-
-  return { refetch, fetchMore, subscribeToMore };
+  return {
+    refetch,
+    fetchMore,
+    subscribeToMore: internalQueryRef.observable.subscribeToMore,
+  };
 }
diff --git a/src/react/hooks/useSuspenseQuery.ts b/src/react/hooks/useSuspenseQuery.ts
@@ -274,13 +274,7 @@ function _useSuspenseQuery<
     [queryRef]
   );
 
-  const subscribeToMore: SubscribeToMoreFunction<
-    TData | undefined,
-    TVariables
-  > = React.useCallback(
-    (options) => queryRef.observable.subscribeToMore(options),
-    [queryRef]
-  );
+  const subscribeToMore = queryRef.observable.subscribeToMore;
 
   return React.useMemo<
     UseSuspenseQueryResult<TData | undefined, TVariables>