📄 tanstack/query/v4/docs/framework/svelte/examples/playground

=================================================================================================================================================================================================================================================================================================================================================================================================================

Code ExplorerCode

Interactive SandboxSandbox

src
- lib
- routes
  - +layout.svelte
  - +page.svelte
  - AddTodo.svelte
  - App.svelte
  - EditTodo.svelte
  - Todos.svelte
- app.css
- app.d.ts
- app.html
static
.gitignore
README.md
package.json
sandbox.config.json
svelte.config.js
tsconfig.json
vite.config.ts

svelte

<script lang="ts">
  import { useQueryClient } from '@tanstack/svelte-query'
  import Todos from './Todos.svelte'
  import EditTodo from './EditTodo.svelte'
  import AddTodo from './AddTodo.svelte'
  import { views, editingIndex } from '../lib/stores'

  const queryClient = useQueryClient()
</script>

<div>
  <div>
    <button on:click={() => queryClient.invalidateQueries()}>
      Force Refetch All
    </button>
  </div>
  <br />
  <hr />

  {#each $views as view}
    <div>
      <Todos initialFilter={view} />
      <br />
    </div>
  {/each}

  <button
    on:click={() => {
      views.set([...$views, ''])
    }}
  >
    Add Filter List
  </button>
  <hr />

  {#if $editingIndex !== null}
    <EditTodo />
    <hr />
  {/if}

  <AddTodo />
</div>


<script lang="ts">
  import { useQueryClient } from '@tanstack/svelte-query'
  import Todos from './Todos.svelte'
  import EditTodo from './EditTodo.svelte'
  import AddTodo from './AddTodo.svelte'
  import { views, editingIndex } from '../lib/stores'

  const queryClient = useQueryClient()
</script>

<div>
  <div>
    <button on:click={() => queryClient.invalidateQueries()}>
      Force Refetch All
    </button>
  </div>
  <br />
  <hr />

  {#each $views as view}
    <div>
      <Todos initialFilter={view} />
      <br />
    </div>
  {/each}

  <button
    on:click={() => {
      views.set([...$views, ''])
    }}
  >
    Add Filter List
  </button>
  <hr />

  {#if $editingIndex !== null}
    <EditTodo />
    <hr />
  {/if}

  <AddTodo />
</div>

Optimistic Updates in TypeScript

Star Wars

Partners Become a Partner

[###### Want to Skip the Docs?

Query.gg - The Official React Query Course
\

“If you’re serious about *really* understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg/?s=tanstack)

You are currently reading v4 docs. Redirect to latest version?

Latest Hide

scarf analytics