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/basic/.gitignore
+++ b/examples/svelte/basic/.gitignore
@@ -0,0 +1,9 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+!lib/
--- a/examples/svelte/basic/README.md
+++ b/examples/svelte/basic/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/basic/package.json
+++ b/examples/svelte/basic/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@tanstack/query-example-svelte-basic",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/query-async-storage-persister": "^5.102.8",
+    "@tanstack/svelte-query": "^6.1.48",
+    "@tanstack/svelte-query-devtools": "^6.1.48",
+    "@tanstack/svelte-query-persist-client": "^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/basic/src/app.css
+++ b/examples/svelte/basic/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/basic/src/app.d.ts
+++ b/examples/svelte/basic/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/basic/src/app.html
+++ b/examples/svelte/basic/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/basic/src/lib/Post.svelte
+++ b/examples/svelte/basic/src/lib/Post.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { createQuery } from '@tanstack/svelte-query'
+  import { getPostById } from './data'
+  import type { Post } from './types'
+
+  const { postId }: { postId: number } = $props()
+
+  const post = createQuery<Post>(() => ({
+    queryKey: ['post', postId],
+    queryFn: () => getPostById(postId),
+  }))
+</script>
+
+<div>
+  <div>
+    <a class="button" href="/"> Back </a>
+  </div>
+  {#if !postId || post.isPending}
+    <span>Loading...</span>
+  {/if}
+  {#if post.error}
+    <span>Error: {post.error.message}</span>
+  {/if}
+  {#if post.isSuccess}
+    <h1>{post.data.title}</h1>
+    <div>
+      <p>{post.data.body}</p>
+    </div>
+    <div>{post.isFetching ? 'Background Updating...' : ' '}</div>
+  {/if}
+</div>
--- a/examples/svelte/basic/src/lib/Posts.svelte
+++ b/examples/svelte/basic/src/lib/Posts.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { useQueryClient, createQuery } from '@tanstack/svelte-query'
+  import { getPosts } from './data'
+
+  const client = useQueryClient()
+
+  let limit = 10
+
+  const posts = createQuery<
+    { id: number; title: string; body: string }[],
+    Error
+  >(() => ({
+    queryKey: ['posts', limit],
+    queryFn: () => getPosts(limit),
+  }))
+</script>
+
+<div>
+  <div>
+    {#if posts.status === 'pending'}
+      <span>Loading...</span>
+    {:else if posts.status === 'error'}
+      <span>Error: {posts.error.message}</span>
+    {:else}
+      <ul>
+        {#each posts.data as post}
+          <article>
+            <a
+              href={`/${post.id}`}
+              style={// We can use the queryCache here to show bold links for
+              // ones that are cached
+              client.getQueryData(['post', post.id])
+                ? 'font-weight: bold; color: indianred'
+                : 'cursor: pointer'}
+            >
+              {post.title}
+            </a>
+          </article>
+        {/each}
+      </ul>
+      <pre
+        class={['updating-text', posts.isFetching && 'on']}
+        style="font-weight:700">Background Updating...</pre>
+    {/if}
+  </div>
+</div>
+
+<style>
+  article {
+    text-align: left;
+  }
+  a {
+    display: block;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .updating-text {
+    color: transparent;
+    transition: all 0.3s ease;
+  }
+  .updating-text.on {
+    color: green;
+    transition: none;
+  }
+</style>
--- a/examples/svelte/basic/src/lib/data.ts
+++ b/examples/svelte/basic/src/lib/data.ts
@@ -0,0 +1,15 @@
+import type { Post } from './types'
+
+export const getPosts = async (limit: number) => {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  const data = (await response.json()) as Array<Post>
+  return data.filter((x) => x.id <= limit)
+}
+
+export const getPostById = async (id: number): Promise<Post> => {
+  const response = await fetch(
+    `https://jsonplaceholder.typicode.com/posts/${id}`,
+  )
+  const data = (await response.json()) as Post
+  return data
+}
--- a/examples/svelte/basic/src/lib/types.ts
+++ b/examples/svelte/basic/src/lib/types.ts
@@ -0,0 +1,5 @@
+export type Post = {
+  id: number
+  title: string
+  body: string
+}
--- a/examples/svelte/basic/src/routes/+layout.svelte
+++ b/examples/svelte/basic/src/routes/+layout.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import '../app.css'
+  import { browser } from '$app/environment'
+  import { QueryClient } from '@tanstack/svelte-query'
+  import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
+  import { PersistQueryClientProvider } from '@tanstack/svelte-query-persist-client'
+  import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'
+
+  const { children } = $props()
+
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        enabled: browser,
+      },
+    },
+  })
+
+  const persister = createAsyncStoragePersister({
+    storage: browser ? window.localStorage : null,
+  })
+</script>
+
+<PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
+  <main>
+    {@render children()}
+  </main>
+  <SvelteQueryDevtools />
+</PersistQueryClientProvider>
--- a/examples/svelte/basic/src/routes/+page.svelte
+++ b/examples/svelte/basic/src/routes/+page.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+  import Posts from '$lib/Posts.svelte'
+</script>
+
+<h1>Basic Query</h1>
+<Posts />
--- a/examples/svelte/basic/src/routes/[postId]/+page.svelte
+++ b/examples/svelte/basic/src/routes/[postId]/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import Post from '$lib/Post.svelte'
+
+  const { data } = $props()
+</script>
+
+<Post postId={data.postId} />
--- a/examples/svelte/basic/src/routes/[postId]/+page.ts
+++ b/examples/svelte/basic/src/routes/[postId]/+page.ts
@@ -0,0 +1,6 @@
+import type { PageLoad } from './$types'
+
+export const load: PageLoad = async ({ params }) => {
+  const postId = parseInt(params.postId)
+  return { postId }
+}
--- a/examples/svelte/basic/static/favicon.png
+++ b/examples/svelte/basic/static/favicon.png
--- a/examples/svelte/basic/svelte.config.js
+++ b/examples/svelte/basic/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/basic/tsconfig.json
+++ b/examples/svelte/basic/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/basic/vite.config.ts
+++ b/examples/svelte/basic/vite.config.ts
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [sveltekit()],
+})