Queries

Query Basics

A query is a declarative dependency on an asynchronous source of data that is tied to a unique key. A query can be used with any Promise based method (including GET and POST methods) to fetch data from a server. If your method modifies data on the server, we recommend using Mutations instead.

To subscribe to a query in your components or custom hooks, call the useQuery hook with at least:

• A unique key for the query
• A function that returns a promise that:
  • Resolves the data, or
  • Throws an error

1 import { useQuery } from '@sveltestack/svelte-query'
2 
3 const info = useQuery('todos', fetchTodoList)

The unique key you provide is used internally for refetching, caching, and sharing your queries throughout your application.

The query results returned by useQuery contains all of the information about the query that you'll need for templating and any other usage of the data:

 const result = useQuery('todos', fetchTodoList)

The result object contains a few very important states you'll need to be aware of to be productive. A query can only be in one of the following states at any given moment:

• isLoading or status === 'loading' - The query has no data and is currently fetching
• isError or status === 'error' - The query encountered an error
• isSuccess or status === 'success' - The query was successful and data is available
• isIdle or status === 'idle' - The query is currently disabled (you'll learn more about this in a bit)

Beyond those primary states, more information is available depending on the state the query:

• error - If the query is in an isError state, the error is available via the error property.
• data - If the query is in a success state, the data is available via the data property.
• isFetching - In any state, if the query is fetching at any time (including background refetching) isFetching will be true.

For most queries, it's usually sufficient to check for the isLoading state, then the isError state, then finally, assume that the data is available and render the successful state:

1 <script>
2   import { useQuery } from '@sveltestack/svelte-query';
3 
4   const queryResult = useQuery('todos', fetchTodos)
5 </script>
6 
7 {#if $queryResult.isLoading}
8   <span>Loading...</span>
9 {:else if $queryResult.isError}
10   <span>Error: {$queryResult.error.message}</span>
11 {:else}
12   <ul>
13     {#each $queryResult.data as todo}
14       <li>{todo.title}</li>
15     {/each}
16   </ul>
17 {/if}

If booleans aren't your thing, you can always use the status state as well:

1 <script>
2   import { useQuery } from '@sveltestack/svelte-query';
3 
4   const queryResult = useQuery('todos', fetchTodos)
5 </script>
6 
7 {#if $queryResult.status === 'loading'}
8   <span>Loading...</span>
9 {:else if $queryResult.status === 'error'}
10   <span>Error: {$queryResult.error.message}</span>
11 {:else}
12   <ul>
13     {#each $queryResult.data as todo}
14       <li>{todo.title}</li>
15     {/each}
16   </ul>
17 {/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. In this case, you can use the setEnabled function:

1 <script>
2   import { useQuery } from '@sveltestack/svelte-query';
3 
4   export let isEnabled = false;
5 
6   const queryResult = useQuery('todos', fetchTodos)
7   $: queryResult.setEnabled(isEnabled)
8 </script>
9 
10 {#if $queryResult.isIdle}
11   <button on:click={() => isEnabled = true}>Enable</button>
12 {:else if $queryResult.isLoading}
13   <span>Loading...</span>
14 {:else if $queryResult.isError}
15   <span>Error: {$queryResult.error.message}</span>
16 {:else}
17   <ul>
18     {#each $queryResult.data as todo}
19       <li>{todo.title}</li>
20     {/each}
21   </ul>
22 {/if}