fix: wait for async loaders before executing head functions

e2e/solid-start/basic-solid-query/package.json

@@ -8,7 +8,7 @@
     "dev:e2e": "vite dev",
     "build": "vite build && tsc --noEmit",
     "preview": "vite preview",
-    "start": "pnpx srvx --prod -s ../client dist/server/server.js",
+    "start": "pnpm dlx srvx --prod -s ../client dist/server/server.js",
     "test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
   },
   "dependencies": {

e2e/solid-start/basic-solid-query/src/routeTree.gen.ts

@@ -12,16 +12,19 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as UsersRouteImport } from './routes/users'
 import { Route as SuspenseTransitionRouteImport } from './routes/suspense-transition'
 import { Route as PostsRouteImport } from './routes/posts'
+import { Route as FakeLoginRouteImport } from './routes/fake-login'
 import { Route as DeferredRouteImport } from './routes/deferred'
 import { Route as LayoutRouteImport } from './routes/_layout'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as UsersIndexRouteImport } from './routes/users.index'
 import { Route as PostsIndexRouteImport } from './routes/posts.index'
 import { Route as UsersUserIdRouteImport } from './routes/users.$userId'
+import { Route as TestHeadDashboardRouteImport } from './routes/test-head/dashboard'
 import { Route as PostsPostIdRouteImport } from './routes/posts.$postId'
 import { Route as ApiUsersRouteImport } from './routes/api.users'
 import { Route as LayoutLayout2RouteImport } from './routes/_layout/_layout-2'
 import { Route as TransitionCountQueryRouteImport } from './routes/transition/count/query'
+import { Route as TestHeadArticleIdRouteImport } from './routes/test-head/article.$id'
 import { Route as PostsPostIdDeepRouteImport } from './routes/posts_.$postId.deep'
 import { Route as ApiUsersIdRouteImport } from './routes/api/users.$id'
 import { Route as LayoutLayout2LayoutBRouteImport } from './routes/_layout/_layout-2/layout-b'
@@ -42,6 +45,11 @@ const PostsRoute = PostsRouteImport.update({
   path: '/posts',
   getParentRoute: () => rootRouteImport,
 } as any)
