feat(svelte): add first class reexecute to svelte (#3472)

Co-authored-by: Phil Pluckthun <phil@kitten.sh>

Author: JoviDeCroock

.changeset/seven-toys-applaud.md

@@ -0,0 +1,5 @@
+---
+'@urql/svelte': minor
+---
+
+Add back the `reexecute` function

docs/basics/svelte.md

@@ -362,9 +362,7 @@ Sometimes we'll need to arbitrarly reexecute a query to check for new data on th
   });
 
   function refresh() {
-    queryStore({
-      client,
-      query,
+    todos.reexecute({
       requestPolicy: 'network-only'
     });
   }

examples/with-svelte/src/PokemonList.svelte

@@ -19,6 +19,10 @@
   function nextPage() {
     skip = skip + 10;
   }
+
+  function reexcute() {
+    pokemons.reexecute({ requestPolicy: 'network-only' })
+  }
 </script>
 
 <div>
@@ -34,4 +38,5 @@
     </ul>
   {/if}
   <button on:click={nextPage}>Next Page</button>
+  <button on:click={reexcute}>Reexec</button>
 </div>

packages/svelte-urql/src/queryStore.ts

@@ -119,7 +119,8 @@ export function queryStore<
   Variables extends AnyVariables = AnyVariables,
 >(
   args: QueryArgs<Data, Variables>
-): OperationResultStore<Data, Variables> & Pausable {
+): OperationResultStore<Data, Variables> &
+  Pausable & { reexecute: (context: Partial<OperationContext>) => void } {
   const request = createRequest(args.query, args.variables as Variables);
 
   const context: Partial<OperationContext> = {
@@ -132,6 +133,9 @@ export function queryStore<
     request,
     context
   );
+
+  const operation$ = writable(operation);
+
   const initialState: OperationResultState<Data, Variables> = {
     ...initialResult,
     operation,
@@ -148,21 +152,26 @@ export function queryStore<
             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 }),
-          ]);
+          return pipe(
+            fromStore(operation$),
+            switchMap(operation => {
+              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(
@@ -178,10 +187,22 @@ export function queryStore<
     ).unsubscribe;
   });
 
+  const reexecute = (context: Partial<OperationContext>) => {
+    const newContext = { ...context, ...args.context };
+    const operation = args.client.createRequestOperation(
+      'query',
+      request,
+      newContext
+    );
+    isPaused$.set(false);
+    operation$.set(operation);
+  };
+
   return {
     ...derived(result$, (result, set) => {
       set(result);
     }),
     ...createPausable(isPaused$),
+    reexecute,
   };
 }