feat(svelte): add first class reexecute to svelte

.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/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "start": "vite",
+    "start": "vite --force",
     "build": "vite build",
     "serve": "vite preview"
   },

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,
@@ -151,15 +155,20 @@ export function queryStore<
           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,
-              }))
+              fromStore(operation$),
+              switchMap(operation => {
+                return pipe(
+                  args.client.executeRequestOperation(operation),
+                  map(({ stale, data, error, extensions, operation }) => ({
+                    fetching: false,
+                    stale: !!stale,
+                    data,
+                    error,
+                    operation,
+                    extensions,
+                  }))
+                );
+              })
             ),
             fromValue({ fetching: false }),
           ]);
@@ -178,10 +187,21 @@ export function queryStore<
     ).unsubscribe;
   });
 
+  const reexecute = (context: Partial<OperationContext>) => {
+    const newContext = { ...context, ...args.context };
+    const operation = args.client.createRequestOperation(
+      'query',
+      request,
+      newContext
+    );
+    operation$.set(operation);
+  };
+
   return {
     ...derived(result$, (result, set) => {
       set(result);
     }),
     ...createPausable(isPaused$),
+    reexecute,
   };
 }