docs(examples): Fix small errors in svelte examples (#7801)

Author: lachlancollins

docs/config.json

@@ -990,8 +990,8 @@
               "to": "framework/svelte/examples/ssr"
             },
             {
-              "label": "Optimistic Updates in TypeScript",
-              "to": "framework/svelte/examples/optimistic-updates-typescript"
+              "label": "Optimistic Updates",
+              "to": "framework/svelte/examples/optimistic-updates"
             },
             {
               "label": "Playground",

examples/svelte/auto-refetching/src/routes/+page.svelte

@@ -6,7 +6,7 @@
   } from '@tanstack/svelte-query'
 
   let intervalMs = 1000
-  let value: string
+  let value = ''
 
   const client = useQueryClient()
 

examples/svelte/basic/src/lib/data.ts

@@ -2,7 +2,7 @@ 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 Post[]
+  const data = (await response.json()) as Array<Post>
   return data.filter((x) => x.id <= limit)
 }
 

examples/svelte/load-more-infinite-scroll/src/app.css

@@ -41,7 +41,7 @@ h1 {
   padding: 2em;
 }
 
-#app {
+main {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;

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

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

examples/svelte/optimistic-updates-typescript/.gitignore renamed to examples/svelte/optimistic-updates/.gitignore

@@ -1,5 +1,5 @@
 {
-  "name": "@tanstack/query-example-svelte-optimistic-updates-typescript",
+  "name": "@tanstack/query-example-svelte-optimistic-updates",
   "private": true,
   "type": "module",
   "scripts": {

examples/svelte/optimistic-updates-typescript/README.md renamed to examples/svelte/optimistic-updates/README.md

@@ -16,7 +16,7 @@
     ts: number
   }
 
-  let text: string
+  let text = ''
 
   const client = useQueryClient()
 

examples/svelte/optimistic-updates-typescript/package.json renamed to examples/svelte/optimistic-updates/package.json

@@ -2,7 +2,7 @@
   import { createQuery } from '@tanstack/svelte-query'
 
   type Repo = {
-    name: string
+    full_name: string
     description: string
     subscribers_count: number
     stargazers_count: number
@@ -12,8 +12,8 @@
   const query = createQuery<Repo>({
     queryKey: ['repoData'],
     queryFn: async () =>
-      await fetch('https://api.github.com/repos/SvelteStack/svelte-query').then(
-        (r) => r.json(),
+      await fetch('https://api.github.com/repos/TanStack/query').then((r) =>
+        r.json(),
       ),
   })
 </script>
@@ -30,7 +30,7 @@
     {/if}
     {#if $query.isSuccess}
       <div>
-        <h1>{$query.data.name}</h1>
+        <h1>{$query.data.full_name}</h1>
         <p>{$query.data.description}</p>
         <strong>👀 {$query.data.subscribers_count}</strong>{' '}
         <strong>✨ {$query.data.stargazers_count}</strong>{' '}

examples/svelte/optimistic-updates-typescript/src/app.css renamed to examples/svelte/optimistic-updates/src/app.css

@@ -2,7 +2,7 @@ import './app.css'
 import App from './App.svelte'
 
 const app = new App({
-  target: document.getElementById('app')!,
+  target: document.querySelector('#app')!,
 })
 
 export default app

examples/svelte/optimistic-updates-typescript/src/app.d.ts renamed to examples/svelte/optimistic-updates/src/app.d.ts

@@ -5,7 +5,7 @@ export const api = (customFetch = fetch) => ({
     const response = await customFetch(
       'https://jsonplaceholder.typicode.com/posts',
     )
-    const data = (await response.json()) as Post[]
+    const data = (await response.json()) as Array<Post>
     return data.filter((x) => x.id <= limit)
   },
   getPostById: async (id: number): Promise<Post> => {