Merge branch 'main' into package-script-restructure

TkDodo · web-flow · commit 6120330b1794 · 2023-01-09T16:27:12.000+01:00
diff --git a/docs/config.json b/docs/config.json
@@ -690,6 +690,47 @@
             {
               "label": "Overview",
               "to": "svelte/overview"
+            },
+            {
+              "label": "Installation",
+              "to": "svelte/installation"
+            }
+          ]
+        },
+        {
+          "label": "Examples",
+          "children": [
+            {
+              "label": "Simple",
+              "to": "svelte/examples/svelte/simple"
+            },
+            {
+              "label": "Basic",
+              "to": "svelte/examples/svelte/basic"
+            },
+            {
+              "label": "Auto Refetching / Polling / Realtime",
+              "to": "svelte/examples/svelte/auto-refetching"
+            },
+            {
+              "label": "Optimistic Updates in TypeScript",
+              "to": "svelte/examples/svelte/optimistic-updates-typescript"
+            },
+            {
+              "label": "Playground",
+              "to": "svelte/examples/svelte/playground"
+            },
+            {
+              "label": "Star Wars",
+              "to": "svelte/examples/svelte/star-wars"
+            },
+            {
+              "label": "Infinite Queries",
+              "to": "svelte/examples/svelte/infinite-loadmore"
+            },
+            {
+              "label": "Hydration",
+              "to": "svelte/examples/svelte/hydration"
             }
           ]
         }
diff --git a/docs/svelte/installation.md b/docs/svelte/installation.md
@@ -0,0 +1,18 @@
+---
+id: installation
+title: Installation
+---
+
+You can install Svelte Query via [NPM](https://npmjs.com).
+
+### NPM
+
+```bash
+$ npm i @tanstack/svelte-query
+# or
+$ pnpm add @tanstack/svelte-query
+# or
+$ yarn add @tanstack/svelte-query
+```
+
+> Wanna give it a spin before you download? Try out the [basic](/query/v4/docs/svelte/examples/svelte/basic) example!
diff --git a/docs/svelte/overview.md b/docs/svelte/overview.md
@@ -12,13 +12,13 @@ Include the QueryClientProvider near the root of your project:
 ```svelte
 <script lang="ts">
   import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query'
-  import Simple from './lib/Example.svelte'
+  import Example from './lib/Example.svelte'
 
   const queryClient = new QueryClient()
 </script>
 
 <QueryClientProvider client={queryClient}>
-  <Simple />
+  <Example />
 </QueryClientProvider>
 ```
 
@@ -40,9 +40,9 @@ Then call any function (e.g. createQuery) from any component:
   {:else if $query.isError}
     <p>Error: {$query.error.message}</p>
   {:else if $query.isSuccess}
-      {#each $query.data as todo}
-        <p>{todo.title}</p>
-      {/each}
+    {#each $query.data as todo}
+      <p>{todo.title}</p>
+    {/each}
   {/if}
 </div>
 ```
