Disabling/Pausing Queries

If you ever want to disable a query from automatically running, you can use the enabled = false option.

When enabled is false:

• If the query has cached data
  • The query will be initialized in the status === 'success' or isSuccess state.
• If the query does not have cached data
  • The query will start in the status === 'idle' or isIdle state.
• The query will not automatically fetch on mount.
• The query will not automatically refetch in the background when new instances mount or new instances appearing
• The query will ignore query client invalidateQueries and refetchQueries calls that would normally result in the query refetching.
• refetch can be used to manually trigger the query to fetch.

1 <script>
2   const queryResult = useQuery('todos', fetchTodoList, {
3     enabled: false,
4   })
5 </script>
6 
7 {#if $queryResult.isIdle}
8   <span>Not ready....</span>
9 {#if $queryResult.isLoading}
10   <span>Loading...</span>
11 {:else if $queryResult.isError}
12   <span>Error: {$queryResult.error.message}</span>
13 {:else}
14   {#if $queryResult.isFetching}
15     <div>Refreshing...</div>
16   {/if}
17   {#each $queryResult.data as todo}
18     <Todo {todo} />
19   {/each}
20 {/if}