From c6dbf89ad2bb78a543096abc560851c426ff57cd Mon Sep 17 00:00:00 2001
From: mattpeng <68014351+mattp0123@users.noreply.github.com>
Date: Tue, 22 Apr 2025 14:48:04 +0800
Subject: [PATCH] Update async-initial-values.md

- Destructuring query breaks the reactivity.
- Don't do early return in Solid component, because it only runs once.
---
 .../solid/guides/async-initial-values.md          | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/docs/framework/solid/guides/async-initial-values.md b/docs/framework/solid/guides/async-initial-values.md
index 83a0a7c89..647962144 100644
--- a/docs/framework/solid/guides/async-initial-values.md
+++ b/docs/framework/solid/guides/async-initial-values.md
@@ -19,9 +19,10 @@ As such, this guide shows you how you can mix-n-match TanStack Form with TanStac
 ```tsx
 import { createForm } from '@tanstack/solid-form'
 import { createQuery } from '@tanstack/solid-query'
+import { Show } from 'solid-js'
 
 export default function App() {
-  const { data, isLoading } = createQuery(() => ({
+  const query = createQuery(() => ({
     queryKey: ['data'],
     queryFn: async () => {
       await new Promise((resolve) => setTimeout(resolve, 1000))
@@ -31,8 +32,8 @@ export default function App() {
 
   const form = createForm(() => ({
     defaultValues: {
-      firstName: data?.firstName ?? '',
-      lastName: data?.lastName ?? '',
+      firstName: query.data?.firstName ?? '',
+      lastName: query.data?.lastName ?? '',
     },
     onSubmit: async ({ value }) => {
       // Do something with form data
@@ -40,9 +41,11 @@ export default function App() {
     },
   }))
 
-  if (isLoading) return <p>Loading..</p>
-
-  return null
+  return (
+    <Show when={!query.isLoading} fallback={<p>Loading..</p>}>
+      <></>
+    </Show>
+  )
 }
 ```