fix: basic-solid-query e2e test

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

@@ -34,4 +34,4 @@
     "vite-plugin-solid": "^2.11.8",
     "vite-tsconfig-paths": "^5.1.4"
   }
-}
+}

e2e/solid-start/basic-solid-query/playwright.config.ts

@@ -36,4 +36,4 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
   ],
-})
+})

e2e/solid-start/basic-solid-query/postcss.config.mjs

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+}

e2e/solid-start/basic-solid-query/src/components/DefaultCatchBoundary.tsx

@@ -5,4 +5,4 @@ import {
 
 export function DefaultCatchBoundary(props: ErrorComponentProps) {
   return <ErrorComponent {...props} />
-}
+}

e2e/solid-start/basic-solid-query/src/components/NotFound.tsx

@@ -4,7 +4,9 @@ import type { JSX } from 'solid-js'
 export function NotFound(props?: { children?: JSX.Element }) {
   return (
     <div class="space-y-2 p-2">
-      <div>{props?.children || 'The page you are looking for does not exist.'}</div>
+      <div>
+        {props?.children || 'The page you are looking for does not exist.'}
+      </div>
       <p class="flex items-center gap-2 flex-wrap">
         <button
           onClick={() => window.history.back()}
@@ -21,4 +23,4 @@ export function NotFound(props?: { children?: JSX.Element }) {
       </p>
     </div>
   )
-}
+}

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

