Quick Start

This example very briefly illustrates the 3 core concepts of Svelte Query:

• Queries
• Mutations
• Query Invalidation

1 <script>
2   //App.svelte
3   import { QueryClient, QueryClientProvider } from '@sveltestack/svelte-query'
4   import Todos from 'Todos.svelte'
5 
6   // Create a client
7   const queryClient = new QueryClient()
8 
9 </script>
10 
11 <QueryClientProvider client={queryClient}>
12   <Todos />
13 </QueryClientProvider>

1 <script>
2   // Todos.svelte
3   import { useQuery, useMutation, useQueryClient } from '@sveltestack/svelte-query'
4   import { getTodos, postTodo } from '../my-api'
5   // Access the client
6   const queryClient = useQueryClient()
7 
8   // Queries
9   const queryResult = useQuery('todos', getTodos)
10 
11   // Mutations
12   const mutation = useMutation(postTodo, {
13     onSuccess: () => {
14       // Invalidate and refetch
15       queryClient.invalidateQueries('todos')
16     },
17   })
18 </script>
19 
20 <div>
21   <ul>
22     {#each $queryResult.data as todo}
23       <li>{todo.title}</li>
24     {/each}
25   </ul>
26 
27   <button
28     on:click={() => {
29       $mutation.mutate({ id: Date.now(), title: 'Do Laundry' })
30     }}>
31     Add Todo
32   </button>
33 </div>

These three concepts make up most of the core functionality of Svelte Query. The next sections of the documentation will go over each of these core concepts in great detail.