docs(solid-start): start-basic-solid-query example

[birkskyum]

ported over from react

Summary by CodeRabbit

• New Features

  • Added complete example project demonstrating Solid.js with file-based routing, server-side queries, and API endpoints.
  • Includes nested route layouts, error boundaries, and 404 handling with sample pages and data flows.

• Documentation

  • Added README with local development and preview setup instructions.

• Chores

  • Added project configuration including build tools, styling framework, and TypeScript setup.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 18ade98

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	✅ Succeeded	58s	View ↗
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	2s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-21 13:14:12 UTC

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds a comprehensive new Solid Start example project (start-basic-solid-query) demonstrating file-based routing with TanStack Router, server-side query integration with Solid Query, API routes, SSR capabilities, and navigation with nested layouts and dynamic segments.

Changes

Cohort / File(s)	Summary
Configuration & Environment .gitignore, .prettierignore, .vscode/settings.json, postcss.config.mjs, tailwind.config.mjs, tsconfig.json, vite.config.ts	Adds dev environment configurations, build tooling setup (Tailwind, PostCSS, Vite, TypeScript), and IDE settings with exclusions for generated route tree files and build artifacts.
Project Manifest & Documentation package.json, README.md, public/site.webmanifest	Defines project metadata, dependencies (Solid Start, Solid Router, Solid Query, TailwindCSS), dev scripts, and PWA manifest; includes development setup documentation.
Core Router Setup src/router.tsx, src/routeTree.gen.ts	Establishes router factory (getRouter()) with QueryClient integration, SSR query setup, and auto-generated route tree with comprehensive type definitions, module augmentations, and nested route hierarchy.
Root & Layout Routes src/routes/__root.tsx, src/routes/_pathlessLayout.tsx, src/routes/_pathlessLayout/_nested-layout.tsx, src/routes/_pathlessLayout/_nested-layout/route-a.tsx, src/routes/_pathlessLayout/_nested-layout/route-b.tsx	Defines root document with navigation, devtools integration, error/404 boundaries, and pathless layout examples with nested routing and active link styling.
Post Routes src/routes/posts.route.tsx, src/routes/posts.index.tsx, src/routes/posts.$postId.tsx, src/routes/posts_.$postId.deep.tsx	Implements posts listing with data prefetching, individual post page with error handling, and deep nested post view with parameterized queries.
User Routes src/routes/users.route.tsx, src/routes/users.index.tsx, src/routes/users.$userId.tsx	Implements users listing with data prefetching, index placeholder, and individual user detail page with parameterized queries.
API Routes & Server Functions src/routes/api/users.ts, src/routes/api/users.$id.ts	Defines REST API endpoints for fetching users list and individual user by ID from JSONPlaceholder API with server-side handlers.
Route Utilities src/routes/deferred.tsx, src/routes/redirect.tsx, src/routes/index.tsx	Adds example routes for deferred query loading with Suspense, client-side redirects, and home page landing.
Components & Error Handling src/components/DefaultCatchBoundary.tsx, src/components/NotFound.tsx	Introduces error boundary and 404 fallback components with navigation options (try again, go back, home).
Query & Data Utilities src/utils/posts.tsx, src/utils/users.tsx, src/utils/seo.ts	Defines query options, server fetch functions for posts/users, type definitions, and SEO meta tag builder for routing integration.
Styling src/styles/app.css	Adds Tailwind-based global styles with dark mode support, border/color scheme configuration, and base layout rules.

Sequence Diagram

sequenceDiagram
    participant Browser
    participant Server
    participant Router as TanStack Router
    participant QueryClient as Solid Query
    participant API

    Browser->>Router: Navigate to route
    Router->>Router: Match file-based route
    Note over Router: Load route loader (if exists)
    Router->>QueryClient: ensureQueryData() for prefetch
    QueryClient->>API: Fetch data
    API-->>QueryClient: Response
    QueryClient-->>Router: Cache populated
    Router->>Browser: Render component with prefetched data
    Browser->>Browser: Hydrate with HydrationScript
    
    rect rgb(200, 220, 240)
    Note over Browser,QueryClient: SSR Query Integration Active
    Browser->>QueryClient: useQuery hook on client
    QueryClient->>Browser: Use cached server state (no refetch)
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

The PR adds ~40 new files with extensive repetition in route definitions, but introduces core complexity in router setup, routeTree generation, and API route handlers. Most route files follow consistent patterns, reducing review burden. Focus areas: router configuration, type-safe route tree augmentations, query integration, and API handler logic.

Possibly related PRs

• TanStack/router#5310: Modifies Solid Start example router setup with getRouter factory, setupRouterSsrQueryIntegration, and route component hierarchy.
• TanStack/router#5491: Changes router-generator for pathless/grouped routes and route ID/parentage generation, directly affecting the generated routeTree.gen.ts output.
• TanStack/router#5518: Adds Solid hydration API changes (StartClient, hydrateStart, HydrationScript) required for SSR client hydration in this example's root document.