@@ -17,6 +17,9 @@ 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 PostsPostIdRouteImport } from './routes/posts.$postId'
+import { Route as ApiUsersRouteImport } from './routes/api.users'
+import { Route as PostsPostIdDeepRouteImport } from './routes/posts_.$postId.deep'
+import { Route as ApiUsersIdRouteImport } from './routes/api/users.$id'
 
 const UsersRoute = UsersRouteImport.update({
   id: '/users',
@@ -58,35 +61,59 @@ const PostsPostIdRoute = PostsPostIdRouteImport.update({
   path: '/$postId',
   getParentRoute: () => PostsRoute,
 } as any)
+const ApiUsersRoute = ApiUsersRouteImport.update({
+  id: '/api/users',
+  path: '/api/users',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const PostsPostIdDeepRoute = PostsPostIdDeepRouteImport.update({
+  id: '/posts_/$postId/deep',
+  path: '/posts/$postId/deep',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiUsersIdRoute = ApiUsersIdRouteImport.update({
+  id: '/$id',
+  path: '/$id',
+  getParentRoute: () => ApiUsersRoute,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/deferred': typeof DeferredRoute
   '/posts': typeof PostsRouteWithChildren
   '/users': typeof UsersRouteWithChildren
+  '/api/users': typeof ApiUsersRouteWithChildren
   '/posts/$postId': typeof PostsPostIdRoute
   '/users/$userId': typeof UsersUserIdRoute
   '/posts/': typeof PostsIndexRoute
   '/users/': typeof UsersIndexRoute
+  '/api/users/$id': typeof ApiUsersIdRoute
+  '/posts/$postId/deep': typeof PostsPostIdDeepRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/deferred': typeof DeferredRoute
+  '/api/users': typeof ApiUsersRouteWithChildren
   '/posts/$postId': typeof PostsPostIdRoute
   '/users/$userId': typeof UsersUserIdRoute
   '/posts': typeof PostsIndexRoute
   '/users': typeof UsersIndexRoute
+  '/api/users/$id': typeof ApiUsersIdRoute
+  '/posts/$postId/deep': typeof PostsPostIdDeepRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/deferred': typeof DeferredRoute
   '/posts': typeof PostsRouteWithChildren
   '/users': typeof UsersRouteWithChildren
+  '/api/users': typeof ApiUsersRouteWithChildren
   '/posts/$postId': typeof PostsPostIdRoute
   '/users/$userId': typeof UsersUserIdRoute
   '/posts/': typeof PostsIndexRoute
   '/users/': typeof UsersIndexRoute
+  '/api/users/$id': typeof ApiUsersIdRoute
+  '/posts_/$postId/deep': typeof PostsPostIdDeepRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -95,35 +122,46 @@ export interface FileRouteTypes {
     | '/deferred'
     | '/posts'
     | '/users'
+    | '/api/users'
     | '/posts/$postId'
     | '/users/$userId'
     | '/posts/'
     | '/users/'
+    | '/api/users/$id'
+    | '/posts/$postId/deep'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
     | '/deferred'
+    | '/api/users'
     | '/posts/$postId'
     | '/users/$userId'
     | '/posts'
     | '/users'
+    | '/api/users/$id'
+    | '/posts/$postId/deep'
   id:
     | '__root__'
     | '/'
     | '/deferred'
     | '/posts'
     | '/users'
+    | '/api/users'
     | '/posts/$postId'
     | '/users/$userId'
     | '/posts/'
     | '/users/'
+    | '/api/users/$id'
+    | '/posts_/$postId/deep'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   DeferredRoute: typeof DeferredRoute
   PostsRoute: typeof PostsRouteWithChildren
   UsersRoute: typeof UsersRouteWithChildren
+  ApiUsersRoute: typeof ApiUsersRouteWithChildren
+  PostsPostIdDeepRoute: typeof PostsPostIdDeepRoute
 }
 
 declare module '@tanstack/solid-router' {
@@ -184,6 +222,27 @@ declare module '@tanstack/solid-router' {
       preLoaderRoute: typeof PostsPostIdRouteImport
       parentRoute: typeof PostsRoute
     }
+    '/api/users': {
+      id: '/api/users'
+      path: '/api/users'
+      fullPath: '/api/users'
+      preLoaderRoute: typeof ApiUsersRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/posts_/$postId/deep': {
+      id: '/posts_/$postId/deep'
+      path: '/posts/$postId/deep'
+      fullPath: '/posts/$postId/deep'
+      preLoaderRoute: typeof PostsPostIdDeepRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/users/$id': {
+      id: '/api/users/$id'
+      path: '/$id'
+      fullPath: '/api/users/$id'
+      preLoaderRoute: typeof ApiUsersIdRouteImport
+      parentRoute: typeof ApiUsersRoute
+    }
   }
 }
 
@@ -211,11 +270,25 @@ const UsersRouteChildren: UsersRouteChildren = {
 
 const UsersRouteWithChildren = UsersRoute._addFileChildren(UsersRouteChildren)
 
+interface ApiUsersRouteChildren {
+  ApiUsersIdRoute: typeof ApiUsersIdRoute
+}
+
+const ApiUsersRouteChildren: ApiUsersRouteChildren = {
+  ApiUsersIdRoute: ApiUsersIdRoute,
+}
+
+const ApiUsersRouteWithChildren = ApiUsersRoute._addFileChildren(
+  ApiUsersRouteChildren,
+)
+
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   DeferredRoute: DeferredRoute,
   PostsRoute: PostsRouteWithChildren,
   UsersRoute: UsersRouteWithChildren,
+  ApiUsersRoute: ApiUsersRouteWithChildren,
+  PostsPostIdDeepRoute: PostsPostIdDeepRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

e2e/solid-start/basic-solid-query/src/router.tsx

@@ -27,4 +27,4 @@ export function getRouter() {
     queryClient,
   })
   return router
-}
+}

e2e/solid-start/basic-solid-query/src/routes/__root.tsx

@@ -122,4 +122,4 @@ function RootDocument(props: { children?: any }) {
       </body>
     </html>
   )
-}
+}

e2e/solid-start/basic-solid-query/src/routes/api.users.ts

@@ -0,0 +1,25 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { json } from '@tanstack/solid-start'
+import axios from 'redaxios'
+import type { User } from '../utils/users'
+
+let queryURL = 'https://jsonplaceholder.typicode.com'
+
+if (import.meta.env.VITE_NODE_ENV === 'test') {
+  queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}`
+}
+
+export const Route = createFileRoute('/api/users')({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        console.info('Fetching users... @', request.url)
+        const res = await axios.get<Array<User>>(`${queryURL}/users`)
+        const list = res.data.slice(0, 10)
+        return json(
+          list.map((u) => ({ id: u.id, name: u.name, email: u.email })),
+        )
+      },
+    },
+  },
+})

e2e/solid-start/basic-solid-query/src/routes/api/users.$id.ts

@@ -0,0 +1,31 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import { json } from '@tanstack/solid-start'
+import axios from 'redaxios'
+import type { User } from '../../utils/users'
+
+let queryURL = 'https://jsonplaceholder.typicode.com'
+
+if (import.meta.env.VITE_NODE_ENV === 'test') {
+  queryURL = `http://localhost:${import.meta.env.VITE_EXTERNAL_PORT}`
+}
+
+export const Route = createFileRoute('/api/users/$id')({
+  server: {
+    handlers: {
+      GET: async ({ request, params }) => {
+        console.info(`Fetching users by id=${params.id}... @`, request.url)
+        try {
+          const res = await axios.get<User>(`${queryURL}/users/` + params.id)
+          return json({
+            id: res.data.id,
+            name: res.data.name,
+            email: res.data.email,
+          })
+        } catch (e) {
+          console.error(e)
+          return json({ error: 'User not found' }, { status: 404 })
+        }
+      },
+    },
+  },
+})

e2e/solid-start/basic-solid-query/src/routes/deferred.tsx

@@ -51,4 +51,4 @@ function DeferredQuery() {
       <div>Time: {data() ? new Date(data()!.time).toISOString() : ''}</div>
     </div>
   )
-}
+}

