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

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 />