Suggested labels

package: solid-router, package: solid-start, example

Suggested reviewers

• schiller-manuel
• brenelz

Poem

🐰 Hop, hop—new routes now bloom,
Queries dance in SSR's room!
From posts to users, layouts lay deep,
A Solid Start example—no code to creep! ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch start-basic-solid-query

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 76dc565 and 18ade98.

⛔ Files ignored due to path filters (8)

• examples/solid/start-basic-solid-query/public/android-chrome-192x192.png is excluded by !**/*.png
• examples/solid/start-basic-solid-query/public/android-chrome-512x512.png is excluded by !**/*.png
• examples/solid/start-basic-solid-query/public/apple-touch-icon.png is excluded by !**/*.png
• examples/solid/start-basic-solid-query/public/favicon-16x16.png is excluded by !**/*.png
• examples/solid/start-basic-solid-query/public/favicon-32x32.png is excluded by !**/*.png
• examples/solid/start-basic-solid-query/public/favicon.ico is excluded by !**/*.ico
• examples/solid/start-basic-solid-query/public/favicon.png is excluded by !**/*.png
• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (35)

• examples/solid/start-basic-solid-query/.gitignore (1 hunks)
• examples/solid/start-basic-solid-query/.prettierignore (1 hunks)
• examples/solid/start-basic-solid-query/.vscode/settings.json (1 hunks)
• examples/solid/start-basic-solid-query/README.md (1 hunks)
• examples/solid/start-basic-solid-query/package.json (1 hunks)
• examples/solid/start-basic-solid-query/postcss.config.mjs (1 hunks)
• examples/solid/start-basic-solid-query/public/site.webmanifest (1 hunks)
• examples/solid/start-basic-solid-query/src/components/DefaultCatchBoundary.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/components/NotFound.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routeTree.gen.ts (1 hunks)
• examples/solid/start-basic-solid-query/src/router.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/__root.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/_pathlessLayout.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/_pathlessLayout/_nested-layout.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/_pathlessLayout/_nested-layout/route-a.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/_pathlessLayout/_nested-layout/route-b.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/api/users.$id.ts (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/api/users.ts (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/deferred.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/index.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/posts.$postId.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/posts.index.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/posts.route.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/posts_.$postId.deep.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/redirect.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/users.$userId.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/users.index.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/routes/users.route.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/styles/app.css (1 hunks)
• examples/solid/start-basic-solid-query/src/utils/posts.tsx (1 hunks)
• examples/solid/start-basic-solid-query/src/utils/seo.ts (1 hunks)
• examples/solid/start-basic-solid-query/src/utils/users.tsx (1 hunks)
• examples/solid/start-basic-solid-query/tailwind.config.mjs (1 hunks)
• examples/solid/start-basic-solid-query/tsconfig.json (1 hunks)
• examples/solid/start-basic-solid-query/vite.config.ts (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-authenticated-routes-firebase
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-devtools-panel
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-non-nested-devtools
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-i18n-paraglide
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• router-mono-simple-lazy
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-bare
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-start-example-basic-cloudflare
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-static
• tanstack-start-bun-hosting
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-counter
• tanstack-start-i18n-paraglide
• tanstack-start-example-large
• tanstack-start-example-material-ui
• tanstack-start-streaming-data-from-server-functions
• tanstack-start-example-supabase-basic
• tanstack-start-tailwind-v4
• tanstack-start-example-trellaux
• tanstack-start-example-workos
• tanstack-router-react-example-view-transitions
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query
• tanstack-router-solid-example-basic
• tanstack-router-solid-example-basic-devtools-panel
• tanstack-router-solid-example-basic-file-based
• tanstack-router-solid-example-basic-non-nested-devtools
• tanstack-router-solid-example-basic-solid-query
• tanstack-router-solid-example-basic-solid-query-file-based
• tanstack-router-solid-example-basic-ssr-streaming-file-based
• tanstack-router-solid-example-kitchen-sink-file-based
• tanstack-router-solid-example-kitchen-sink-solid-query
• tanstack-router-solid-example-kitchen-sink-solid-query-file-based
• tanstack-router-solid-example-quickstart-file-based
• tanstack-solid-start-example-bare
• tanstack-solid-start-example-basic
• tanstack-solid-start-example-basic-auth
• tanstack-start-example-basic-solid-query
• tanstack-solid-start-example-basic-static

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5562

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5562

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5562

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5562

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5562

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5562

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5562

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5562

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5562

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5562

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5562

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5562

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5562

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5562

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5562

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5562

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5562

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5562

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5562

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5562

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5562

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5562

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5562

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-ssr-query@5562

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5562

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5562

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5562

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5562

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5562

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5562

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5562

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5562

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5562

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5562

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5562

commit: 18ade98