From 935a674f08047f564a7db542763fa46a3bb79171 Mon Sep 17 00:00:00 2001
From: amirhhashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Sat, 21 Dec 2024 19:42:20 +0330
Subject: [PATCH 01/19] First draft

---
 src/routes/solid-start/data.json              |   3 +-
 .../solid-start/guides/data-fetching.mdx      | 266 ++++++++++++++++++
 src/routes/solid-start/guides/data.json       |   4 +
 3 files changed, 272 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/solid-start/guides/data-fetching.mdx
 create mode 100644 src/routes/solid-start/guides/data.json

diff --git a/src/routes/solid-start/data.json b/src/routes/solid-start/data.json
index 5adb2bd08..aac47ac2c 100644
--- a/src/routes/solid-start/data.json
+++ b/src/routes/solid-start/data.json
@@ -4,6 +4,7 @@
 		"index.mdx",
 		"getting-started.mdx",
 		"building-your-application",
-		"advanced"
+		"advanced",
+		"guides"
 	]
 }
diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
new file mode 100644
index 000000000..8fcf7aae2
--- /dev/null
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -0,0 +1,266 @@
+---
+title: "Data Fetching"
+---
+
+This guide will walk you through the basics of data fetching in SolidStart, providing practical examples and best practices.
+
+## Basics
+
+Here's a minimal example of data fetching in SolidStart:
+
+```tsx title="src/routes/index.tsx"
+import { For } from "solid-js";
+import { query, createAsync } from "@solidjs/router";
+
+const getPosts = query(async () => {
+  const posts = await fetch("https://my-api.com/blog");
+  return await posts.json();
+}, "posts");
+
+export default function Page() {
+  const posts = createAsync(() => getPosts());
+  return (
+    <ul>
+      <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
+    </ul>
+  );
+}
+```
+
+This example demonstrates a basic data fetching using [`query`](https://docs.solidjs.com/solid-router/reference/data-apis/query) and [`createAsync`](https://docs.solidjs.com/solid-router/reference/data-apis/create-async).
+
+
+<Callout type="info">
+  Note that `query` and `createAsync` are imported from `@solidjs/router`. By default, SolidStart uses [Solid Router](https://docs.solidjs.com/solid-router) under the hood. That means we can take advantage of all Solid Router data fetching primitives in SolidStart.
+</Callout>
+
+## Reference
+
+- Solid Router [`query`](https://docs.solidjs.com/solid-router/reference/data-apis/query)
+- Solid Router [`createAsync`](https://docs.solidjs.com/solid-router/reference/data-apis/create-async)
+- Solid [`createResource`](https://docs.solidjs.com/reference/basic-reactivity/create-resource)
+
+## Examples
+
+### Preloading Data
+
+You can use the [`preload`](https://docs.solidjs.com/solid-router/reference/preload-functions/preload) function to preload a query:
+
+```tsx title="src/routes/index.tsx"
+import { For } from "solid-js";
+import { query, createAsync, type RouteDefinition } from "@solidjs/router";
+
+const getPosts = query(async () => {
+  const posts = await fetch("https://my-api.com/blog");
+  return await posts.json();
+}, "posts");
+
+export const route = {
+  preload: () => getPosts(),
+} satisfies RouteDefinition;
+
+export default function Page() {
+  const posts = createAsync(() => getPosts());
+  return (
+    <ul>
+      <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
+    </ul>
+  );
+}
+```
+
+In this example, we call `getPosts` inside the `preload` function, and because we have used `query` the result is cached and becomes immediately available in the component.
+
+The `preload` function runs in parallel with route loading. This happens when:
+
+- A user visits the route for the first time
+- A user hovers over a link to the route
+
+### Server-Only Queries
+
+By default, queries can run on both the server and client. Add [`"use server"`](https://docs.solidjs.com/solid-start/reference/server/use-server) to make a query run only on the server:
+
+```tsx {6} title="src/routes/index.tsx"
+import { For } from "solid-js";
+import { query, createAsync, type RouteDefinition } from "@solidjs/router";
+import { db } from "~/lib/db";
+
+const getPosts = query(async () => {
+  "use server";
+  const posts = await db.from("posts").select();
+  return await posts.json();
+}, "posts");
+
+export const route = {
+  preload: () => getPosts(),
+} satisfies RouteDefinition;
+
+export default function Page() {
+  const posts = createAsync(() => getPosts());
+  return (
+    <ul>
+      <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
+    </ul>
+  );
+}
+```
+
+Because `getPosts` only runs on the server, it's safe to access your database directly.
+
+### Parameterized Queries
+
+Here's how to create queries that accept parameters:
+
+```tsx title="src/routes/posts/[id]/index.tsx"
+import {
+  query,
+  createAsync,
+  useParams,
+  type RouteDefinition,
+} from "@solidjs/router";
+
+const getPost = query(async (id: string) => {
+  const post = await fetch(`https://my-api.com/blog/posts/${id}`);
+  return await post.json();
+}, "post");
+
+export const route = {
+  preload: ({ params }) => getPost(params.id),
+} satisfies RouteDefinition;
+
+export default function Page() {
+  const params = useParams();
+  const post = createAsync(() => getPost(params.id));
+  return <div>{post().title}</div>;
+}
+```
+
+### Loading UI
+
+You can use [Solid `<Suspense>`](https://docs.solidjs.com/reference/components/suspense) to show an instant loading state while SolidStart streams in the result.
+
+```tsx title="src/routes/index.tsx"
+import { Suspense, For } from "solid-js";
+import { query, createAsync } from "@solidjs/router";
+
+const getPosts = query(async () => {
+  const posts = await fetch("https://my-api.com/blog");
+  return await posts.json();
+}, "posts");
+
+export default function Page() {
+  const posts = createAsync(() => getPosts());
+  return (
+    <ul>
+      {/* Show a fallback while the data is fetching. */}
+      <Suspense fallback={<div>Loading...</div>}>
+        <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
+      </Suspense>
+    </ul>
+  );
+}
+```
+
+This will prevent the whole component from being blocked by data requests, and the user will be able to interact with the parts of the page that are ready.
+
+### Error Handling
+
+You can use [Solid `<ErrorBoundary>`](https://docs.solidjs.com/reference/components/error-boundary) to show a fallback in case data fetching fails.
+
+```tsx title="src/routes/index.tsx"
+import { ErrorBoundary, For } from "solid-js";
+import { query, createAsync, type RouteDefinition } from "@solidjs/router";
+
+const getPosts = query(async () => {
+  const posts = await fetch("https://my-api.com/blog");
+  return await posts.json();
+}, "posts");
+
+export const route = {
+  preload: () => getPosts(),
+} satisfies RouteDefinition;
+
+export default function Page() {
+  const posts = createAsync(() => getPosts());
+  return (
+    <ul>
+      {/* Show a fallback while the data is fetching. */}
+      <ErrorBoundary fallback={<div>Something went wrong!</div>}>
+        <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
+      </ErrorBoundary>
+    </ul>
+  );
+}
+```
+
+### Client-Side Data Fetching
+
+While `createAsync` is the recommended way to fetch data, sometimes you need client-side only fetching. For these cases, use the [`createResource`](https://docs.solidjs.com/reference/basic-reactivity/create-resource) primitive:
+
+```tsx title="src/routes/index.tsx"
+import { createResource, ErrorBoundary, Suspense, For } from "solid-js";
+
+export default function Page() {
+  const [posts] = createResource(async () => {
+    const posts = await fetch("https://my-api.com/blog");
+    return await posts.json();
+  });
+
+  return (
+    <ul>
+      {/* Optional: show a fallback while the data is fetching. */}
+      <ErrorBoundary fallback={<div>Something went wrong!</div>}>
+        {/* Optional: Show a fallback while the data is fetching. */}
+        <Suspense fallback={<div>Loading...</div>}>
+          <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
+        </Suspense>
+      </ErrorBoundary>
+    </ul>
+  );
+}
+```
+
+You can use [`<Suspense>`](https://docs.solidjs.com/reference/components/suspense) and [`<ErrorBoundary>`](https://docs.solidjs.com/reference/components/error-boundary) for showing loading UI and handling errors.
+
+Be aware that you should not use `query` with `useResource`.
+
+<Callout type="caution">
+  `query` should not be used with `useResource`.
+</Callout>
+
+
+## Using Tanstack Query
+
+Consider [Tanstack Query](https://tanstack.com/query/latest) if you need advanced features like automatic background refetching or infinite queries. It's particularly appealing if you're already familiar with it from other projects. However, keep in mind that it will increase your bundle size slightly.
+
+Here is a basic example of using Tanstack Query:
+
+```tsx title="src/routes/posts/[id]/index.tsx"
+import { ErrorBoundary, Suspense } from "solid-js";
+import { useParams } from "@solidjs/router";
+import { createQuery } from "@tanstack/solid-query";
+
+export default function Page() {
+  const params = useParams();
+  const postQuery = createQuery(() => ({
+    queryKey: ["posts", params.id],
+    queryFn: async (id: string) => {
+      const post = await fetch(`https://my-api.com/posts/${id}`);
+      return await post.json();
+    },
+    throwOnError: true,
+  }));
+
+  return (
+    <div>
+      {/* Optional: show a fallback while the data is fetching. */}
+      <ErrorBoundary fallback={<div>Something went wrong!</div>}>
+        {/* Optional: Show a fallback while the data is fetching. */}
+        <Suspense fallback={<div>Loading...</div>}>
+          <div>{postQuery.data?.name}</div>
+        </Suspense>
+      </ErrorBoundary>
+    </div>
+  );
+}
+```
diff --git a/src/routes/solid-start/guides/data.json b/src/routes/solid-start/guides/data.json
new file mode 100644
index 000000000..109b58e92
--- /dev/null
+++ b/src/routes/solid-start/guides/data.json
@@ -0,0 +1,4 @@
+{
+	"title": "Guides",
+	"pages": ["data-fetching.mdx"]
+}

From d51d87301e66623f1651a62c11ed6a83625a707e Mon Sep 17 00:00:00 2001
From: amirhhashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Sun, 22 Dec 2024 11:55:40 +0330
Subject: [PATCH 02/19] iteration #1

---
 .../solid-start/guides/data-fetching.mdx      | 308 ++++++++----------
 1 file changed, 143 insertions(+), 165 deletions(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index 8fcf7aae2..5f546f286 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -4,8 +4,6 @@ title: "Data Fetching"
 
 This guide will walk you through the basics of data fetching in SolidStart, providing practical examples and best practices.
 
-## Basics
-
 Here's a minimal example of data fetching in SolidStart:
 
 ```tsx title="src/routes/index.tsx"
@@ -13,225 +11,207 @@ import { For } from "solid-js";
 import { query, createAsync } from "@solidjs/router";
 
 const getPosts = query(async () => {
-  const posts = await fetch("https://my-api.com/blog");
-  return await posts.json();
+	const posts = await fetch("https://my-api.com/blog");
+	return await posts.json();
 }, "posts");
 
 export default function Page() {
-  const posts = createAsync(() => getPosts());
-  return (
-    <ul>
-      <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
-    </ul>
-  );
+	const posts = createAsync(() => getPosts());
+	return (
+		<ul>
+			<For each={posts()}>{(post) => <li>{post.title}</li>}</For>
+		</ul>
+	);
 }
 ```
 
-This example demonstrates a basic data fetching using [`query`](https://docs.solidjs.com/solid-router/reference/data-apis/query) and [`createAsync`](https://docs.solidjs.com/solid-router/reference/data-apis/create-async).
-
-
-<Callout type="info">
-  Note that `query` and `createAsync` are imported from `@solidjs/router`. By default, SolidStart uses [Solid Router](https://docs.solidjs.com/solid-router) under the hood. That means we can take advantage of all Solid Router data fetching primitives in SolidStart.
-</Callout>
-
 ## Reference
 
 - Solid Router [`query`](https://docs.solidjs.com/solid-router/reference/data-apis/query)
 - Solid Router [`createAsync`](https://docs.solidjs.com/solid-router/reference/data-apis/create-async)
+- Solid Router [`preload`](https://docs.solidjs.com/solid-router/reference/preload-functions/preload)
 - Solid [`createResource`](https://docs.solidjs.com/reference/basic-reactivity/create-resource)
+- Solid [`<Suspense>`](https://docs.solidjs.com/reference/components/suspense)
+- Solid [`<ErrorBoundary>`](https://docs.solidjs.com/reference/components/error-boundary)
 
-## Examples
-
-### Preloading Data
+## How to show loading UI
 
-You can use the [`preload`](https://docs.solidjs.com/solid-router/reference/preload-functions/preload) function to preload a query:
+To show a loading UI while data is fetching, you can use [Solid `<Suspense>`](https://docs.solidjs.com/reference/components/suspense):
 
-```tsx title="src/routes/index.tsx"
-import { For } from "solid-js";
-import { query, createAsync, type RouteDefinition } from "@solidjs/router";
+```tsx {1} {14} {16} title="src/routes/index.tsx"
+import { Suspense, For } from "solid-js";
+import { query, createAsync } from "@solidjs/router";
 
 const getPosts = query(async () => {
-  const posts = await fetch("https://my-api.com/blog");
-  return await posts.json();
+	const posts = await fetch("https://my-api.com/blog");
+	return await posts.json();
 }, "posts");
 
-export const route = {
-  preload: () => getPosts(),
-} satisfies RouteDefinition;
-
 export default function Page() {
-  const posts = createAsync(() => getPosts());
-  return (
-    <ul>
-      <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
-    </ul>
-  );
+	const posts = createAsync(() => getPosts());
+	return (
+		<ul>
+			{/* Show a fallback while the data is fetching. */}
+			<Suspense fallback={<div>Loading...</div>}>
+				<For each={posts()}>{(post) => <li>{post.title}</li>}</For>
+			</Suspense>
+		</ul>
+	);
 }
 ```
 
-In this example, we call `getPosts` inside the `preload` function, and because we have used `query` the result is cached and becomes immediately available in the component.
+## How to handle errors
 
-The `preload` function runs in parallel with route loading. This happens when:
+To show a fallback in case data fetching fails, you can use [Solid `<ErrorBoundary>`](https://docs.solidjs.com/reference/components/error-boundary) .
 
-- A user visits the route for the first time
-- A user hovers over a link to the route
+```tsx {1} {14} {18} title="src/routes/index.tsx"
+import { ErrorBoundary, Suspense, For } from "solid-js";
+import { query, createAsync } from "@solidjs/router";
 
-### Server-Only Queries
+const getPosts = query(async () => {
+	const posts = await fetch("https://my-api.com/blog");
+	return await posts.json();
+}, "posts");
 
-By default, queries can run on both the server and client. Add [`"use server"`](https://docs.solidjs.com/solid-start/reference/server/use-server) to make a query run only on the server:
+export default function Page() {
+	const posts = createAsync(() => getPosts());
+	return (
+		<ul>
+			{/* Show a fallback while the data is fetching. */}
+			<ErrorBoundary fallback={<div>Something went wrong!</div>}>
+				<Suspense fallback={<div>Loading...</div>}>
+					<For each={posts()}>{(post) => <li>{post.title}</li>}</For>
+				</Suspense>
+			</ErrorBoundary>
+		</ul>
+	);
+}
+```
 
-```tsx {6} title="src/routes/index.tsx"
-import { For } from "solid-js";
+## How to preload data
+
+To optimize data fetching during user navigation, you can [`preload`](https://docs.solidjs.com/solid-router/reference/preload-functions/preload) to preload a query:
+
+```tsx {2} {9-11} title="src/routes/index.tsx"
+import { ErrorBoundary } from "solid-js";
 import { query, createAsync, type RouteDefinition } from "@solidjs/router";
-import { db } from "~/lib/db";
 
 const getPosts = query(async () => {
-  "use server";
-  const posts = await db.from("posts").select();
-  return await posts.json();
+	const posts = await fetch("https://my-api.com/blog");
+	return await posts.json();
 }, "posts");
 
 export const route = {
-  preload: () => getPosts(),
+	preload: () => getPosts(),
 } satisfies RouteDefinition;
 
 export default function Page() {
-  const posts = createAsync(() => getPosts());
-  return (
-    <ul>
-      <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
-    </ul>
-  );
+	const post = createAsync(() => getPosts());
+	return (
+		<div>
+			<ErrorBoundary fallback={<div>Something went wrong!</div>}>
+				<h1>{post().title}</h1>
+			</ErrorBoundary>
+		</div>
+	);
 }
 ```
 
-Because `getPosts` only runs on the server, it's safe to access your database directly.
+## How to create parameterized queries
 
-### Parameterized Queries
+To create a query that accept parameters, you can pass any number of arguments to your query function:
 
-Here's how to create queries that accept parameters:
-
-```tsx title="src/routes/posts/[id]/index.tsx"
+```tsx {9-10} {15} {19-20} title="src/routes/posts/[id]/index.tsx"
+import { ErrorBoundary } from "solid-js";
 import {
-  query,
-  createAsync,
-  useParams,
-  type RouteDefinition,
+	query,
+	createAsync,
+	useParams,
+	type RouteDefinition,
 } from "@solidjs/router";
 
 const getPost = query(async (id: string) => {
-  const post = await fetch(`https://my-api.com/blog/posts/${id}`);
-  return await post.json();
+	const post = await fetch(`https://my-api.com/blog/posts/${id}`);
+	return await post.json();
 }, "post");
 
 export const route = {
-  preload: ({ params }) => getPost(params.id),
+	preload: ({ params }) => getPost(params.id),
 } satisfies RouteDefinition;
 
 export default function Page() {
-  const params = useParams();
-  const post = createAsync(() => getPost(params.id));
-  return <div>{post().title}</div>;
+	const params = useParams();
+	const post = createAsync(() => getPost(params.id));
+	return (
+		<div>
+			<ErrorBoundary fallback={<div>Something went wrong!</div>}>
+				<h1>{post().title}</h1>
+			</ErrorBoundary>
+		</div>
+	);
 }
 ```
 
-### Loading UI
-
-You can use [Solid `<Suspense>`](https://docs.solidjs.com/reference/components/suspense) to show an instant loading state while SolidStart streams in the result.
-
-```tsx title="src/routes/index.tsx"
-import { Suspense, For } from "solid-js";
-import { query, createAsync } from "@solidjs/router";
+## How to directly use database or an ORM
 
-const getPosts = query(async () => {
-  const posts = await fetch("https://my-api.com/blog");
-  return await posts.json();
-}, "posts");
+To directly use your database or ORM in a query, add [`"use server"`](https://docs.solidjs.com/solid-start/reference/server/use-server) to your query function:
 
-export default function Page() {
-  const posts = createAsync(() => getPosts());
-  return (
-    <ul>
-      {/* Show a fallback while the data is fetching. */}
-      <Suspense fallback={<div>Loading...</div>}>
-        <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
-      </Suspense>
-    </ul>
-  );
-}
-```
-
-This will prevent the whole component from being blocked by data requests, and the user will be able to interact with the parts of the page that are ready.
-
-### Error Handling
-
-You can use [Solid `<ErrorBoundary>`](https://docs.solidjs.com/reference/components/error-boundary) to show a fallback in case data fetching fails.
-
-```tsx title="src/routes/index.tsx"
-import { ErrorBoundary, For } from "solid-js";
+```tsx {7} title="src/routes/index.tsx"
+import { For, ErrorBoundary } from "solid-js";
 import { query, createAsync, type RouteDefinition } from "@solidjs/router";
+import { db } from "~/lib/db";
 
+// This query only executes on the server
 const getPosts = query(async () => {
-  const posts = await fetch("https://my-api.com/blog");
-  return await posts.json();
+	"use server";
+	const posts = await db.from("posts").select();
+	return await posts.json();
 }, "posts");
 
 export const route = {
-  preload: () => getPosts(),
+	preload: () => getPosts(),
 } satisfies RouteDefinition;
 
 export default function Page() {
-  const posts = createAsync(() => getPosts());
-  return (
-    <ul>
-      {/* Show a fallback while the data is fetching. */}
-      <ErrorBoundary fallback={<div>Something went wrong!</div>}>
-        <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
-      </ErrorBoundary>
-    </ul>
-  );
+	const posts = createAsync(() => getPosts());
+	return (
+		<ul>
+			<ErrorBoundary fallback={<div>Something went wrong!</div>}>
+				<For each={posts()}>{(post) => <li>{post.title}</li>}</For>
+			</ErrorBoundary>
+		</ul>
+	);
 }
 ```
 
-### Client-Side Data Fetching
+## How to use `createResource` for client-side fetching
 
-While `createAsync` is the recommended way to fetch data, sometimes you need client-side only fetching. For these cases, use the [`createResource`](https://docs.solidjs.com/reference/basic-reactivity/create-resource) primitive:
+To fetch data only on the client side, you can use the [`createResource`](https://docs.solidjs.com/reference/basic-reactivity/create-resource) primitive:
 
-```tsx title="src/routes/index.tsx"
+```tsx {1} {4-7} title="src/routes/index.tsx"
 import { createResource, ErrorBoundary, Suspense, For } from "solid-js";
 
 export default function Page() {
-  const [posts] = createResource(async () => {
-    const posts = await fetch("https://my-api.com/blog");
-    return await posts.json();
-  });
-
-  return (
-    <ul>
-      {/* Optional: show a fallback while the data is fetching. */}
-      <ErrorBoundary fallback={<div>Something went wrong!</div>}>
-        {/* Optional: Show a fallback while the data is fetching. */}
-        <Suspense fallback={<div>Loading...</div>}>
-          <For each={posts()}>{(post) => <li>{post.title}</li>}</For>
-        </Suspense>
-      </ErrorBoundary>
-    </ul>
-  );
+	const [posts] = createResource(async () => {
+		const posts = await fetch("https://my-api.com/blog");
+		return await posts.json();
+	});
+
+	return (
+		<ul>
+			<ErrorBoundary fallback={<div>Something went wrong!</div>}>
+				<Suspense fallback={<div>Loading...</div>}>
+					<For each={posts()}>{(post) => <li>{post.title}</li>}</For>
+				</Suspense>
+			</ErrorBoundary>
+		</ul>
+	);
 }
 ```
 
-You can use [`<Suspense>`](https://docs.solidjs.com/reference/components/suspense) and [`<ErrorBoundary>`](https://docs.solidjs.com/reference/components/error-boundary) for showing loading UI and handling errors.
-
-Be aware that you should not use `query` with `useResource`.
-
-<Callout type="caution">
-  `query` should not be used with `useResource`.
-</Callout>
-
-
-## Using Tanstack Query
+## When to use Tanstack Query
 
-Consider [Tanstack Query](https://tanstack.com/query/latest) if you need advanced features like automatic background refetching or infinite queries. It's particularly appealing if you're already familiar with it from other projects. However, keep in mind that it will increase your bundle size slightly.
+Consider [Tanstack Query](https://tanstack.com/query/latest) if you need advanced features like automatic background re-fetching or infinite queries. It's particularly appealing if you're already familiar with it from other projects. However, keep in mind that it will increase your bundle size slightly.
 
 Here is a basic example of using Tanstack Query:
 
@@ -241,26 +221,24 @@ import { useParams } from "@solidjs/router";
 import { createQuery } from "@tanstack/solid-query";
 
 export default function Page() {
-  const params = useParams();
-  const postQuery = createQuery(() => ({
-    queryKey: ["posts", params.id],
-    queryFn: async (id: string) => {
-      const post = await fetch(`https://my-api.com/posts/${id}`);
-      return await post.json();
-    },
-    throwOnError: true,
-  }));
-
-  return (
-    <div>
-      {/* Optional: show a fallback while the data is fetching. */}
-      <ErrorBoundary fallback={<div>Something went wrong!</div>}>
-        {/* Optional: Show a fallback while the data is fetching. */}
-        <Suspense fallback={<div>Loading...</div>}>
-          <div>{postQuery.data?.name}</div>
-        </Suspense>
-      </ErrorBoundary>
-    </div>
-  );
+	const params = useParams();
+	const postQuery = createQuery(() => ({
+		queryKey: ["posts", params.id],
+		queryFn: async (id: string) => {
+			const post = await fetch(`https://my-api.com/posts/${id}`);
+			return await post.json();
+		},
+		throwOnError: true,
+	}));
+
+	return (
+		<div>
+			<ErrorBoundary fallback={<div>Something went wrong!</div>}>
+				<Suspense fallback={<div>Loading...</div>}>
+					<div>{postQuery.data?.name}</div>
+				</Suspense>
+			</ErrorBoundary>
+		</div>
+	);
 }
 ```

From bbf5defa528c3209605c57b79a776cc74be0d1fe Mon Sep 17 00:00:00 2001
From: amirhhashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 23 Dec 2024 11:35:21 +0330
Subject: [PATCH 03/19] iteration 2

---
 .../solid-start/guides/data-fetching.mdx      | 75 +++++++------------
 1 file changed, 28 insertions(+), 47 deletions(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index 5f546f286..d1caa7d8a 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -25,6 +25,8 @@ export default function Page() {
 }
 ```
 
+In this example, we created a [`query`](https://docs.solidjs.com/solid-router/reference/data-apis/query) and [`createAsync`](https://docs.solidjs.com/solid-router/reference/data-apis/create-async) primitive to access the query data inside our component.
+
 ## Reference
 
 - Solid Router [`query`](https://docs.solidjs.com/solid-router/reference/data-apis/query)
@@ -36,9 +38,13 @@ export default function Page() {
 
 ## How to show loading UI
 
-To show a loading UI while data is fetching, you can use [Solid `<Suspense>`](https://docs.solidjs.com/reference/components/suspense):
+To show a loading UI while data is loading, you can use [Solid `<Suspense>`](https://docs.solidjs.com/reference/components/suspense):
+
+1. Import `Suspense` from `solid-js`
+2. Wrap the data rendering in `<Suspense>`
+3. Provide a fallback component that will be displayed while the data is loading using the `fallback` prop
 
-```tsx {1} {14} {16} title="src/routes/index.tsx"
+```tsx {1} {13} {15} title="src/routes/index.tsx"
 import { Suspense, For } from "solid-js";
 import { query, createAsync } from "@solidjs/router";
 
@@ -51,7 +57,6 @@ export default function Page() {
 	const posts = createAsync(() => getPosts());
 	return (
 		<ul>
-			{/* Show a fallback while the data is fetching. */}
 			<Suspense fallback={<div>Loading...</div>}>
 				<For each={posts()}>{(post) => <li>{post.title}</li>}</For>
 			</Suspense>
@@ -62,9 +67,13 @@ export default function Page() {
 
 ## How to handle errors
 
-To show a fallback in case data fetching fails, you can use [Solid `<ErrorBoundary>`](https://docs.solidjs.com/reference/components/error-boundary) .
+To show a fallback UI in case data fetching fails, you can use [Solid `<ErrorBoundary>`](https://docs.solidjs.com/reference/components/error-boundary):
+
+1. Import `ErrorBoundary` from `solid-js`.
+2. Wrap the data rendering in `<ErrorBoundary>`
+3. Provide a fallback component that will be displayed if an error occurs using the `fallback` prop.
 
-```tsx {1} {14} {18} title="src/routes/index.tsx"
+```tsx {1} {13} {17} title="src/routes/index.tsx"
 import { ErrorBoundary, Suspense, For } from "solid-js";
 import { query, createAsync } from "@solidjs/router";
 
@@ -77,7 +86,6 @@ export default function Page() {
 	const posts = createAsync(() => getPosts());
 	return (
 		<ul>
-			{/* Show a fallback while the data is fetching. */}
 			<ErrorBoundary fallback={<div>Something went wrong!</div>}>
 				<Suspense fallback={<div>Loading...</div>}>
 					<For each={posts()}>{(post) => <li>{post.title}</li>}</For>
@@ -90,7 +98,11 @@ export default function Page() {
 
 ## How to preload data
 
-To optimize data fetching during user navigation, you can [`preload`](https://docs.solidjs.com/solid-router/reference/preload-functions/preload) to preload a query:
+To optimize data fetching during user navigation, you can use [`preload`](https://docs.solidjs.com/solid-router/reference/preload-functions/preload) to preload a query:
+
+1. Export a `route` object with a `preload` function
+2. Run your query inside the `preload` function
+3. Use the query as usual in your component
 
 ```tsx {2} {9-11} title="src/routes/index.tsx"
 import { ErrorBoundary } from "solid-js";
@@ -119,7 +131,7 @@ export default function Page() {
 
 ## How to create parameterized queries
 
-To create a query that accept parameters, you can pass any number of arguments to your query function:
+To create a query that accepts parameters, you can pass any number of arguments to your query function:
 
 ```tsx {9-10} {15} {19-20} title="src/routes/posts/[id]/index.tsx"
 import { ErrorBoundary } from "solid-js";
@@ -152,20 +164,20 @@ export default function Page() {
 }
 ```
 
+In this example, we used [`useParams`](https://docs.solidjs.com/solid-router/reference/primitives/use-params) to get the `id` path parameter and passed it to the `getPost` query to get the data for that specific post.
+
 ## How to directly use database or an ORM
 
-To directly use your database or ORM in a query, add [`"use server"`](https://docs.solidjs.com/solid-start/reference/server/use-server) to your query function:
+To directly use your database or ORM in a query, you should make the query server-only so your database credentials are not exposed to the client. You can do that by adding [`"use server"`](https://docs.solidjs.com/solid-start/reference/server/use-server) to the first line of your query function:
 
-```tsx {7} title="src/routes/index.tsx"
+```tsx {3} {6-7} title="src/routes/index.tsx"
 import { For, ErrorBoundary } from "solid-js";
 import { query, createAsync, type RouteDefinition } from "@solidjs/router";
 import { db } from "~/lib/db";
 
-// This query only executes on the server
 const getPosts = query(async () => {
 	"use server";
-	const posts = await db.from("posts").select();
-	return await posts.json();
+	return await db.from("posts").select();
 }, "posts");
 
 export const route = {
@@ -196,7 +208,6 @@ export default function Page() {
 		const posts = await fetch("https://my-api.com/blog");
 		return await posts.json();
 	});
-
 	return (
 		<ul>
 			<ErrorBoundary fallback={<div>Something went wrong!</div>}>
@@ -209,36 +220,6 @@ export default function Page() {
 }
 ```
 
-## When to use Tanstack Query
-
-Consider [Tanstack Query](https://tanstack.com/query/latest) if you need advanced features like automatic background re-fetching or infinite queries. It's particularly appealing if you're already familiar with it from other projects. However, keep in mind that it will increase your bundle size slightly.
-
-Here is a basic example of using Tanstack Query:
-
-```tsx title="src/routes/posts/[id]/index.tsx"
-import { ErrorBoundary, Suspense } from "solid-js";
-import { useParams } from "@solidjs/router";
-import { createQuery } from "@tanstack/solid-query";
-
-export default function Page() {
-	const params = useParams();
-	const postQuery = createQuery(() => ({
-		queryKey: ["posts", params.id],
-		queryFn: async (id: string) => {
-			const post = await fetch(`https://my-api.com/posts/${id}`);
-			return await post.json();
-		},
-		throwOnError: true,
-	}));
-
-	return (
-		<div>
-			<ErrorBoundary fallback={<div>Something went wrong!</div>}>
-				<Suspense fallback={<div>Loading...</div>}>
-					<div>{postQuery.data?.name}</div>
-				</Suspense>
-			</ErrorBoundary>
-		</div>
-	);
-}
-```
+<Callout type="info">
+    [Tanstack Query](https://tanstack.com/query/latest/docs/framework/solid/overview) can be used for more advanced features such as automatic background re-fetching or infinite queries.
+</Callout>

From a73bf297116dcd829c44918797b0a58e8c7de0ac Mon Sep 17 00:00:00 2001
From: amirhhashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 23 Dec 2024 11:50:35 +0330
Subject: [PATCH 04/19] fix typo

---
 src/routes/solid-start/guides/data-fetching.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index d1caa7d8a..d8c810396 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -25,7 +25,7 @@ export default function Page() {
 }
 ```
 
-In this example, we created a [`query`](https://docs.solidjs.com/solid-router/reference/data-apis/query) and [`createAsync`](https://docs.solidjs.com/solid-router/reference/data-apis/create-async) primitive to access the query data inside our component.
+In this example, we created a [`query`](https://docs.solidjs.com/solid-router/reference/data-apis/query) and used the [`createAsync`](https://docs.solidjs.com/solid-router/reference/data-apis/create-async) primitive to access the query data inside our component.
 
 ## Reference
 

From 9e34c582900a0d82d34975ccae2bb5733b13e144 Mon Sep 17 00:00:00 2001
From: amirhhashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Sat, 28 Dec 2024 15:44:36 +0330
Subject: [PATCH 05/19] iteration 3

---
 src/routes/solid-start/guides/data-fetching.mdx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index d8c810396..f1dc5e561 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -36,7 +36,7 @@ In this example, we created a [`query`](https://docs.solidjs.com/solid-router/re
 - Solid [`<Suspense>`](https://docs.solidjs.com/reference/components/suspense)
 - Solid [`<ErrorBoundary>`](https://docs.solidjs.com/reference/components/error-boundary)
 
-## How to show loading UI
+## Showing loading UI
 
 To show a loading UI while data is loading, you can use [Solid `<Suspense>`](https://docs.solidjs.com/reference/components/suspense):
 
@@ -65,7 +65,7 @@ export default function Page() {
 }
 ```
 
-## How to handle errors
+## Handling errors
 
 To show a fallback UI in case data fetching fails, you can use [Solid `<ErrorBoundary>`](https://docs.solidjs.com/reference/components/error-boundary):
 
@@ -96,7 +96,7 @@ export default function Page() {
 }
 ```
 
-## How to preload data
+## Preloading data
 
 To optimize data fetching during user navigation, you can use [`preload`](https://docs.solidjs.com/solid-router/reference/preload-functions/preload) to preload a query:
 
@@ -129,7 +129,7 @@ export default function Page() {
 }
 ```
 
-## How to create parameterized queries
+## Passing parameters to queries
 
 To create a query that accepts parameters, you can pass any number of arguments to your query function:
 
@@ -166,7 +166,7 @@ export default function Page() {
 
 In this example, we used [`useParams`](https://docs.solidjs.com/solid-router/reference/primitives/use-params) to get the `id` path parameter and passed it to the `getPost` query to get the data for that specific post.
 
-## How to directly use database or an ORM
+## Using database or an ORM
 
 To directly use your database or ORM in a query, you should make the query server-only so your database credentials are not exposed to the client. You can do that by adding [`"use server"`](https://docs.solidjs.com/solid-start/reference/server/use-server) to the first line of your query function:
 
@@ -196,7 +196,7 @@ export default function Page() {
 }
 ```
 
-## How to use `createResource` for client-side fetching
+## Fetching data on the client
 
 To fetch data only on the client side, you can use the [`createResource`](https://docs.solidjs.com/reference/basic-reactivity/create-resource) primitive:
 
@@ -220,6 +220,8 @@ export default function Page() {
 }
 ```
 
+Read more in the [`createResource`](https://docs.solidjs.com/reference/basic-reactivity/create-resource) docs.
+
 <Callout type="info">
     [Tanstack Query](https://tanstack.com/query/latest/docs/framework/solid/overview) can be used for more advanced features such as automatic background re-fetching or infinite queries.
 </Callout>

From d41c75c86e8d45cac4b9d045efbb6649e9cc08e0 Mon Sep 17 00:00:00 2001
From: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:13:38 +0330
Subject: [PATCH 06/19] Update src/routes/solid-start/guides/data-fetching.mdx

Co-authored-by: Sarah <gerrardsarah@gmail.com>
---
 src/routes/solid-start/guides/data-fetching.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index f1dc5e561..0746787ff 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -25,7 +25,7 @@ export default function Page() {
 }
 ```
 
-In this example, we created a [`query`](https://docs.solidjs.com/solid-router/reference/data-apis/query) and used the [`createAsync`](https://docs.solidjs.com/solid-router/reference/data-apis/create-async) primitive to access the query data inside our component.
+In this example, a [`query`](/solid-router/reference/data-apis/query) is created. In order to access it's data within the component, the [`createAsync`](/solid-router/reference/data-apis/create-async) primitive was used.
 
 ## Reference
 

From e444f1f6964921dcbb206ec216a67c47df3f260c Mon Sep 17 00:00:00 2001
From: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:14:10 +0330
Subject: [PATCH 07/19] Update src/routes/solid-start/guides/data-fetching.mdx

Co-authored-by: Sarah <gerrardsarah@gmail.com>
---
 src/routes/solid-start/guides/data-fetching.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index 0746787ff..585495ed6 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -67,7 +67,7 @@ export default function Page() {
 
 ## Handling errors
 
-To show a fallback UI in case data fetching fails, you can use [Solid `<ErrorBoundary>`](https://docs.solidjs.com/reference/components/error-boundary):
+If the data fetching fails, a fallback UI can be displayed using an [`<ErrorBoundary>`](/reference/components/error-boundary):
 
 1. Import `ErrorBoundary` from `solid-js`.
 2. Wrap the data rendering in `<ErrorBoundary>`

From 515c6589f4eecbb1566e586f38807707ff8ea298 Mon Sep 17 00:00:00 2001
From: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:14:40 +0330
Subject: [PATCH 08/19] Update src/routes/solid-start/guides/data-fetching.mdx

Co-authored-by: Sarah <gerrardsarah@gmail.com>
---
 src/routes/solid-start/guides/data-fetching.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index 585495ed6..d62938eef 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -198,7 +198,7 @@ export default function Page() {
 
 ## Fetching data on the client
 
-To fetch data only on the client side, you can use the [`createResource`](https://docs.solidjs.com/reference/basic-reactivity/create-resource) primitive:
+When you only need to fetch data on the client side, you can use the [`createResource`](/reference/basic-reactivity/create-resource) primitive:
 
 ```tsx {1} {4-7} title="src/routes/index.tsx"
 import { createResource, ErrorBoundary, Suspense, For } from "solid-js";

From c8e62dddc6823e34d6c22e7e5b1daf57b5fea31f Mon Sep 17 00:00:00 2001
From: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:15:06 +0330
Subject: [PATCH 09/19] Update src/routes/solid-start/guides/data-fetching.mdx

Co-authored-by: Sarah <gerrardsarah@gmail.com>
---
 src/routes/solid-start/guides/data-fetching.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index d62938eef..c9e542e90 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -168,7 +168,7 @@ In this example, we used [`useParams`](https://docs.solidjs.com/solid-router/ref
 
 ## Using database or an ORM
 
-To directly use your database or ORM in a query, you should make the query server-only so your database credentials are not exposed to the client. You can do that by adding [`"use server"`](https://docs.solidjs.com/solid-start/reference/server/use-server) to the first line of your query function:
+To safely interact with your database or ORM in a query, ensure the query is server-only to prevent exposing your database credentials to the client. You can do this by adding [`"use server"`](/solid-start/reference/server/use-server) as the first line of your query function:
 
 ```tsx {3} {6-7} title="src/routes/index.tsx"
 import { For, ErrorBoundary } from "solid-js";

From 96de833e5a20312b8e3a8271098a3d7243284034 Mon Sep 17 00:00:00 2001
From: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:15:38 +0330
Subject: [PATCH 10/19] Update src/routes/solid-start/guides/data-fetching.mdx

Co-authored-by: Sarah <gerrardsarah@gmail.com>
---
 src/routes/solid-start/guides/data-fetching.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index c9e542e90..9fc7bca0e 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -223,5 +223,5 @@ export default function Page() {
 Read more in the [`createResource`](https://docs.solidjs.com/reference/basic-reactivity/create-resource) docs.
 
 <Callout type="info">
-    [Tanstack Query](https://tanstack.com/query/latest/docs/framework/solid/overview) can be used for more advanced features such as automatic background re-fetching or infinite queries.
+    For advanced features like automatic background re-fetching or infinite queries, you can use [Tanstack Query.](https://tanstack.com/query/latest/docs/framework/solid/overview)
 </Callout>

From 9b12076f63af2b02ad6af78bf560366933b358aa Mon Sep 17 00:00:00 2001
From: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:15:57 +0330
Subject: [PATCH 11/19] Update src/routes/solid-start/guides/data-fetching.mdx

Co-authored-by: Sarah <gerrardsarah@gmail.com>
---
 src/routes/solid-start/guides/data-fetching.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index 9fc7bca0e..0e9078ead 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -222,6 +222,6 @@ export default function Page() {
 
 Read more in the [`createResource`](https://docs.solidjs.com/reference/basic-reactivity/create-resource) docs.
 
-<Callout type="info">
+<Callout type="info" title="Advanced Data Handling">
     For advanced features like automatic background re-fetching or infinite queries, you can use [Tanstack Query.](https://tanstack.com/query/latest/docs/framework/solid/overview)
 </Callout>

From 3591bf0ba1e0bcccb087db96c4bbe6fc760208f5 Mon Sep 17 00:00:00 2001
From: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:20:20 +0330
Subject: [PATCH 12/19] Update src/routes/solid-start/guides/data-fetching.mdx

Co-authored-by: Sarah <gerrardsarah@gmail.com>
---
 src/routes/solid-start/guides/data-fetching.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index 0e9078ead..6c57dde0f 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -98,7 +98,7 @@ export default function Page() {
 
 ## Preloading data
 
-To optimize data fetching during user navigation, you can use [`preload`](https://docs.solidjs.com/solid-router/reference/preload-functions/preload) to preload a query:
+Data fetching can be optimized during user navigation through preloading the data with the [`preload`](/solid-router/reference/preload-functions/preload) function: 
 
 1. Export a `route` object with a `preload` function
 2. Run your query inside the `preload` function

From 99a1797ab7eca75a128e5557ffc3da43d92288f5 Mon Sep 17 00:00:00 2001
From: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:39:10 +0330
Subject: [PATCH 13/19] Update src/routes/solid-start/guides/data-fetching.mdx

Co-authored-by: Sarah <gerrardsarah@gmail.com>
---
 src/routes/solid-start/guides/data-fetching.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index 6c57dde0f..746a4510e 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -38,7 +38,7 @@ In this example, a [`query`](/solid-router/reference/data-apis/query) is created
 
 ## Showing loading UI
 
-To show a loading UI while data is loading, you can use [Solid `<Suspense>`](https://docs.solidjs.com/reference/components/suspense):
+To display a loading UI while data is being fetched, you can use [Solid `<Suspense>`](/reference/components/suspense):
 
 1. Import `Suspense` from `solid-js`
 2. Wrap the data rendering in `<Suspense>`

From fb1470c36d779323e70fcb1b2b276564f976f072 Mon Sep 17 00:00:00 2001
From: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:39:37 +0330
Subject: [PATCH 14/19] Update src/routes/solid-start/guides/data-fetching.mdx

Co-authored-by: Sarah <gerrardsarah@gmail.com>
---
 src/routes/solid-start/guides/data-fetching.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index 746a4510e..417d35ac5 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -131,7 +131,7 @@ export default function Page() {
 
 ## Passing parameters to queries
 
-To create a query that accepts parameters, you can pass any number of arguments to your query function:
+When creating a query that accepts parameters, you can define your query function to take any number of arguments:
 
 ```tsx {9-10} {15} {19-20} title="src/routes/posts/[id]/index.tsx"
 import { ErrorBoundary } from "solid-js";

From 49a02246118c2b26a90682b7f31d5d636626de9f Mon Sep 17 00:00:00 2001
From: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:40:06 +0330
Subject: [PATCH 15/19] Update src/routes/solid-start/guides/data-fetching.mdx

Co-authored-by: Sarah <gerrardsarah@gmail.com>
---
 src/routes/solid-start/guides/data-fetching.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index 417d35ac5..4057b92b4 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -164,7 +164,7 @@ export default function Page() {
 }
 ```
 
-In this example, we used [`useParams`](https://docs.solidjs.com/solid-router/reference/primitives/use-params) to get the `id` path parameter and passed it to the `getPost` query to get the data for that specific post.
+In this example, [`useParams`](/solid-router/reference/primitives/use-params) was used to access the `id` path parameter. You can then pass it to the `getPost` query to get the data for that specific post.
 
 ## Using database or an ORM
 

From 99ef3697a0ae853fcb7895dc176847317faa4584 Mon Sep 17 00:00:00 2001
From: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:40:21 +0330
Subject: [PATCH 16/19] Update src/routes/solid-start/guides/data-fetching.mdx

Co-authored-by: Sarah <gerrardsarah@gmail.com>
---
 src/routes/solid-start/guides/data-fetching.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index 4057b92b4..f1e41a970 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -220,7 +220,7 @@ export default function Page() {
 }
 ```
 
-Read more in the [`createResource`](https://docs.solidjs.com/reference/basic-reactivity/create-resource) docs.
+You can [read more about `createResource` here](/reference/basic-reactivity/create-resource) .
 
 <Callout type="info" title="Advanced Data Handling">
     For advanced features like automatic background re-fetching or infinite queries, you can use [Tanstack Query.](https://tanstack.com/query/latest/docs/framework/solid/overview)

From 4de7347005b1de3598f1d8f1c6ced2d06eccef0a Mon Sep 17 00:00:00 2001
From: amirhhashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Mon, 30 Dec 2024 11:43:28 +0330
Subject: [PATCH 17/19] iteration 4

---
 src/routes/solid-start/guides/data-fetching.mdx | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index f1e41a970..a365dc3eb 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -27,15 +27,6 @@ export default function Page() {
 
 In this example, a [`query`](/solid-router/reference/data-apis/query) is created. In order to access it's data within the component, the [`createAsync`](/solid-router/reference/data-apis/create-async) primitive was used.
 
-## Reference
-
-- Solid Router [`query`](https://docs.solidjs.com/solid-router/reference/data-apis/query)
-- Solid Router [`createAsync`](https://docs.solidjs.com/solid-router/reference/data-apis/create-async)
-- Solid Router [`preload`](https://docs.solidjs.com/solid-router/reference/preload-functions/preload)
-- Solid [`createResource`](https://docs.solidjs.com/reference/basic-reactivity/create-resource)
-- Solid [`<Suspense>`](https://docs.solidjs.com/reference/components/suspense)
-- Solid [`<ErrorBoundary>`](https://docs.solidjs.com/reference/components/error-boundary)
-
 ## Showing loading UI
 
 To display a loading UI while data is being fetched, you can use [Solid `<Suspense>`](/reference/components/suspense):
@@ -220,7 +211,7 @@ export default function Page() {
 }
 ```
 
-You can [read more about `createResource` here](/reference/basic-reactivity/create-resource) .
+You can [read more about `createResource` here](/reference/basic-reactivity/create-resource).
 
 <Callout type="info" title="Advanced Data Handling">
     For advanced features like automatic background re-fetching or infinite queries, you can use [Tanstack Query.](https://tanstack.com/query/latest/docs/framework/solid/overview)

From 96b62f715b3981bc2589deffd1d0f1c9bc2924db Mon Sep 17 00:00:00 2001
From: amirhhashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Wed, 1 Jan 2025 20:18:12 +0330
Subject: [PATCH 18/19] iteration 5

---
 .../solid-start/guides/data-fetching.mdx      | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index a365dc3eb..32880cb59 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -11,7 +11,7 @@ import { For } from "solid-js";
 import { query, createAsync } from "@solidjs/router";
 
 const getPosts = query(async () => {
-	const posts = await fetch("https://my-api.com/blog");
+	const posts = await fetch("https://my-api.com/posts");
 	return await posts.json();
 }, "posts");
 
@@ -35,12 +35,12 @@ To display a loading UI while data is being fetched, you can use [Solid `<Suspen
 2. Wrap the data rendering in `<Suspense>`
 3. Provide a fallback component that will be displayed while the data is loading using the `fallback` prop
 
-```tsx {1} {13} {15} title="src/routes/index.tsx"
+```tsx {13} {15} title="src/routes/index.tsx"
 import { Suspense, For } from "solid-js";
 import { query, createAsync } from "@solidjs/router";
 
 const getPosts = query(async () => {
-	const posts = await fetch("https://my-api.com/blog");
+	const posts = await fetch("https://my-api.com/posts");
 	return await posts.json();
 }, "posts");
 
@@ -64,12 +64,12 @@ If the data fetching fails, a fallback UI can be displayed using an [`<ErrorBoun
 2. Wrap the data rendering in `<ErrorBoundary>`
 3. Provide a fallback component that will be displayed if an error occurs using the `fallback` prop.
 
-```tsx {1} {13} {17} title="src/routes/index.tsx"
+```tsx {13} {17} title="src/routes/index.tsx"
 import { ErrorBoundary, Suspense, For } from "solid-js";
 import { query, createAsync } from "@solidjs/router";
 
 const getPosts = query(async () => {
-	const posts = await fetch("https://my-api.com/blog");
+	const posts = await fetch("https://my-api.com/posts");
 	return await posts.json();
 }, "posts");
 
@@ -89,18 +89,18 @@ export default function Page() {
 
 ## Preloading data
 
-Data fetching can be optimized during user navigation through preloading the data with the [`preload`](/solid-router/reference/preload-functions/preload) function: 
+Data fetching can be optimized during user navigation through preloading the data with the [`preload`](/solid-router/reference/preload-functions/preload) function:
 
 1. Export a `route` object with a `preload` function
 2. Run your query inside the `preload` function
 3. Use the query as usual in your component
 
-```tsx {2} {9-11} title="src/routes/index.tsx"
+```tsx {9-11} title="src/routes/index.tsx"
 import { ErrorBoundary } from "solid-js";
 import { query, createAsync, type RouteDefinition } from "@solidjs/router";
 
 const getPosts = query(async () => {
-	const posts = await fetch("https://my-api.com/blog");
+	const posts = await fetch("https://my-api.com/posts");
 	return await posts.json();
 }, "posts");
 
@@ -134,7 +134,7 @@ import {
 } from "@solidjs/router";
 
 const getPost = query(async (id: string) => {
-	const post = await fetch(`https://my-api.com/blog/posts/${id}`);
+	const post = await fetch(`https://my-api.com/posts/${id}`);
 	return await post.json();
 }, "post");
 
@@ -157,11 +157,11 @@ export default function Page() {
 
 In this example, [`useParams`](/solid-router/reference/primitives/use-params) was used to access the `id` path parameter. You can then pass it to the `getPost` query to get the data for that specific post.
 
-## Using database or an ORM
+## Using a database or an ORM
 
 To safely interact with your database or ORM in a query, ensure the query is server-only to prevent exposing your database credentials to the client. You can do this by adding [`"use server"`](/solid-start/reference/server/use-server) as the first line of your query function:
 
-```tsx {3} {6-7} title="src/routes/index.tsx"
+```tsx {6-7} title="src/routes/index.tsx"
 import { For, ErrorBoundary } from "solid-js";
 import { query, createAsync, type RouteDefinition } from "@solidjs/router";
 import { db } from "~/lib/db";
@@ -191,12 +191,12 @@ export default function Page() {
 
 When you only need to fetch data on the client side, you can use the [`createResource`](/reference/basic-reactivity/create-resource) primitive:
 
-```tsx {1} {4-7} title="src/routes/index.tsx"
+```tsx {4-7} title="src/routes/index.tsx"
 import { createResource, ErrorBoundary, Suspense, For } from "solid-js";
 
 export default function Page() {
 	const [posts] = createResource(async () => {
-		const posts = await fetch("https://my-api.com/blog");
+		const posts = await fetch("https://my-api.com/posts");
 		return await posts.json();
 	});
 	return (
@@ -214,5 +214,5 @@ export default function Page() {
 You can [read more about `createResource` here](/reference/basic-reactivity/create-resource).
 
 <Callout type="info" title="Advanced Data Handling">
-    For advanced features like automatic background re-fetching or infinite queries, you can use [Tanstack Query.](https://tanstack.com/query/latest/docs/framework/solid/overview)
+	For advanced features like automatic background re-fetching or infinite queries, you can use [Tanstack Query.](https://tanstack.com/query/latest/docs/framework/solid/overview)
 </Callout>

From 093fc06a4d003e34690bce3269ea1b180529ae85 Mon Sep 17 00:00:00 2001
From: amirhhashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Wed, 1 Jan 2025 20:24:52 +0330
Subject: [PATCH 19/19] fix typo

---
 src/routes/solid-start/guides/data-fetching.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/solid-start/guides/data-fetching.mdx b/src/routes/solid-start/guides/data-fetching.mdx
index 32880cb59..c7e6e4c5b 100644
--- a/src/routes/solid-start/guides/data-fetching.mdx
+++ b/src/routes/solid-start/guides/data-fetching.mdx
@@ -89,7 +89,7 @@ export default function Page() {
 
 ## Preloading data
 
-Data fetching can be optimized during user navigation through preloading the data with the [`preload`](/solid-router/reference/preload-functions/preload) function:
+Data fetching can be optimized during user navigation by preloading the data with the [`preload`](/solid-router/reference/preload-functions/preload) function:
 
 1. Export a `route` object with a `preload` function
 2. Run your query inside the `preload` function
@@ -155,7 +155,7 @@ export default function Page() {
 }
 ```
 
-In this example, [`useParams`](/solid-router/reference/primitives/use-params) was used to access the `id` path parameter. You can then pass it to the `getPost` query to get the data for that specific post.
+In this example, [`useParams`](/solid-router/reference/primitives/use-params) was used to get the `id` path parameter. You can then pass it to the `getPost` query to get the data for that specific post.
 
 ## Using a database or an ORM