feat(queries): add setEnabled function to queries and infinite queries (#33)

* feat(queries): add setEnabled function to queries and infinite queries

* feat: add updateOptions to queries and infinite queries

Author: SomaticIT

docs/src/pages/guides/infinite-queries.md

@@ -141,3 +141,48 @@ queryClient.setQueryData('projects', data => ({
   pageParams: data.pageParams.slice(1),
 }))
 ```
+
+## What if I want to enable/disable infinite queries reactively?
+
+Sometimes you may want to enable or disable a Query by using a svelte [reactive statement](https://svelte.dev/tutorial/reactive-statements). In this case, you can use the `setEnabled` function:
+
+```markdown
+<script>
+  import { useInfiniteQuery } from '@sveltestack/svelte-query'
+
+  export let isEnabled = false;
+
+  const queryResult = useInfiniteQuery('projects', fetchProjects, {
+    getNextPageParam: lastGroup => lastGroup.nextId || undefined,
+  })
+
+  $: queryResult.setEnabled(isEnabled)
+</script>
+
+{#if $queryResult.status === 'idle'}
+  <button on:click={() => isEnabled = true}>Enable</button>
+{#if $queryResult.status === 'loading'}
+  Loading...
+{:else if $queryResult.status === 'error'}
+  <span>Error: {$queryResult.error.message}</span>
+{:else}
+  <div>
+    {#each $queryResult.data.pages as page}
+      {#each page.data as project}
+        <p>{project.name}</p>
+      {/each}
+    {/each}
+  </div>
+  <div>
+    <button
+      on:click={() => $queryResult.fetchNextPage()}
+      disabled={!$queryResult.hasNextPage || $queryResult.isFetchingNextPage}>
+      {#if $queryResult.isFetching}
+        Loading more...
+      {:else if $queryResult.hasNextPage}
+        Load More
+      {:else}Nothing more to load{/if}
+    </button>
+  </div>
+{/if}
+```

docs/src/pages/guides/queries.md

@@ -86,3 +86,32 @@ If booleans aren't your thing, you can always use the `status` state as well:
   </ul>
 {/if}
 ```
+
+## What if I want to enable/disable queries reactively?
+
+Sometimes you may want to enable or disable a Query by using a svelte [reactive statement](https://svelte.dev/tutorial/reactive-statements). In this case, you can use the `setEnabled` function:
+
+```markdown
+<script>
+  import { useQuery } from '@sveltestack/svelte-query';
+
+  export let isEnabled = false;
+
+  const queryResult = useQuery('todos', fetchTodos)
+  $: queryResult.setEnabled(isEnabled)
+</script>
+
+{#if $queryResult.isIdle}
+  <button on:click={() => isEnabled = true}>Enable</button>
+{:else if $queryResult.isLoading}
+  <span>Loading...</span>
+{:else if $queryResult.isError}
+  <span>Error: {$queryResult.error.message}</span>
+{:else}
+  <ul>
+    {#each $queryResult.data as todo}
+      <li>{todo.title}</li>
+    {/each}
+  </ul>
+{/if}
+```

src/infiniteQuery/useInfiniteQuery.ts

@@ -82,5 +82,13 @@ export default function useInfiniteQuery<TQueryFnData, TError, TData = TQueryFnD
         }
     }
 
-    return { subscribe, setOptions }
+    function updateOptions(options: Partial<UseInfiniteQueryOptions<TQueryFnData, TError, TData>>): void {
+        observer.setOptions({ ...observer.options, ...options })
+    }
+
+    function setEnabled(enabled: boolean): void {
+        updateOptions({ enabled })
+    }
+
+    return { subscribe, setOptions, updateOptions, setEnabled }
 }

src/query/useQuery.ts

@@ -78,5 +78,13 @@ export default function useQuery<TQueryFnData = unknown, TError = unknown, TData
         }
     }
 
-    return { subscribe, setOptions }
+    function updateOptions(options: Partial<UseQueryOptions<TQueryFnData, TError, TData>>): void {
+        observer.setOptions({ ...observer.options, ...options })
+    }
+
+    function setEnabled(enabled: boolean): void {
+        updateOptions({ enabled })
+    }
+
+    return { subscribe, setOptions, updateOptions, setEnabled }
 }

src/types.ts

@@ -16,11 +16,13 @@ export interface UseQueryStoreResult<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey
   > extends Readable<UseQueryResult<TData, TError>> {
+  setEnabled(enabled: boolean): void
   setOptions: {
     (options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>): any;
     (queryKey: TQueryKey, options?: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>): any;
     (queryKey: TQueryKey, queryFn: QueryFunction<TQueryFnData, TQueryKey>, options?: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>): any;
   }
+  updateOptions(options: Partial<UseQueryOptions<TQueryFnData, TError, TData>>): void
 }
 
 // use options.infinite = true for infinite Query
@@ -46,11 +48,13 @@ export interface UseInfiniteQueryStoreResult<
   TData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey
   > extends Readable<UseInfiniteQueryResult<TData, TError>> {
+  setEnabled(enabled: boolean): void
   setOptions: {
     (options: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>): any;
     (queryKey: TQueryKey, options?: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>): any;
     (queryKey: TQueryKey, queryFn: QueryFunction<TQueryFnData, TQueryKey>, options?: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>): any;
   }
+  updateOptions(options: Partial<UseInfiniteQueryOptions<TQueryFnData, TError, TData>>): void
 }
 
 export interface UseInfiniteQueryOptions<