+const FakeLoginRoute = FakeLoginRouteImport.update({
+  id: '/fake-login',
+  path: '/fake-login',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const DeferredRoute = DeferredRouteImport.update({
   id: '/deferred',
   path: '/deferred',
@@ -71,6 +79,11 @@ const UsersUserIdRoute = UsersUserIdRouteImport.update({
   path: '/$userId',
   getParentRoute: () => UsersRoute,
 } as any)
+const TestHeadDashboardRoute = TestHeadDashboardRouteImport.update({
+  id: '/test-head/dashboard',
+  path: '/test-head/dashboard',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const PostsPostIdRoute = PostsPostIdRouteImport.update({
   id: '/$postId',
   path: '/$postId',
@@ -90,6 +103,11 @@ const TransitionCountQueryRoute = TransitionCountQueryRouteImport.update({
   path: '/transition/count/query',
   getParentRoute: () => rootRouteImport,
 } as any)
+const TestHeadArticleIdRoute = TestHeadArticleIdRouteImport.update({
+  id: '/test-head/article/$id',
+  path: '/test-head/article/$id',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const PostsPostIdDeepRoute = PostsPostIdDeepRouteImport.update({
   id: '/posts_/$postId/deep',
   path: '/posts/$postId/deep',
@@ -114,118 +132,139 @@ const LayoutLayout2LayoutARoute = LayoutLayout2LayoutARouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/deferred': typeof DeferredRoute
+  '/fake-login': typeof FakeLoginRoute
   '/posts': typeof PostsRouteWithChildren
   '/suspense-transition': typeof SuspenseTransitionRoute
   '/users': typeof UsersRouteWithChildren
   '/api/users': typeof ApiUsersRouteWithChildren
   '/posts/$postId': typeof PostsPostIdRoute
+  '/test-head/dashboard': typeof TestHeadDashboardRoute
   '/users/$userId': typeof UsersUserIdRoute
   '/posts/': typeof PostsIndexRoute
   '/users/': typeof UsersIndexRoute
   '/layout-a': typeof LayoutLayout2LayoutARoute
   '/layout-b': typeof LayoutLayout2LayoutBRoute
   '/api/users/$id': typeof ApiUsersIdRoute
   '/posts/$postId/deep': typeof PostsPostIdDeepRoute
+  '/test-head/article/$id': typeof TestHeadArticleIdRoute
   '/transition/count/query': typeof TransitionCountQueryRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/deferred': typeof DeferredRoute
+  '/fake-login': typeof FakeLoginRoute
   '/suspense-transition': typeof SuspenseTransitionRoute
   '/api/users': typeof ApiUsersRouteWithChildren
   '/posts/$postId': typeof PostsPostIdRoute
+  '/test-head/dashboard': typeof TestHeadDashboardRoute
   '/users/$userId': typeof UsersUserIdRoute
   '/posts': typeof PostsIndexRoute
   '/users': typeof UsersIndexRoute
   '/layout-a': typeof LayoutLayout2LayoutARoute
   '/layout-b': typeof LayoutLayout2LayoutBRoute
   '/api/users/$id': typeof ApiUsersIdRoute
   '/posts/$postId/deep': typeof PostsPostIdDeepRoute
+  '/test-head/article/$id': typeof TestHeadArticleIdRoute
   '/transition/count/query': typeof TransitionCountQueryRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/_layout': typeof LayoutRouteWithChildren
   '/deferred': typeof DeferredRoute
+  '/fake-login': typeof FakeLoginRoute
   '/posts': typeof PostsRouteWithChildren
   '/suspense-transition': typeof SuspenseTransitionRoute
   '/users': typeof UsersRouteWithChildren
   '/_layout/_layout-2': typeof LayoutLayout2RouteWithChildren
   '/api/users': typeof ApiUsersRouteWithChildren
   '/posts/$postId': typeof PostsPostIdRoute
+  '/test-head/dashboard': typeof TestHeadDashboardRoute
   '/users/$userId': typeof UsersUserIdRoute
   '/posts/': typeof PostsIndexRoute
   '/users/': typeof UsersIndexRoute
   '/_layout/_layout-2/layout-a': typeof LayoutLayout2LayoutARoute
   '/_layout/_layout-2/layout-b': typeof LayoutLayout2LayoutBRoute
   '/api/users/$id': typeof ApiUsersIdRoute
   '/posts_/$postId/deep': typeof PostsPostIdDeepRoute
+  '/test-head/article/$id': typeof TestHeadArticleIdRoute
   '/transition/count/query': typeof TransitionCountQueryRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
     | '/deferred'
+    | '/fake-login'
     | '/posts'
     | '/suspense-transition'
     | '/users'
     | '/api/users'
     | '/posts/$postId'
+    | '/test-head/dashboard'
     | '/users/$userId'
     | '/posts/'
     | '/users/'
     | '/layout-a'
     | '/layout-b'
     | '/api/users/$id'
     | '/posts/$postId/deep'
+    | '/test-head/article/$id'
     | '/transition/count/query'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
     | '/deferred'
+    | '/fake-login'
     | '/suspense-transition'
     | '/api/users'
     | '/posts/$postId'
+    | '/test-head/dashboard'
     | '/users/$userId'
     | '/posts'
     | '/users'
     | '/layout-a'
     | '/layout-b'
     | '/api/users/$id'
     | '/posts/$postId/deep'
+    | '/test-head/article/$id'
     | '/transition/count/query'
   id:
     | '__root__'
     | '/'
     | '/_layout'
     | '/deferred'
+    | '/fake-login'
     | '/posts'
     | '/suspense-transition'
     | '/users'
     | '/_layout/_layout-2'
     | '/api/users'
     | '/posts/$postId'
+    | '/test-head/dashboard'
     | '/users/$userId'
     | '/posts/'
     | '/users/'
     | '/_layout/_layout-2/layout-a'
     | '/_layout/_layout-2/layout-b'
     | '/api/users/$id'
     | '/posts_/$postId/deep'
+    | '/test-head/article/$id'
     | '/transition/count/query'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   LayoutRoute: typeof LayoutRouteWithChildren
   DeferredRoute: typeof DeferredRoute
+  FakeLoginRoute: typeof FakeLoginRoute
   PostsRoute: typeof PostsRouteWithChildren
   SuspenseTransitionRoute: typeof SuspenseTransitionRoute
   UsersRoute: typeof UsersRouteWithChildren
   ApiUsersRoute: typeof ApiUsersRouteWithChildren
+  TestHeadDashboardRoute: typeof TestHeadDashboardRoute
   PostsPostIdDeepRoute: typeof PostsPostIdDeepRoute
+  TestHeadArticleIdRoute: typeof TestHeadArticleIdRoute
   TransitionCountQueryRoute: typeof TransitionCountQueryRoute
 }
 
@@ -252,6 +291,13 @@ declare module '@tanstack/solid-router' {
       preLoaderRoute: typeof PostsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/fake-login': {
+      id: '/fake-login'
+      path: '/fake-login'
+      fullPath: '/fake-login'
+      preLoaderRoute: typeof FakeLoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/deferred': {
       id: '/deferred'
       path: '/deferred'
@@ -294,6 +340,13 @@ declare module '@tanstack/solid-router' {
       preLoaderRoute: typeof UsersUserIdRouteImport
       parentRoute: typeof UsersRoute
     }
+    '/test-head/dashboard': {
+      id: '/test-head/dashboard'
+      path: '/test-head/dashboard'
+      fullPath: '/test-head/dashboard'
+      preLoaderRoute: typeof TestHeadDashboardRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/posts/$postId': {
       id: '/posts/$postId'
       path: '/$postId'
@@ -322,6 +375,13 @@ declare module '@tanstack/solid-router' {
       preLoaderRoute: typeof TransitionCountQueryRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/test-head/article/$id': {
+      id: '/test-head/article/$id'
+      path: '/test-head/article/$id'
+      fullPath: '/test-head/article/$id'
+      preLoaderRoute: typeof TestHeadArticleIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/posts_/$postId/deep': {
       id: '/posts_/$postId/deep'
       path: '/posts/$postId/deep'
@@ -418,11 +478,14 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   LayoutRoute: LayoutRouteWithChildren,
   DeferredRoute: DeferredRoute,
+  FakeLoginRoute: FakeLoginRoute,
   PostsRoute: PostsRouteWithChildren,
   SuspenseTransitionRoute: SuspenseTransitionRoute,
   UsersRoute: UsersRouteWithChildren,
   ApiUsersRoute: ApiUsersRouteWithChildren,
+  TestHeadDashboardRoute: TestHeadDashboardRoute,
   PostsPostIdDeepRoute: PostsPostIdDeepRoute,
+  TestHeadArticleIdRoute: TestHeadArticleIdRoute,
   TransitionCountQueryRoute: TransitionCountQueryRoute,
 }
 export const routeTree = rootRouteImport

e2e/solid-start/basic-solid-query/src/routes/fake-login.tsx

@@ -0,0 +1,43 @@
+import { useQueryClient } from '@tanstack/solid-query'
+import { createFileRoute, useNavigate } from '@tanstack/solid-router'
+import { authQy } from '~/utils/fake-auth'
+
+export const Route = createFileRoute('/fake-login')({
+  ssr: false,
+  head: () => ({
+    meta: [{ title: 'Login' }],
+  }),
+  component: LoginPage,
+})
+
+function LoginPage() {
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+
+  const handleLogin = () => {
+    localStorage.setItem('auth', 'true')
+
+    // Critical: Invalidate auth query to trigger refetch
+    queryClient.invalidateQueries({ queryKey: authQy.queryKey })
+
+    // Navigate to dashboard, REPLACING login in history
+    navigate({ to: '/test-head/dashboard', replace: true })
+  }
+
+  return (
+    <div class="p-4" data-testid="login-page">
+      <h1 class="text-2xl font-bold" data-testid="login-title">
+        Login Page
+      </h1>
+      <p class="mt-4">Click below to simulate login</p>
+      <button
+        type="button"
+        onClick={handleLogin}
+        class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        data-testid="login-button"
+      >
+        Simulate Login →
+      </button>
+    </div>
+  )
+}

e2e/solid-start/basic-solid-query/src/routes/test-head/article.$id.tsx

@@ -0,0 +1,86 @@
+import { useQuery } from '@tanstack/solid-query'
+import { createFileRoute, Link } from '@tanstack/solid-router'
+import { Show } from 'solid-js'
+import { authQy, isAuthed } from '~/utils/fake-auth'
+
+// Simulate fetching article - returns null if not authenticated
+const fetchArticle = async (id: string) => {
+  // Simulate API call delay
+  await new Promise((resolve) => setTimeout(resolve, 200))
+
+  const isLoggedIn = isAuthed()
+
+  if (!isLoggedIn) {
+    return null
+  }
+
+  return {
+    title: `Article ${id} Title`,
+    content: `This is the content of article ${id}. Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
+  }
+}
+
+export const Route = createFileRoute('/test-head/article/$id')({
+  ssr: false,
+  loader: async ({ params }) => {
+    const data = await fetchArticle(params.id)
+    return data
+  },
+
+  head: ({ loaderData }) => {
+    const title = loaderData?.title || 'Article Not Found'
+    console.log('[!] head function: title =', title)
+    return {
+      meta: [{ title }],
+    }
+  },
+
+  component: ArticlePage,
+})
+
+function ArticlePage() {
+  const data = Route.useLoaderData()
+  const authQuery = useQuery(() => authQy)
+
+  return (
+    <Show
+      when={authQuery.data === true}
+      fallback={
+        <div class="p-4" data-testid="article-not-found">
+          <h1 class="text-2xl font-bold text-red-600">Article not found</h1>
+          <p class="mt-2">You need to be authenticated to view this article.</p>
+          <div class="mt-4">
+            <Link
+              to="/fake-login"
+              class="inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+              data-testid="go-to-login-link"
+            >
+              Go to Login →
+            </Link>
+          </div>
+        </div>
+      }
+    >
+      <div class="p-4" data-testid="article-content">
+        <h1 class="text-2xl font-bold" data-testid="article-title">
+          {data()?.title}
+        </h1>
+        <p class="mt-4">{data()?.content}</p>
+
+        <div class="mt-4 space-x-2">
+          <button
+            type="button"
+            onClick={() => {
+              localStorage.removeItem('auth')
+              window.location.reload()
+            }}
+            class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+            data-testid="logout-button"
+          >
+            Simulate Logout
+          </button>
+        </div>
+      </div>
+    </Show>
+  )
+}