snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)

2026-09-16 01:13:08 +05:00
commit 3a013ccdfe
3570 changed files with 490194 additions and 0 deletions
--- a/examples/svelte/auto-refetching/.gitignore
+++ b/examples/svelte/auto-refetching/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+!lib/
--- a/examples/svelte/auto-refetching/README.md
+++ b/examples/svelte/auto-refetching/README.md
@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn` or `bun install`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
--- a/examples/svelte/auto-refetching/package.json
+++ b/examples/svelte/auto-refetching/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@tanstack/query-example-svelte-auto-refetching",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/svelte-query": "^6.1.48",
+    "@tanstack/svelte-query-devtools": "^6.1.48"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@sveltejs/kit": "^2.57.1",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "svelte": "^5.39.3",
+    "svelte-check": "^4.3.1",
+    "typescript": "5.8.3",
+    "vite": "^6.4.1"
+  }
+}
--- a/examples/svelte/auto-refetching/src/app.css
+++ b/examples/svelte/auto-refetching/src/app.css
@@ -0,0 +1,81 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.card {
+  padding: 2em;
+}
+
+main {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
--- a/examples/svelte/auto-refetching/src/app.d.ts
+++ b/examples/svelte/auto-refetching/src/app.d.ts
@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
+}
+
+export {}
--- a/examples/svelte/auto-refetching/src/app.html
+++ b/examples/svelte/auto-refetching/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
--- a/examples/svelte/auto-refetching/src/routes/+layout.svelte
+++ b/examples/svelte/auto-refetching/src/routes/+layout.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import '../app.css'
+  import { browser } from '$app/environment'
+  import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
+  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
+
+  const { children } = $props()
+
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        enabled: browser,
+      },
+    },
+  })
+</script>
+
+<QueryClientProvider client={queryClient}>
+  <main>
+    {@render children()}
+  </main>
+  <SvelteQueryDevtools />
+</QueryClientProvider>
--- a/examples/svelte/auto-refetching/src/routes/+page.svelte
+++ b/examples/svelte/auto-refetching/src/routes/+page.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+  import {
+    useQueryClient,
+    createQuery,
+    createMutation,
+  } from '@tanstack/svelte-query'
+
+  let intervalMs = $state(1000)
+  let value = $state<string>('')
+
+  const client = useQueryClient()
+
+  const endpoint = '/api/data'
+
+  const todos = createQuery<{ items: string[] }>(() => ({
+    queryKey: ['refetch'],
+    queryFn: async () => await fetch(endpoint).then((r) => r.json()),
+    // Refetch the data every second
+    refetchInterval: intervalMs,
+  }))
+
+  const addMutation = createMutation(() => ({
+    mutationFn: (value: string) =>
+      fetch(`${endpoint}?add=${encodeURIComponent(value)}`).then((r) =>
+        r.json(),
+      ),
+    onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
+  }))
+
+  const clearMutation = createMutation(() => ({
+    mutationFn: () => fetch(`${endpoint}?clear=1`).then((r) => r.json()),
+    onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
+  }))
+</script>
+
+<h1>Auto Refetch with stale-time set to {intervalMs}ms</h1>
+
+<p>
+  This example is best experienced on your own machine, where you can open
+  multiple tabs to the same localhost server and see your changes propagate
+  between the two.
+</p>
+
+<label>
+  Query Interval speed (ms):{' '}
+  <div class="flex">
+    <input bind:value={intervalMs} type="number" step="100" />{' '}
+
+    <span
+      style="display:inline-block; 
+          margin-left:.5rem;
+          width:.75rem;
+          height:.75rem; 
+          background: {todos.isFetching ? 'green' : 'transparent'};
+          transition: {!todos.isFetching ? 'all .3s ease' : 'none'};
+          border-radius: 100%;
+          transform: scale(1.5)"
+    ></span>
+  </div>
+</label>
+<h2>Todo List</h2>
+<form
+  onsubmit={(e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    addMutation.mutate(value, {
+      onSuccess: () => (value = ''),
+    })
+  }}
+>
+  <input placeholder="enter something" bind:value />
+</form>
+
+{#if todos.isPending}
+  Loading...
+{/if}
+{#if todos.error}
+  An error has occurred:
+  {todos.error.message}
+{/if}
+{#if todos.isSuccess}
+  <ul>
+    {#each todos.data.items as item}
+      <li>{item}</li>
+    {/each}
+  </ul>
+  <div>
+    <button onclick={() => clearMutation.mutate(undefined)}> Clear All </button>
+  </div>
+{/if}
+
+<pre
+  class={['updating-text', todos.isFetching && 'on']}
+  style="font-weight:700">Background Updating...</pre>
+
+<style>
+  li {
+    text-align: left;
+  }
+
+  .updating-text {
+    color: transparent;
+    transition: all 0.3s ease;
+  }
+  .updating-text.on {
+    color: green;
+    transition: none;
+  }
+</style>
--- a/examples/svelte/auto-refetching/src/routes/api/data/+server.ts
+++ b/examples/svelte/auto-refetching/src/routes/api/data/+server.ts
@@ -0,0 +1,20 @@
+import { json } from '@sveltejs/kit'
+import type { RequestHandler } from '@sveltejs/kit'
+
+const list = { items: ['Item 1', 'Item 2', 'Item 3'] }
+
+/** @type {import('./$types').RequestHandler} */
+export const GET: RequestHandler = async ({ url }) => {
+  const add = url.searchParams.get('add')
+  const clear = url.searchParams.get('clear')
+
+  if (add) {
+    if (!list.items.includes(add)) {
+      list.items.push(add)
+    }
+  } else if (clear) {
+    list.items = []
+  }
+  await new Promise((r) => setTimeout(r, 200))
+  return json(list, { status: 200 })
+}
--- a/examples/svelte/auto-refetching/static/favicon.png
+++ b/examples/svelte/auto-refetching/static/favicon.png
--- a/examples/svelte/auto-refetching/svelte.config.js
+++ b/examples/svelte/auto-refetching/svelte.config.js
@@ -0,0 +1,15 @@
+import adapter from '@sveltejs/adapter-auto'
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: vitePreprocess(),
+  kit: {
+    adapter: adapter(),
+  },
+  compilerOptions: {
+    runes: true,
+  },
+}
+
+export default config
--- a/examples/svelte/auto-refetching/tsconfig.json
+++ b/examples/svelte/auto-refetching/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true
+  }
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
+}
--- a/examples/svelte/auto-refetching/vite.config.ts
+++ b/examples/svelte/auto-refetching/vite.config.ts
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [sveltekit()],
+})