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

examples/svelte/load-more-infinite-scroll/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

examples/svelte/load-more-infinite-scroll/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.

examples/svelte/load-more-infinite-scroll/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@tanstack/query-example-svelte-load-more-infinite-scroll",
+  "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"
+  }
+}

examples/svelte/load-more-infinite-scroll/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;
+  }
+}

examples/svelte/load-more-infinite-scroll/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 {}

examples/svelte/load-more-infinite-scroll/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>

examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { createInfiniteQuery } from '@tanstack/svelte-query'
+
+  const endPoint = 'https://swapi.dev/api'
+
+  const fetchPlanets = async ({ pageParam = 1 }) =>
+    await fetch(`${endPoint}/planets/?page=${pageParam}`).then((r) => r.json())
+
+  const query = createInfiniteQuery(() => ({
+    queryKey: ['planets'],
+    queryFn: ({ pageParam }) => fetchPlanets({ pageParam }),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) => {
+      if (lastPage.next) {
+        const nextUrl = new URLSearchParams(new URL(lastPage.next).search)
+        const nextCursor = nextUrl.get('page')
+        if (nextCursor) {
+          return +nextCursor
+        }
+      }
+      return undefined
+    },
+  }))
+</script>
+
+{#if query.isPending}
+  Loading...
+{/if}
+{#if query.error}
+  <span>Error: {query.error.message}</span>
+{/if}
+{#if query.isSuccess}
+  <div>
+    {#each query.data.pages as { results }}
+      {#each results as planet}
+        <div class="card">
+          <div class="card-body">
+            <h2 class="card-title">Planet Name: {planet.name}</h2>
+            <p>Population: {planet.population}</p>
+          </div>
+        </div>
+      {/each}
+    {/each}
+  </div>
+  <div>
+    <button
+      onclick={() => query.fetchNextPage()}
+      disabled={!query.hasNextPage || query.isFetchingNextPage}
+    >
+      {#if query.isFetching}
+        Loading more...
+      {:else if query.hasNextPage}
+        Load More
+      {:else}Nothing more to load{/if}
+    </button>
+  </div>
+{/if}
+
+<style>
+  .card {
+    background-color: #111;
+    margin-bottom: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+</style>

examples/svelte/load-more-infinite-scroll/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>

examples/svelte/load-more-infinite-scroll/src/routes/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import LoadMore from '../lib/LoadMore.svelte'
+</script>
+
+<h1>Infinite Load More</h1>
+<LoadMore />

examples/svelte/load-more-infinite-scroll/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

examples/svelte/load-more-infinite-scroll/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
+}

examples/svelte/load-more-infinite-scroll/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [sveltekit()],
+})