fix(svelte): Move Client subscription to writable start (#3331)

urql-graphql · Jul 25, 2023 · a0741aa · a0741aa
1 parent 45d686e
commit a0741aa
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 82 deletions.
diff --git a/.changeset/many-rabbits-wave.md b/.changeset/many-rabbits-wave.md
@@ -0,0 +1,5 @@
+---
+'@urql/svelte': patch
+---
+
+Fix `queryStore` and `subscriptionStore` not subscribing when `writable` calls its `StartStopNotifier`. This caused both stores to be inactive and become unresponsive when they’ve been unsubscribed from once, as they wouldn’t be able to restart their subscriptions to the `Client`.
diff --git a/packages/svelte-urql/src/queryStore.ts b/packages/svelte-urql/src/queryStore.ts
@@ -138,47 +138,47 @@ export function queryStore<
     ...initialResult,
     operation,
   };
-  const result$ = writable(initialState, () => {
-    return subscription.unsubscribe;
-  });
+
   const isPaused$ = writable(!!args.pause);
 
-  const subscription = pipe(
-    fromStore(isPaused$),
-    switchMap(
-      (isPaused): Source<Partial<OperationResultState<Data, Variables>>> => {
-        if (isPaused) {
-          return never as any;
-        }
+  const result$ = writable(initialState, () => {
+    return pipe(
+      fromStore(isPaused$),
+      switchMap(
+        (isPaused): Source<Partial<OperationResultState<Data, Variables>>> => {
+          if (isPaused) {
+            return never as any;
+          }
 
-        return concat<Partial<OperationResultState<Data, Variables>>>([
-          fromValue({ fetching: true, stale: false }),
-          pipe(
-            args.client.executeRequestOperation(operation),
-            map(({ stale, data, error, extensions, operation }) => ({
-              fetching: false,
-              stale: !!stale,
-              data,
-              error,
-              operation,
-              extensions,
-            }))
-          ),
-          fromValue({ fetching: false }),
-        ]);
-      }
-    ),
-    scan(
-      (result: OperationResultState<Data, Variables>, partial) => ({
-        ...result,
-        ...partial,
-      }),
-      initialState
-    ),
-    subscribe(result => {
-      result$.set(result);
-    })
-  );
+          return concat<Partial<OperationResultState<Data, Variables>>>([
+            fromValue({ fetching: true, stale: false }),
+            pipe(
+              args.client.executeRequestOperation(operation),
+              map(({ stale, data, error, extensions, operation }) => ({
+                fetching: false,
+                stale: !!stale,
+                data,
+                error,
+                operation,
+                extensions,
+              }))
+            ),
+            fromValue({ fetching: false }),
+          ]);
+        }
+      ),
+      scan(
+        (result: OperationResultState<Data, Variables>, partial) => ({
+          ...result,
+          ...partial,
+        }),
+        initialState
+      ),
+      subscribe(result => {
+        result$.set(result);
+      })
+    ).unsubscribe;
+  });
 
   return {
     ...derived(result$, (result, set) => {

diff --git a/packages/svelte-urql/src/subscriptionStore.ts b/packages/svelte-urql/src/subscriptionStore.ts
@@ -154,53 +154,53 @@ export function subscriptionStore<
     operation,
     fetching: true,
   };
-  const result$ = writable(initialState, () => {
-    return subscription.unsubscribe;
-  });
+
   const isPaused$ = writable(!!args.pause);
 
-  const subscription = pipe(
-    fromStore(isPaused$),
-    switchMap(
-      (isPaused): Source<Partial<OperationResultState<Data, Variables>>> => {
-        if (isPaused) {
-          return never as any;
-        }
+  const result$ = writable(initialState, () => {
+    return pipe(
+      fromStore(isPaused$),
+      switchMap(
+        (isPaused): Source<Partial<OperationResultState<Data, Variables>>> => {
+          if (isPaused) {
+            return never as any;
+          }
 
-        return concat<Partial<OperationResultState<Data, Variables>>>([
-          fromValue({ fetching: true, stale: false }),
-          pipe(
-            args.client.executeRequestOperation(operation),
-            map(({ stale, data, error, extensions, operation }) => ({
-              fetching: true,
-              stale: !!stale,
-              data,
-              error,
-              operation,
-              extensions,
-            }))
-          ),
-          fromValue({ fetching: false }),
-        ]);
-      }
-    ),
-    scan((result: OperationResultState<Result, Variables>, partial) => {
-      const data =
-        partial.data !== undefined
-          ? typeof handler === 'function'
-            ? handler(result.data, partial.data)
-            : partial.data
-          : result.data;
-      return {
-        ...result,
-        ...partial,
-        data,
-      } as OperationResultState<Result, Variables>;
-    }, initialState),
-    subscribe(result => {
-      result$.set(result);
-    })
-  );
+          return concat<Partial<OperationResultState<Data, Variables>>>([
+            fromValue({ fetching: true, stale: false }),
+            pipe(
+              args.client.executeRequestOperation(operation),
+              map(({ stale, data, error, extensions, operation }) => ({
+                fetching: true,
+                stale: !!stale,
+                data,
+                error,
+                operation,
+                extensions,
+              }))
+            ),
+            fromValue({ fetching: false }),
+          ]);
+        }
+      ),
+      scan((result: OperationResultState<Result, Variables>, partial) => {
+        const data =
+          partial.data !== undefined
+            ? typeof handler === 'function'
+              ? handler(result.data, partial.data)
+              : partial.data
+            : result.data;
+        return {
+          ...result,
+          ...partial,
+          data,
+        } as OperationResultState<Result, Variables>;
+      }, initialState),
+      subscribe(result => {
+        result$.set(result);
+      })
+    ).unsubscribe;
+  });
 
   return {
     ...derived(result$, (result, set) => {