e2e/solid-start/basic-solid-query/src/routes/index.tsx

@@ -10,4 +10,4 @@ function Home() {
       <h3>Welcome Home!</h3>
     </div>
   )
-}
+}

e2e/solid-start/basic-solid-query/src/routes/posts.$postId.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/solid-query'
-import { ErrorComponent, createFileRoute } from '@tanstack/solid-router'
+import { ErrorComponent, Link, createFileRoute } from '@tanstack/solid-router'
 import { postQueryOptions } from '~/utils/posts'
 
 export const Route = createFileRoute('/posts/$postId')({
@@ -22,6 +22,16 @@ function PostComponent() {
     <div class="space-y-2">
       <h4 class="text-xl font-bold underline">{postQuery.data?.title}</h4>
       <div class="text-sm">{postQuery.data?.body}</div>
+      <Link
+        to="/posts/$postId/deep"
+        params={{
+          postId: postQuery.data?.id ?? '',
+        }}
+        activeProps={{ class: 'text-black font-bold' }}
+        class="inline-block py-1 text-blue-800 hover:text-blue-600"
+      >
+        Deep View
+      </Link>
     </div>
   )
-}
+}

e2e/solid-start/basic-solid-query/src/routes/posts.index.tsx

@@ -6,4 +6,4 @@ export const Route = createFileRoute('/posts/')({
 
 function PostsIndexComponent() {
   return <div>Select a post.</div>
-}
+}

e2e/solid-start/basic-solid-query/src/routes/posts.tsx

@@ -45,4 +45,4 @@ function PostsComponent() {
       <Outlet />
     </div>
   )
-}
+}

e2e/solid-start/basic-solid-query/src/routes/posts_.$postId.deep.tsx

@@ -0,0 +1,36 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+import { useQuery } from '@tanstack/solid-query'
+import { postQueryOptions } from '../utils/posts'
+import { PostErrorComponent } from './posts.$postId'
+
+export const Route = createFileRoute('/posts_/$postId/deep')({
+  loader: async ({ params: { postId }, context }) => {
+    const data = await context.queryClient.ensureQueryData(
+      postQueryOptions(postId),
+    )
+
+    return {
+      title: data.title,
+    }
+  },
+  head: ({ loaderData }) => ({
+    meta: loaderData ? [{ title: loaderData.title }] : undefined,
+  }),
+  errorComponent: PostErrorComponent,
+  component: PostDeepComponent,
+})
+
+function PostDeepComponent() {
+  const params = Route.useParams()
+  const postQuery = useQuery(() => postQueryOptions(params().postId))
+
+  return (
+    <div class="p-2 space-y-2">
+      <Link to="/posts" class="block py-1 text-blue-800 hover:text-blue-600">
+        ← All Posts
+      </Link>
+      <h4 class="text-xl font-bold underline">{postQuery.data?.title}</h4>
+      <div class="text-sm">{postQuery.data?.body}</div>
+    </div>
+  )
+}