docs(svelte-query): Use API wrapper to simplify SSR logic (#5322)

* Use API wrapper to simplify fetch logic

* Fix prettier

---------

Co-authored-by: Dominik Dorfmeister <[email protected]>

examples/svelte/ssr/src/lib/Post.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { getPostById } from './data'
+  import { api } from './api'
   import type { Post } from './types'
 
   export let postId: number
 
   const post = createQuery<Post, Error>({
     queryKey: ['post', postId],
-    queryFn: () => getPostById(postId),
+    queryFn: () => api().getPostById(postId),
   })
 </script>
 

examples/svelte/ssr/src/lib/Posts.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { useQueryClient, createQuery } from '@tanstack/svelte-query'
-  import { getPosts } from './data'
+  import { api } from './api'
 
   const client = useQueryClient()
 
@@ -11,7 +11,7 @@
     Error
   >({
     queryKey: ['posts', limit],
-    queryFn: () => getPosts(limit),
+    queryFn: () => api().getPosts(limit),
   })
 </script>
 

examples/svelte/ssr/src/lib/api.ts

@@ -0,0 +1,18 @@
+import type { Post } from './types'
+
+export const api = (customFetch = fetch) => ({
+  getPosts: async (limit: number) => {
+    const response = await customFetch(
+      'https://jsonplaceholder.typicode.com/posts',
+    )
+    const data = (await response.json()) as Post[]
+    return data.filter((x) => x.id <= limit)
+  },
+  getPostById: async (id: number): Promise<Post> => {
+    const response = await customFetch(
+      `https://jsonplaceholder.typicode.com/posts/${id}`,
+    )
+    const data = (await response.json()) as Post
+    return data
+  },
+})

examples/svelte/ssr/src/routes/+page.ts

@@ -1,11 +1,11 @@
-import { getPosts } from '$lib/data'
+import { api } from '$lib/api'
 import type { PageLoad } from './$types'
 
 export const load: PageLoad = async ({ parent, fetch }) => {
   const { queryClient } = await parent()
 
   await queryClient.prefetchQuery({
     queryKey: ['posts', 10],
-    queryFn: () => getPosts(10, fetch),
+    queryFn: () => api(fetch).getPosts(10),
   })
 }

examples/svelte/ssr/src/routes/[postId]/+page.ts

@@ -1,4 +1,4 @@
-import { getPostById } from '$lib/data'
+import { api } from '$lib/api'
 import type { PageLoad } from './$types'
 
 export const load: PageLoad = async ({ parent, fetch, params }) => {
@@ -8,7 +8,7 @@ export const load: PageLoad = async ({ parent, fetch, params }) => {
 
   await queryClient.prefetchQuery({
     queryKey: ['post', postId],
-    queryFn: () => getPostById(postId, fetch),
+    queryFn: () => api(fetch).getPostById(postId),
   })
 
   return { postId }