Add restart function to useSubscription.

apollographql · Jul 5, 2024 · 834bd56 · 834bd56
1 parent cded2f3
commit 834bd56
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 20 deletions.
diff --git a/.api-reports/api-report-react.api.md b/.api-reports/api-report-react.api.md
@@ -2183,7 +2183,13 @@ export interface UseReadQueryResult<TData = unknown> {
 }
 
 // @public
-export function useSubscription<TData = any, TVariables extends OperationVariables = OperationVariables>(subscription: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: SubscriptionHookOptions<NoInfer_2<TData>, NoInfer_2<TVariables>>): SubscriptionResult<TData, TVariables>;
+export function useSubscription<TData = any, TVariables extends OperationVariables = OperationVariables>(subscription: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: SubscriptionHookOptions<NoInfer_2<TData>, NoInfer_2<TVariables>>): {
+    restart(): void;
+    loading: boolean;
+    data?: TData | undefined;
+    error?: ApolloError;
+    variables?: TVariables | undefined;
+};
 
 // @public (undocumented)
 export function useSuspenseQuery<TData, TVariables extends OperationVariables, TOptions extends Omit<SuspenseQueryHookOptions<TData>, "variables">>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: SuspenseQueryHookOptions<NoInfer_2<TData>, NoInfer_2<TVariables>> & TOptions): UseSuspenseQueryResult<TOptions["errorPolicy"] extends "ignore" | "all" ? TOptions["returnPartialData"] extends true ? DeepPartial<TData> | undefined : TData | undefined : TOptions["returnPartialData"] extends true ? TOptions["skip"] extends boolean ? DeepPartial<TData> | undefined : DeepPartial<TData> : TOptions["skip"] extends boolean ? TData | undefined : TData, TVariables>;

diff --git a/.api-reports/api-report-react_hooks.api.md b/.api-reports/api-report-react_hooks.api.md
@@ -2016,7 +2016,13 @@ export interface UseReadQueryResult<TData = unknown> {
 // Warning: (ae-forgotten-export) The symbol "SubscriptionHookOptions" needs to be exported by the entry point index.d.ts
 //
 // @public
-export function useSubscription<TData = any, TVariables extends OperationVariables = OperationVariables>(subscription: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: SubscriptionHookOptions<NoInfer_2<TData>, NoInfer_2<TVariables>>): SubscriptionResult<TData, TVariables>;
+export function useSubscription<TData = any, TVariables extends OperationVariables = OperationVariables>(subscription: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: SubscriptionHookOptions<NoInfer_2<TData>, NoInfer_2<TVariables>>): {
+    restart(): void;
+    loading: boolean;
+    data?: TData | undefined;
+    error?: ApolloError;
+    variables?: TVariables | undefined;
+};
 
 // Warning: (ae-forgotten-export) The symbol "SuspenseQueryHookOptions" needs to be exported by the entry point index.d.ts
 //

diff --git a/.api-reports/api-report.api.md b/.api-reports/api-report.api.md
@@ -2844,7 +2844,13 @@ export interface UseReadQueryResult<TData = unknown> {
 }
 
 // @public
-export function useSubscription<TData = any, TVariables extends OperationVariables = OperationVariables>(subscription: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: SubscriptionHookOptions<NoInfer_2<TData>, NoInfer_2<TVariables>>): SubscriptionResult<TData, TVariables>;
+export function useSubscription<TData = any, TVariables extends OperationVariables = OperationVariables>(subscription: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: SubscriptionHookOptions<NoInfer_2<TData>, NoInfer_2<TVariables>>): {
+    restart(): void;
+    loading: boolean;
+    data?: TData | undefined;
+    error?: ApolloError;
+    variables?: TVariables | undefined;
+};
 
 // @public (undocumented)
 export function useSuspenseQuery<TData, TVariables extends OperationVariables, TOptions extends Omit<SuspenseQueryHookOptions<TData>, "variables">>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: SuspenseQueryHookOptions<NoInfer_2<TData>, NoInfer_2<TVariables>> & TOptions): UseSuspenseQueryResult<TOptions["errorPolicy"] extends "ignore" | "all" ? TOptions["returnPartialData"] extends true ? DeepPartial<TData> | undefined : TData | undefined : TOptions["returnPartialData"] extends true ? TOptions["skip"] extends boolean ? DeepPartial<TData> | undefined : DeepPartial<TData> : TOptions["skip"] extends boolean ? TData | undefined : TData, TVariables>;

diff --git a/.changeset/clever-bikes-admire.md b/.changeset/clever-bikes-admire.md
@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Add `restart` function to `useSubscription`.
diff --git a/.size-limits.json b/.size-limits.json
@@ -1,4 +1,4 @@
 {
-  "dist/apollo-client.min.cjs": 39825,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 32851
+  "dist/apollo-client.min.cjs": 39865,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 32852
 }
diff --git a/src/react/hooks/useSubscription.ts b/src/react/hooks/useSubscription.ts
@@ -21,6 +21,7 @@ import { Observable } from "../../core/index.js";
 import { useApolloClient } from "./useApolloClient.js";
 import { useDeepMemo } from "./internal/useDeepMemo.js";
 import { useSyncExternalStore } from "./useSyncExternalStore.js";
+import { useIsomorphicLayoutEffect } from "./internal/useIsomorphicLayoutEffect.js";
 
 /**
  * > Refer to the [Subscriptions](https://www.apollographql.com/docs/react/data/subscriptions/) section for a more in-depth overview of `useSubscription`.
@@ -146,6 +147,14 @@ export function useSubscription<
     )
   );
 
+  const recreate = () =>
+    createSubscription(client, subscription, variables, fetchPolicy, context);
+
+  const recreateRef = React.useRef(recreate);
+  useIsomorphicLayoutEffect(() => {
+    recreateRef.current = recreate;
+  });
+
   if (skip) {
     if (observable) {
       setObservable((observable = null));
@@ -160,15 +169,7 @@ export function useSubscription<
         !!shouldResubscribe(options!)
       : shouldResubscribe) !== false)
   ) {
-    setObservable(
-      (observable = createSubscription(
-        client,
-        subscription,
-        variables,
-        fetchPolicy,
-        context
-      ))
-    );
+    setObservable((observable = recreate()));
   }
 
   const optionsRef = React.useRef(options);
@@ -186,7 +187,7 @@ export function useSubscription<
     [skip, variables]
   );
 
-  return useSyncExternalStore<SubscriptionResult<TData, TVariables>>(
+  const ret = useSyncExternalStore<SubscriptionResult<TData, TVariables>>(
     React.useCallback(
       (update) => {
         if (!observable) {
@@ -262,6 +263,19 @@ export function useSubscription<
     ),
     () => (observable && !skip ? observable.__.result : fallbackResult)
   );
+  return React.useMemo(
+    () => ({
+      ...ret,
+      restart() {
+        invariant(
+          !optionsRef.current.skip,
+          "A subscription that is skipped cannot be restarted."
+        );
+        setObservable(recreateRef.current());
+      },
+    }),
+    [ret]
+  );
 }
 
 function createSubscription<
@@ -297,11 +311,11 @@ function createSubscription<
       // to get around strict mode
       if (!observable) {
         observable = client.subscribe({
-        query,
-        variables,
-        fetchPolicy,
-        context,
-      });
+          query,
+          variables,
+          fetchPolicy,
+          context,
+        });
       }
       const sub = observable.subscribe(observer);
       return () => sub.unsubscribe();