+
+ Home
+ {' '}
+
+ Posts
+ {' '}
+
+ Users
+ {' '}
+
+ Layout
+ {' '}
+
+ Deferred
+ {' '}
+
+ This Route Does Not Exist
+
+
+ + {children} +
+
+ )
+}
diff --git a/e2e/solid-start/basic-solid-query/src/routes/_layout/_layout-2.tsx b/e2e/solid-start/basic-solid-query/src/routes/_layout/_layout-2.tsx
new file mode 100644
index 0000000000..a0c65e6fe7
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/routes/_layout/_layout-2.tsx
@@ -0,0 +1,34 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_layout/_layout-2')({
+ component: LayoutComponent,
+})
+
+function LayoutComponent() {
+ return (
+ I'm a layout
+
+
+
+
+ )
+}
diff --git a/e2e/solid-start/basic-solid-query/src/routes/_layout/_layout-2/layout-a.tsx b/e2e/solid-start/basic-solid-query/src/routes/_layout/_layout-2/layout-a.tsx
new file mode 100644
index 0000000000..139c891946
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/routes/_layout/_layout-2/layout-a.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_layout/_layout-2/layout-a')({
+ component: LayoutAComponent,
+})
+
+function LayoutAComponent() {
+ return I'm a nested layout
+
+
+ Layout A
+
+
+ Layout B
+
+
+
+
+ I'm A!
+}
diff --git a/e2e/solid-start/basic-solid-query/src/routes/_layout/_layout-2/layout-b.tsx b/e2e/solid-start/basic-solid-query/src/routes/_layout/_layout-2/layout-b.tsx
new file mode 100644
index 0000000000..c9b5d7fffd
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/routes/_layout/_layout-2/layout-b.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_layout/_layout-2/layout-b')({
+ component: LayoutBComponent,
+})
+
+function LayoutBComponent() {
+ return I'm B!
+}
diff --git a/e2e/solid-start/basic-solid-query/src/routes/api.users.ts b/e2e/solid-start/basic-solid-query/src/routes/api.users.ts
new file mode 100644
index 0000000000..f37bf0db1b
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/routes/api.users.ts
@@ -0,0 +1,17 @@
+import { json } from '@tanstack/solid-start'
+import { createAPIFileRoute } from '@tanstack/solid-start/api'
+import axios from 'redaxios'
+import type { User } from '../utils/users'
+
+export const APIRoute = createAPIFileRoute('/api/users')({
+ GET: async ({ request }) => {
+ console.info('Fetching users... @', request.url)
+ const res = await axios.get
+
+
+
+ )
+}
+
+function DeferredQuery() {
+ const deferredQuery = createQuery(() => deferredQueryOptions())
+
+ return (
+ Count: {count()}
+
+
+
+
+
+ )
+}
diff --git a/e2e/solid-start/basic-solid-query/src/routes/index.tsx b/e2e/solid-start/basic-solid-query/src/routes/index.tsx
new file mode 100644
index 0000000000..a128aeca0e
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/routes/index.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({
+ component: Home,
+})
+
+function Home() {
+ return (
+ Deferred Query
+Status: {deferredQuery.data?.status}
+ Message: {deferredQuery.data?.message}
+ Time: {deferredQuery.data?.time.toISOString()}
+
+
+ )
+}
diff --git a/e2e/solid-start/basic-solid-query/src/routes/posts.$postId.tsx b/e2e/solid-start/basic-solid-query/src/routes/posts.$postId.tsx
new file mode 100644
index 0000000000..331775f0d4
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/routes/posts.$postId.tsx
@@ -0,0 +1,52 @@
+import { ErrorComponent, Link, createFileRoute } from '@tanstack/solid-router'
+import { createQuery } from '@tanstack/solid-query'
+import type { ErrorComponentProps } from '@tanstack/solid-router'
+
+import { postQueryOptions } from '~/utils/posts'
+import { NotFound } from '~/components/NotFound'
+
+export const Route = createFileRoute('/posts/$postId')({
+ 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,
+ notFoundComponent: () => {
+ return Welcome Home!!!
+
+
+ )
+}
diff --git a/e2e/solid-start/basic-solid-query/src/routes/posts.index.tsx b/e2e/solid-start/basic-solid-query/src/routes/posts.index.tsx
new file mode 100644
index 0000000000..33d0386c19
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/routes/posts.index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts/')({
+ component: PostsIndexComponent,
+})
+
+function PostsIndexComponent() {
+ return {postQuery.data?.title}
+{postQuery.data?.body}
+
+ Deep View
+
+ Select a post.
+}
diff --git a/e2e/solid-start/basic-solid-query/src/routes/posts.tsx b/e2e/solid-start/basic-solid-query/src/routes/posts.tsx
new file mode 100644
index 0000000000..3c61a1a929
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/routes/posts.tsx
@@ -0,0 +1,44 @@
+import { createQuery } from '@tanstack/solid-query'
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+
+import { postsQueryOptions } from '~/utils/posts'
+
+export const Route = createFileRoute('/posts')({
+ loader: async ({ context }) => {
+ await context.queryClient.ensureQueryData(postsQueryOptions())
+ },
+ head: () => ({ meta: [{ title: 'Posts' }] }),
+ component: PostsComponent,
+})
+
+function PostsComponent() {
+ const postsQuery = createQuery(() => postsQueryOptions())
+
+ return (
+
+
+
+ )
+}
diff --git a/e2e/solid-start/basic-solid-query/src/routes/posts_.$postId.deep.tsx b/e2e/solid-start/basic-solid-query/src/routes/posts_.$postId.deep.tsx
new file mode 100644
index 0000000000..0d84e1f2d7
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/routes/posts_.$postId.deep.tsx
@@ -0,0 +1,36 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+import { createQuery } 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 = createQuery(() => postQueryOptions(params().postId))
+
+ return (
+ -
+ {[
+ ...postsQuery.data!,
+ { id: 'i-do-not-exist', title: 'Non-existent Post' },
+ ].map((post) => {
+ return (
+
-
+
+ {post.title.substring(0, 20)}+ +
+ )
+ })}
+
+
+
+ ← All Posts
+
+
+ )
+}
diff --git a/e2e/solid-start/basic-solid-query/src/routes/redirect.tsx b/e2e/solid-start/basic-solid-query/src/routes/redirect.tsx
new file mode 100644
index 0000000000..ca017f0635
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/routes/redirect.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute, redirect } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/redirect')({
+ beforeLoad: async () => {
+ throw redirect({
+ to: '/posts',
+ })
+ },
+})
diff --git a/e2e/solid-start/basic-solid-query/src/routes/users.$userId.tsx b/e2e/solid-start/basic-solid-query/src/routes/users.$userId.tsx
new file mode 100644
index 0000000000..fe9f58faf3
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/routes/users.$userId.tsx
@@ -0,0 +1,34 @@
+import { createQuery } from '@tanstack/solid-query'
+import { ErrorComponent, createFileRoute } from '@tanstack/solid-router'
+import type { ErrorComponentProps } from '@tanstack/solid-router'
+
+import { NotFound } from '~/components/NotFound'
+import { userQueryOptions } from '~/utils/users'
+
+export const Route = createFileRoute('/users/$userId')({
+ loader: async ({ context, params: { userId } }) => {
+ await context.queryClient.ensureQueryData(userQueryOptions(userId))
+ },
+ errorComponent: UserErrorComponent,
+ component: UserComponent,
+ notFoundComponent: () => {
+ return {postQuery.data?.title}
+{postQuery.data?.body}
+
+
+ )
+}
diff --git a/e2e/solid-start/basic-solid-query/src/routes/users.index.tsx b/e2e/solid-start/basic-solid-query/src/routes/users.index.tsx
new file mode 100644
index 0000000000..bbc96801a9
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/routes/users.index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/users/')({
+ component: UsersIndexComponent,
+})
+
+function UsersIndexComponent() {
+ return {user?.name}
+{user?.email}
+ Select a user.
+}
diff --git a/e2e/solid-start/basic-solid-query/src/routes/users.tsx b/e2e/solid-start/basic-solid-query/src/routes/users.tsx
new file mode 100644
index 0000000000..92f595b171
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/routes/users.tsx
@@ -0,0 +1,43 @@
+import { createQuery } from '@tanstack/solid-query'
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+
+import { usersQueryOptions } from '~/utils/users'
+
+export const Route = createFileRoute('/users')({
+ loader: async ({ context }) => {
+ await context.queryClient.ensureQueryData(usersQueryOptions())
+ },
+ component: UsersComponent,
+})
+
+function UsersComponent() {
+ const usersQuery = createQuery(() => usersQueryOptions())
+
+ return (
+
+
+
+ )
+}
diff --git a/e2e/solid-start/basic-solid-query/src/ssr.tsx b/e2e/solid-start/basic-solid-query/src/ssr.tsx
new file mode 100644
index 0000000000..6d10bea05f
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/ssr.tsx
@@ -0,0 +1,12 @@
+import {
+ createStartHandler,
+ defaultStreamHandler,
+} from '@tanstack/solid-start/server'
+import { getRouterManifest } from '@tanstack/solid-start/router-manifest'
+
+import { createRouter } from './router'
+
+export default createStartHandler({
+ createRouter,
+ getRouterManifest,
+})(defaultStreamHandler)
diff --git a/e2e/solid-start/basic-solid-query/src/styles/app.css b/e2e/solid-start/basic-solid-query/src/styles/app.css
new file mode 100644
index 0000000000..c53c870665
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/styles/app.css
@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ html {
+ color-scheme: light dark;
+ }
+
+ * {
+ @apply border-gray-200 dark:border-gray-800;
+ }
+
+ html,
+ body {
+ @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
+ }
+
+ .using-mouse * {
+ outline: none !important;
+ }
+}
diff --git a/e2e/solid-start/basic-solid-query/src/utils/posts.tsx b/e2e/solid-start/basic-solid-query/src/utils/posts.tsx
new file mode 100644
index 0000000000..d3ab71d525
--- /dev/null
+++ b/e2e/solid-start/basic-solid-query/src/utils/posts.tsx
@@ -0,0 +1,49 @@
+import { queryOptions } from '@tanstack/solid-query'
+import { notFound } from '@tanstack/solid-router'
+import { createServerFn } from '@tanstack/solid-start'
+import axios from 'redaxios'
+
+export type PostType = {
+ id: string
+ title: string
+ body: string
+}
+
+export const fetchPosts = createServerFn({ method: 'GET' }).handler(
+ async () => {
+ console.info('Fetching posts...')
+ return axios
+ .get-
+ {[
+ ...usersQuery.data!,
+ { id: 'i-do-not-exist', name: 'Non-existent User', email: '' },
+ ].map((user) => {
+ return (
+
-
+
+ {user.name}+ +
+ )
+ })}
+
+
+
+ )
+}
diff --git a/examples/solid/start-basic-solid-query/src/components/NotFound.tsx b/examples/solid/start-basic-solid-query/src/components/NotFound.tsx
new file mode 100644
index 0000000000..ca4c1960fa
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/components/NotFound.tsx
@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/solid-router'
+
+export function NotFound({ children }: { children?: any }) {
+ return (
+
+
+ {isRoot() ? (
+
+ Home
+
+ ) : (
+ {
+ e.preventDefault()
+ window.history.back()
+ }}
+ >
+ Go Back
+
+ )}
+
+
+
+ )
+}
diff --git a/examples/solid/start-basic-solid-query/src/routeTree.gen.ts b/examples/solid/start-basic-solid-query/src/routeTree.gen.ts
new file mode 100644
index 0000000000..3a3b2216ad
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/routeTree.gen.ts
@@ -0,0 +1,483 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as RedirectImport } from './routes/redirect'
+import { Route as DeferredImport } from './routes/deferred'
+import { Route as PathlessLayoutImport } from './routes/_pathlessLayout'
+import { Route as UsersRouteImport } from './routes/users.route'
+import { Route as PostsRouteImport } from './routes/posts.route'
+import { Route as IndexImport } from './routes/index'
+import { Route as UsersIndexImport } from './routes/users.index'
+import { Route as PostsIndexImport } from './routes/posts.index'
+import { Route as UsersUserIdImport } from './routes/users.$userId'
+import { Route as PostsPostIdImport } from './routes/posts.$postId'
+import { Route as PathlessLayoutNestedLayoutImport } from './routes/_pathlessLayout/_nested-layout'
+import { Route as PostsPostIdDeepImport } from './routes/posts_.$postId.deep'
+import { Route as PathlessLayoutNestedLayoutRouteBImport } from './routes/_pathlessLayout/_nested-layout/route-b'
+import { Route as PathlessLayoutNestedLayoutRouteAImport } from './routes/_pathlessLayout/_nested-layout/route-a'
+
+// Create/Update Routes
+
+const RedirectRoute = RedirectImport.update({
+ id: '/redirect',
+ path: '/redirect',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const DeferredRoute = DeferredImport.update({
+ id: '/deferred',
+ path: '/deferred',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const PathlessLayoutRoute = PathlessLayoutImport.update({
+ id: '/_pathlessLayout',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const UsersRouteRoute = UsersRouteImport.update({
+ id: '/users',
+ path: '/users',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const PostsRouteRoute = PostsRouteImport.update({
+ id: '/posts',
+ path: '/posts',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const UsersIndexRoute = UsersIndexImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => UsersRouteRoute,
+} as any)
+
+const PostsIndexRoute = PostsIndexImport.update({
+ id: '/',
+ path: '/',
+ getParentRoute: () => PostsRouteRoute,
+} as any)
+
+const UsersUserIdRoute = UsersUserIdImport.update({
+ id: '/$userId',
+ path: '/$userId',
+ getParentRoute: () => UsersRouteRoute,
+} as any)
+
+const PostsPostIdRoute = PostsPostIdImport.update({
+ id: '/$postId',
+ path: '/$postId',
+ getParentRoute: () => PostsRouteRoute,
+} as any)
+
+const PathlessLayoutNestedLayoutRoute = PathlessLayoutNestedLayoutImport.update(
+ {
+ id: '/_nested-layout',
+ getParentRoute: () => PathlessLayoutRoute,
+ } as any,
+)
+
+const PostsPostIdDeepRoute = PostsPostIdDeepImport.update({
+ id: '/posts_/$postId/deep',
+ path: '/posts/$postId/deep',
+ getParentRoute: () => rootRoute,
+} as any)
+
+const PathlessLayoutNestedLayoutRouteBRoute =
+ PathlessLayoutNestedLayoutRouteBImport.update({
+ id: '/route-b',
+ path: '/route-b',
+ getParentRoute: () => PathlessLayoutNestedLayoutRoute,
+ } as any)
+
+const PathlessLayoutNestedLayoutRouteARoute =
+ PathlessLayoutNestedLayoutRouteAImport.update({
+ id: '/route-a',
+ path: '/route-a',
+ getParentRoute: () => PathlessLayoutNestedLayoutRoute,
+ } as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/solid-router' {
+ interface FileRoutesByPath {
+ '/': {
+ id: '/'
+ path: '/'
+ fullPath: '/'
+ preLoaderRoute: typeof IndexImport
+ parentRoute: typeof rootRoute
+ }
+ '/posts': {
+ id: '/posts'
+ path: '/posts'
+ fullPath: '/posts'
+ preLoaderRoute: typeof PostsRouteImport
+ parentRoute: typeof rootRoute
+ }
+ '/users': {
+ id: '/users'
+ path: '/users'
+ fullPath: '/users'
+ preLoaderRoute: typeof UsersRouteImport
+ parentRoute: typeof rootRoute
+ }
+ '/_pathlessLayout': {
+ id: '/_pathlessLayout'
+ path: ''
+ fullPath: ''
+ preLoaderRoute: typeof PathlessLayoutImport
+ parentRoute: typeof rootRoute
+ }
+ '/deferred': {
+ id: '/deferred'
+ path: '/deferred'
+ fullPath: '/deferred'
+ preLoaderRoute: typeof DeferredImport
+ parentRoute: typeof rootRoute
+ }
+ '/redirect': {
+ id: '/redirect'
+ path: '/redirect'
+ fullPath: '/redirect'
+ preLoaderRoute: typeof RedirectImport
+ parentRoute: typeof rootRoute
+ }
+ '/_pathlessLayout/_nested-layout': {
+ id: '/_pathlessLayout/_nested-layout'
+ path: ''
+ fullPath: ''
+ preLoaderRoute: typeof PathlessLayoutNestedLayoutImport
+ parentRoute: typeof PathlessLayoutImport
+ }
+ '/posts/$postId': {
+ id: '/posts/$postId'
+ path: '/$postId'
+ fullPath: '/posts/$postId'
+ preLoaderRoute: typeof PostsPostIdImport
+ parentRoute: typeof PostsRouteImport
+ }
+ '/users/$userId': {
+ id: '/users/$userId'
+ path: '/$userId'
+ fullPath: '/users/$userId'
+ preLoaderRoute: typeof UsersUserIdImport
+ parentRoute: typeof UsersRouteImport
+ }
+ '/posts/': {
+ id: '/posts/'
+ path: '/'
+ fullPath: '/posts/'
+ preLoaderRoute: typeof PostsIndexImport
+ parentRoute: typeof PostsRouteImport
+ }
+ '/users/': {
+ id: '/users/'
+ path: '/'
+ fullPath: '/users/'
+ preLoaderRoute: typeof UsersIndexImport
+ parentRoute: typeof UsersRouteImport
+ }
+ '/_pathlessLayout/_nested-layout/route-a': {
+ id: '/_pathlessLayout/_nested-layout/route-a'
+ path: '/route-a'
+ fullPath: '/route-a'
+ preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteAImport
+ parentRoute: typeof PathlessLayoutNestedLayoutImport
+ }
+ '/_pathlessLayout/_nested-layout/route-b': {
+ id: '/_pathlessLayout/_nested-layout/route-b'
+ path: '/route-b'
+ fullPath: '/route-b'
+ preLoaderRoute: typeof PathlessLayoutNestedLayoutRouteBImport
+ parentRoute: typeof PathlessLayoutNestedLayoutImport
+ }
+ '/posts_/$postId/deep': {
+ id: '/posts_/$postId/deep'
+ path: '/posts/$postId/deep'
+ fullPath: '/posts/$postId/deep'
+ preLoaderRoute: typeof PostsPostIdDeepImport
+ parentRoute: typeof rootRoute
+ }
+ }
+}
+
+// Create and export the route tree
+
+interface PostsRouteRouteChildren {
+ PostsPostIdRoute: typeof PostsPostIdRoute
+ PostsIndexRoute: typeof PostsIndexRoute
+}
+
+const PostsRouteRouteChildren: PostsRouteRouteChildren = {
+ PostsPostIdRoute: PostsPostIdRoute,
+ PostsIndexRoute: PostsIndexRoute,
+}
+
+const PostsRouteRouteWithChildren = PostsRouteRoute._addFileChildren(
+ PostsRouteRouteChildren,
+)
+
+interface UsersRouteRouteChildren {
+ UsersUserIdRoute: typeof UsersUserIdRoute
+ UsersIndexRoute: typeof UsersIndexRoute
+}
+
+const UsersRouteRouteChildren: UsersRouteRouteChildren = {
+ UsersUserIdRoute: UsersUserIdRoute,
+ UsersIndexRoute: UsersIndexRoute,
+}
+
+const UsersRouteRouteWithChildren = UsersRouteRoute._addFileChildren(
+ UsersRouteRouteChildren,
+)
+
+interface PathlessLayoutNestedLayoutRouteChildren {
+ PathlessLayoutNestedLayoutRouteARoute: typeof PathlessLayoutNestedLayoutRouteARoute
+ PathlessLayoutNestedLayoutRouteBRoute: typeof PathlessLayoutNestedLayoutRouteBRoute
+}
+
+const PathlessLayoutNestedLayoutRouteChildren: PathlessLayoutNestedLayoutRouteChildren =
+ {
+ PathlessLayoutNestedLayoutRouteARoute:
+ PathlessLayoutNestedLayoutRouteARoute,
+ PathlessLayoutNestedLayoutRouteBRoute:
+ PathlessLayoutNestedLayoutRouteBRoute,
+ }
+
+const PathlessLayoutNestedLayoutRouteWithChildren =
+ PathlessLayoutNestedLayoutRoute._addFileChildren(
+ PathlessLayoutNestedLayoutRouteChildren,
+ )
+
+interface PathlessLayoutRouteChildren {
+ PathlessLayoutNestedLayoutRoute: typeof PathlessLayoutNestedLayoutRouteWithChildren
+}
+
+const PathlessLayoutRouteChildren: PathlessLayoutRouteChildren = {
+ PathlessLayoutNestedLayoutRoute: PathlessLayoutNestedLayoutRouteWithChildren,
+}
+
+const PathlessLayoutRouteWithChildren = PathlessLayoutRoute._addFileChildren(
+ PathlessLayoutRouteChildren,
+)
+
+export interface FileRoutesByFullPath {
+ '/': typeof IndexRoute
+ '/posts': typeof PostsRouteRouteWithChildren
+ '/users': typeof UsersRouteRouteWithChildren
+ '': typeof PathlessLayoutNestedLayoutRouteWithChildren
+ '/deferred': typeof DeferredRoute
+ '/redirect': typeof RedirectRoute
+ '/posts/$postId': typeof PostsPostIdRoute
+ '/users/$userId': typeof UsersUserIdRoute
+ '/posts/': typeof PostsIndexRoute
+ '/users/': typeof UsersIndexRoute
+ '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute
+ '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
+ '/posts/$postId/deep': typeof PostsPostIdDeepRoute
+}
+
+export interface FileRoutesByTo {
+ '/': typeof IndexRoute
+ '': typeof PathlessLayoutNestedLayoutRouteWithChildren
+ '/deferred': typeof DeferredRoute
+ '/redirect': typeof RedirectRoute
+ '/posts/$postId': typeof PostsPostIdRoute
+ '/users/$userId': typeof UsersUserIdRoute
+ '/posts': typeof PostsIndexRoute
+ '/users': typeof UsersIndexRoute
+ '/route-a': typeof PathlessLayoutNestedLayoutRouteARoute
+ '/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
+ '/posts/$postId/deep': typeof PostsPostIdDeepRoute
+}
+
+export interface FileRoutesById {
+ __root__: typeof rootRoute
+ '/': typeof IndexRoute
+ '/posts': typeof PostsRouteRouteWithChildren
+ '/users': typeof UsersRouteRouteWithChildren
+ '/_pathlessLayout': typeof PathlessLayoutRouteWithChildren
+ '/deferred': typeof DeferredRoute
+ '/redirect': typeof RedirectRoute
+ '/_pathlessLayout/_nested-layout': typeof PathlessLayoutNestedLayoutRouteWithChildren
+ '/posts/$postId': typeof PostsPostIdRoute
+ '/users/$userId': typeof UsersUserIdRoute
+ '/posts/': typeof PostsIndexRoute
+ '/users/': typeof UsersIndexRoute
+ '/_pathlessLayout/_nested-layout/route-a': typeof PathlessLayoutNestedLayoutRouteARoute
+ '/_pathlessLayout/_nested-layout/route-b': typeof PathlessLayoutNestedLayoutRouteBRoute
+ '/posts_/$postId/deep': typeof PostsPostIdDeepRoute
+}
+
+export interface FileRouteTypes {
+ fileRoutesByFullPath: FileRoutesByFullPath
+ fullPaths:
+ | '/'
+ | '/posts'
+ | '/users'
+ | ''
+ | '/deferred'
+ | '/redirect'
+ | '/posts/$postId'
+ | '/users/$userId'
+ | '/posts/'
+ | '/users/'
+ | '/route-a'
+ | '/route-b'
+ | '/posts/$postId/deep'
+ fileRoutesByTo: FileRoutesByTo
+ to:
+ | '/'
+ | ''
+ | '/deferred'
+ | '/redirect'
+ | '/posts/$postId'
+ | '/users/$userId'
+ | '/posts'
+ | '/users'
+ | '/route-a'
+ | '/route-b'
+ | '/posts/$postId/deep'
+ id:
+ | '__root__'
+ | '/'
+ | '/posts'
+ | '/users'
+ | '/_pathlessLayout'
+ | '/deferred'
+ | '/redirect'
+ | '/_pathlessLayout/_nested-layout'
+ | '/posts/$postId'
+ | '/users/$userId'
+ | '/posts/'
+ | '/users/'
+ | '/_pathlessLayout/_nested-layout/route-a'
+ | '/_pathlessLayout/_nested-layout/route-b'
+ | '/posts_/$postId/deep'
+ fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+ IndexRoute: typeof IndexRoute
+ PostsRouteRoute: typeof PostsRouteRouteWithChildren
+ UsersRouteRoute: typeof UsersRouteRouteWithChildren
+ PathlessLayoutRoute: typeof PathlessLayoutRouteWithChildren
+ DeferredRoute: typeof DeferredRoute
+ RedirectRoute: typeof RedirectRoute
+ PostsPostIdDeepRoute: typeof PostsPostIdDeepRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+ IndexRoute: IndexRoute,
+ PostsRouteRoute: PostsRouteRouteWithChildren,
+ UsersRouteRoute: UsersRouteRouteWithChildren,
+ PathlessLayoutRoute: PathlessLayoutRouteWithChildren,
+ DeferredRoute: DeferredRoute,
+ RedirectRoute: RedirectRoute,
+ PostsPostIdDeepRoute: PostsPostIdDeepRoute,
+}
+
+export const routeTree = rootRoute
+ ._addFileChildren(rootRouteChildren)
+ ._addFileTypes
+ {children ||
+ The page you are looking for does not exist.
} ++ + + Start Over + +
+
+
+ Home
+ {' '}
+
+ Posts
+ {' '}
+
+ Users
+ {' '}
+
+ Pathless Layout
+ {' '}
+
+ Deferred
+ {' '}
+
+ This Route Does Not Exist
+
+
+ + {children} +
+
+ )
+}
diff --git a/examples/solid/start-basic-solid-query/src/routes/_pathlessLayout/_nested-layout.tsx b/examples/solid/start-basic-solid-query/src/routes/_pathlessLayout/_nested-layout.tsx
new file mode 100644
index 0000000000..8651932b0f
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/routes/_pathlessLayout/_nested-layout.tsx
@@ -0,0 +1,34 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_pathlessLayout/_nested-layout')({
+ component: PathlessLayoutComponent,
+})
+
+function PathlessLayoutComponent() {
+ return (
+ I'm a pathless layout
+
+
+
+
+ )
+}
diff --git a/examples/solid/start-basic-solid-query/src/routes/_pathlessLayout/_nested-layout/route-a.tsx b/examples/solid/start-basic-solid-query/src/routes/_pathlessLayout/_nested-layout/route-a.tsx
new file mode 100644
index 0000000000..a22902a271
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/routes/_pathlessLayout/_nested-layout/route-a.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_pathlessLayout/_nested-layout/route-a')(
+ {
+ component: LayoutAComponent,
+ },
+)
+
+function LayoutAComponent() {
+ return I'm a nested pathless layout
+
+
+ Go to route A
+
+
+ Go to route B
+
+
+
+
+ I'm A!
+}
diff --git a/examples/solid/start-basic-solid-query/src/routes/_pathlessLayout/_nested-layout/route-b.tsx b/examples/solid/start-basic-solid-query/src/routes/_pathlessLayout/_nested-layout/route-b.tsx
new file mode 100644
index 0000000000..36231d2153
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/routes/_pathlessLayout/_nested-layout/route-b.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/_pathlessLayout/_nested-layout/route-b')(
+ {
+ component: LayoutBComponent,
+ },
+)
+
+function LayoutBComponent() {
+ return I'm B!
+}
diff --git a/examples/solid/start-basic-solid-query/src/routes/api.users.ts b/examples/solid/start-basic-solid-query/src/routes/api.users.ts
new file mode 100644
index 0000000000..f37bf0db1b
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/routes/api.users.ts
@@ -0,0 +1,17 @@
+import { json } from '@tanstack/solid-start'
+import { createAPIFileRoute } from '@tanstack/solid-start/api'
+import axios from 'redaxios'
+import type { User } from '../utils/users'
+
+export const APIRoute = createAPIFileRoute('/api/users')({
+ GET: async ({ request }) => {
+ console.info('Fetching users... @', request.url)
+ const res = await axios.get
+
+
+
+ )
+}
+
+function DeferredQuery() {
+ const deferredQuery = createQuery(() => deferredQueryOptions())
+
+ return (
+ Count: {count()}
+
+
+
+
+
+ )
+}
diff --git a/examples/solid/start-basic-solid-query/src/routes/index.tsx b/examples/solid/start-basic-solid-query/src/routes/index.tsx
new file mode 100644
index 0000000000..a128aeca0e
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/routes/index.tsx
@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/')({
+ component: Home,
+})
+
+function Home() {
+ return (
+ Deferred Query
+Status: {deferredQuery.data?.status}
+ Message: {deferredQuery.data?.message}
+ Time: {deferredQuery.data?.time.toISOString()}
+
+
+ )
+}
diff --git a/examples/solid/start-basic-solid-query/src/routes/posts.$postId.tsx b/examples/solid/start-basic-solid-query/src/routes/posts.$postId.tsx
new file mode 100644
index 0000000000..a370d08090
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/routes/posts.$postId.tsx
@@ -0,0 +1,51 @@
+import { ErrorComponent, Link, createFileRoute } from '@tanstack/solid-router'
+import { createQuery } from '@tanstack/solid-query'
+import { postQueryOptions } from '../utils/posts'
+import type { ErrorComponentProps } from '@tanstack/solid-router'
+import { NotFound } from '~/components/NotFound'
+
+export const Route = createFileRoute('/posts/$postId')({
+ 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,
+ notFoundComponent: () => {
+ return Welcome Home!!!
+
+
+ )
+}
diff --git a/examples/solid/start-basic-solid-query/src/routes/posts.index.tsx b/examples/solid/start-basic-solid-query/src/routes/posts.index.tsx
new file mode 100644
index 0000000000..33d0386c19
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/routes/posts.index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts/')({
+ component: PostsIndexComponent,
+})
+
+function PostsIndexComponent() {
+ return {postQuery.data?.title}
+{postQuery.data?.body}
+
+ Deep View
+
+ Select a post.
+}
diff --git a/examples/solid/start-basic-solid-query/src/routes/posts.route.tsx b/examples/solid/start-basic-solid-query/src/routes/posts.route.tsx
new file mode 100644
index 0000000000..b568cdd3d6
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/routes/posts.route.tsx
@@ -0,0 +1,45 @@
+import { createQuery } from '@tanstack/solid-query'
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+import { postsQueryOptions } from '../utils/posts'
+
+export const Route = createFileRoute('/posts')({
+ loader: async ({ context }) => {
+ await context.queryClient.ensureQueryData(postsQueryOptions())
+ },
+ head: () => ({
+ meta: [{ title: 'Posts' }],
+ }),
+ component: PostsComponent,
+})
+
+function PostsComponent() {
+ const postsQuery = createQuery(() => postsQueryOptions())
+
+ return (
+
+
+
+ )
+}
diff --git a/examples/solid/start-basic-solid-query/src/routes/posts_.$postId.deep.tsx b/examples/solid/start-basic-solid-query/src/routes/posts_.$postId.deep.tsx
new file mode 100644
index 0000000000..f5ae7ff840
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/routes/posts_.$postId.deep.tsx
@@ -0,0 +1,36 @@
+import { Link, createFileRoute } from '@tanstack/solid-router'
+import { useSuspenseQuery } 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 { postId } = Route.useParams()
+ const postQuery = useSuspenseQuery(postQueryOptions(postId))
+
+ return (
+ -
+ {[
+ ...postsQuery.data!,
+ { id: 'i-do-not-exist', title: 'Non-existent Post' },
+ ].map((post) => {
+ return (
+
-
+
+ {post.title.substring(0, 20)}+ +
+ )
+ })}
+
+
+
+ ← All Posts
+
+
+ )
+}
diff --git a/examples/solid/start-basic-solid-query/src/routes/redirect.tsx b/examples/solid/start-basic-solid-query/src/routes/redirect.tsx
new file mode 100644
index 0000000000..ca017f0635
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/routes/redirect.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute, redirect } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/redirect')({
+ beforeLoad: async () => {
+ throw redirect({
+ to: '/posts',
+ })
+ },
+})
diff --git a/examples/solid/start-basic-solid-query/src/routes/users.$userId.tsx b/examples/solid/start-basic-solid-query/src/routes/users.$userId.tsx
new file mode 100644
index 0000000000..ad8a1a1209
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/routes/users.$userId.tsx
@@ -0,0 +1,33 @@
+import { createQuery } from '@tanstack/solid-query'
+import { ErrorComponent, createFileRoute } from '@tanstack/solid-router'
+import type { ErrorComponentProps } from '@tanstack/solid-router'
+import { NotFound } from '~/components/NotFound'
+import { userQueryOptions } from '~/utils/users'
+
+export const Route = createFileRoute('/users/$userId')({
+ loader: async ({ context, params: { userId } }) => {
+ await context.queryClient.ensureQueryData(userQueryOptions(userId))
+ },
+ errorComponent: UserErrorComponent,
+ component: UserComponent,
+ notFoundComponent: () => {
+ return {postQuery.data.title}
+{postQuery.data.body}
+
+
+ )
+}
diff --git a/examples/solid/start-basic-solid-query/src/routes/users.index.tsx b/examples/solid/start-basic-solid-query/src/routes/users.index.tsx
new file mode 100644
index 0000000000..bbc96801a9
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/routes/users.index.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/users/')({
+ component: UsersIndexComponent,
+})
+
+function UsersIndexComponent() {
+ return {user?.name}
+{user?.email}
+ Select a user.
+}
diff --git a/examples/solid/start-basic-solid-query/src/routes/users.route.tsx b/examples/solid/start-basic-solid-query/src/routes/users.route.tsx
new file mode 100644
index 0000000000..fa2edb30a5
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/routes/users.route.tsx
@@ -0,0 +1,42 @@
+import { createQuery } from '@tanstack/solid-query'
+import { Link, Outlet, createFileRoute } from '@tanstack/solid-router'
+import { usersQueryOptions } from '../utils/users'
+
+export const Route = createFileRoute('/users')({
+ loader: async ({ context }) => {
+ await context.queryClient.ensureQueryData(usersQueryOptions())
+ },
+ component: UsersComponent,
+})
+
+function UsersComponent() {
+ const usersQuery = createQuery(() => usersQueryOptions())
+
+ return (
+
+
+
+ )
+}
diff --git a/examples/solid/start-basic-solid-query/src/ssr.tsx b/examples/solid/start-basic-solid-query/src/ssr.tsx
new file mode 100644
index 0000000000..ebd14c8120
--- /dev/null
+++ b/examples/solid/start-basic-solid-query/src/ssr.tsx
@@ -0,0 +1,13 @@
+/// -
+ {[
+ ...usersQuery.data!,
+ { id: 'i-do-not-exist', name: 'Non-existent User', email: '' },
+ ].map((user) => {
+ return (
+
-
+
+ {user.name}+ +
+ )
+ })}
+
+
+
+# TanStack React Router
+
+
+
+🤖 Type-safe router w/ built-in caching & URL state management for React!
+
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+
+Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Query](https://github.com/tannerlinsley/react-query), [React Table](https://github.com/tanstack/react-table), [React Charts](https://github.com/tannerlinsley/react-charts), [React Virtual](https://github.com/tannerlinsley/react-virtual)
+
+## Visit [tanstack.com/router](https://tanstack.com/router) for docs, guides, API and more!
diff --git a/packages/solid-router-with-query/eslint.config.js b/packages/solid-router-with-query/eslint.config.js
new file mode 100644
index 0000000000..bd7118fa1a
--- /dev/null
+++ b/packages/solid-router-with-query/eslint.config.js
@@ -0,0 +1,20 @@
+// @ts-check
+
+import rootConfig from '../../eslint.config.js'
+
+export default [
+ ...rootConfig,
+ {
+ files: ['**/*.{ts,tsx}'],
+ },
+ {
+ plugins: {},
+ rules: {},
+ },
+ {
+ files: ['**/__tests__/**'],
+ rules: {
+ '@typescript-eslint/no-unnecessary-condition': 'off',
+ },
+ },
+]
diff --git a/packages/solid-router-with-query/package.json b/packages/solid-router-with-query/package.json
new file mode 100644
index 0000000000..0036794a23
--- /dev/null
+++ b/packages/solid-router-with-query/package.json
@@ -0,0 +1,79 @@
+{
+ "name": "@tanstack/solid-router-with-query",
+ "version": "1.114.29",
+ "description": "Modern and scalable routing for React applications",
+ "author": "Tanner Linsley",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/TanStack/router.git",
+ "directory": "packages/solid-router-with-query"
+ },
+ "homepage": "https://tanstack.com/router",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "keywords": [
+ "solid",
+ "location",
+ "router",
+ "routing",
+ "async",
+ "async router",
+ "typescript"
+ ],
+ "scripts": {
+ "clean": "rimraf ./dist && rimraf ./coverage",
+ "test:eslint": "eslint ./src",
+ "test:types": "pnpm run \"/^test:types:ts[0-9]{2}$/\"",
+ "test:types:ts53": "node ../../node_modules/typescript53/lib/tsc.js",
+ "test:types:ts54": "node ../../node_modules/typescript54/lib/tsc.js",
+ "test:types:ts55": "node ../../node_modules/typescript55/lib/tsc.js",
+ "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js",
+ "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js",
+ "test:types:ts58": "tsc",
+ "test:unit": "vitest",
+ "test:unit:dev": "pnpm run test:unit --watch",
+ "test:build": "publint --strict && attw --ignore-rules no-resolution --pack .",
+ "build": "vite build"
+ },
+ "type": "module",
+ "types": "dist/esm/index.d.ts",
+ "main": "dist/cjs/index.cjs",
+ "module": "dist/esm/index.js",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./dist/esm/index.d.ts",
+ "default": "./dist/esm/index.js"
+ },
+ "require": {
+ "types": "./dist/cjs/index.d.cts",
+ "default": "./dist/cjs/index.cjs"
+ }
+ },
+ "./package.json": "./package.json"
+ },
+ "sideEffects": false,
+ "files": [
+ "dist",
+ "src"
+ ],
+ "engines": {
+ "node": ">=12"
+ },
+ "devDependencies": {
+ "vite-plugin-solid": "^2.11.6",
+ "solid-js": ">=1.9.5",
+ "@tanstack/router-core": "workspace:^",
+ "@tanstack/solid-router": "workspace:^",
+ "@tanstack/solid-query": ">=5.66.0"
+ },
+ "peerDependencies": {
+ "solid-js": ">=1.9.5",
+ "@tanstack/router-core": ">=1.114.7",
+ "@tanstack/solid-router": ">=1.43.2",
+ "@tanstack/solid-query": ">=5.49.2"
+ }
+}
diff --git a/packages/solid-router-with-query/src/index.tsx b/packages/solid-router-with-query/src/index.tsx
new file mode 100644
index 0000000000..4601542ea1
--- /dev/null
+++ b/packages/solid-router-with-query/src/index.tsx
@@ -0,0 +1,215 @@
+import {
+ QueryClientProvider,
+ dehydrate,
+ hashKey,
+ hydrate,
+} from '@tanstack/solid-query'
+import { isRedirect } from '@tanstack/router-core'
+import type * as Solid from 'solid-js'
+import type { AnyRouter } from '@tanstack/solid-router'
+import type {
+ CreateQueryOptions,
+ QueryClient,
+ QueryKey,
+ QueryObserverResult,
+} from '@tanstack/solid-query'
+
+// Extended query options to include the properties used in this file
+interface ExtendedQueryOptions extends CreateQueryOptions {
+ queryKey: QueryKey
+ queryKeyHashFn?: (queryKey: QueryKey) => string
+ __skipInjection?: boolean
+}
+
+type AdditionalOptions = {
+ WrapProvider?: (props: { children: any }) => Solid.JSX.Element
+ /**
+ * If `true`, the QueryClient will handle errors thrown by `redirect()` inside of mutations and queries.
+ *
+ * @default true
+ * @link [Guide](https://tanstack.com/router/latest/docs/framework/react/api/router/redirectFunction)
+ */
+ handleRedirects?: boolean
+}
+
+export type ValidateRouter