test(solid-start): fix solid-query when used in ssr

[brenelz]

closes #5639

• solid-router-ssr-query: useQuery should work with ssr: true #5639

Summary by CodeRabbit

• Configuration
  • Enabled prefetching during render to improve data availability during server-side rendering.
  • Updated route SSR settings from a limited/data-only mode to active SSR for certain routes, enhancing initial data rendering and navigation responsiveness.

[coderabbitai]

Walkthrough

Enable QueryClient's experimental_prefetchInRender by default in multiple Solid Start router setups and change several route SSR configurations from the string 'data-only' to the boolean true.

Changes

Cohort / File(s)	Change Summary
QueryClient prefetch-in-render enablement e2e/solid-start/basic-solid-query/src/router.tsx, e2e/solid-start/query-integration/src/router.tsx, e2e/solid-start/server-functions/src/router.tsx	QueryClient initialization updated to set defaultOptions.queries.experimental_prefetchInRender = true, removing environment checks and always enabling prefetch-in-render.
Route SSR configuration updates e2e/solid-start/query-integration/src/routes/useQuery.tsx, e2e/solid-start/server-functions/src/routes/primitives/index.tsx	Route export options changed: ssr value replaced from 'data-only' string to boolean true.

Sequence Diagram(s)

sequenceDiagram
    participant Router as Router Setup
    participant QC as QueryClient
    participant Component as Route Render
    rect #E6F7FF
    Router->>QC: create QueryClient(defaultOptions.queries.experimental_prefetchInRender = true)
    end
    rect #F0FFF4
    Component->>QC: request/prefetch during render
    QC-->>Component: return prefetched data (sync/SSR-aware)
    note right of QC: Prefetch-in-render always enabled
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Config-only changes repeated across multiple router files and two route option edits.
• Pay attention to SSR integration points in the three router files and the two route exports.

Possibly related issues

• solid-router-ssr-query: useQuery should work with ssr: true #5639 — Matches the change from 'data-only' to ssr: true for useQuery and related SSR behavior.

Possibly related PRs

• fix: undefined / null serialization #5501 — Related router initialization and QueryClient wiring changes.
• fix: various fixes #5593 — Related QueryClient/SSR integration adjustments including prefetch behavior.

Suggested labels

package: solid-start

Suggested reviewers

• brenelz
• schiller-manuel

Poem

🐰 I hop through routes where prefetches play,
experimental flags now light the way,
'data-only' shed for simple true,
render greets cached queries — fresh and new,
tiny rabbit cheers the config day! 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "test(solid-start): fix solid-query when used in ssr" accurately reflects the primary changes in this changeset. All modifications are focused on updating e2e test files for solid-start to fix SSR behavior for solid-query, including enabling experimental_prefetchInRender and adjusting SSR configuration options. The title uses conventional commit format, is concise and specific, and clearly conveys the main intent of fixing solid-query SSR integration without unnecessary noise or vague terminology.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 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 0cdc0ea and 9e116c8.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (5)

• e2e/solid-start/basic-solid-query/src/router.tsx (1 hunks)
• e2e/solid-start/query-integration/src/router.tsx (1 hunks)
• e2e/solid-start/query-integration/src/routes/useQuery.tsx (1 hunks)
• e2e/solid-start/server-functions/src/router.tsx (1 hunks)
• e2e/solid-start/server-functions/src/routes/primitives/index.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (3)

• e2e/solid-start/query-integration/src/routes/useQuery.tsx
• e2e/solid-start/server-functions/src/router.tsx
• e2e/solid-start/query-integration/src/router.tsx

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

• e2e/solid-start/server-functions/src/routes/primitives/index.tsx
• e2e/solid-start/basic-solid-query/src/router.tsx

**/src/routes/**

📄 CodeRabbit inference engine (AGENTS.md)

Place file-based routes under src/routes/ directories

Files:

• e2e/solid-start/server-functions/src/routes/primitives/index.tsx

e2e/**

📄 CodeRabbit inference engine (AGENTS.md)

Store end-to-end tests under the e2e/ directory

Files:

• e2e/solid-start/server-functions/src/routes/primitives/index.tsx
• e2e/solid-start/basic-solid-query/src/router.tsx

🔇 Additional comments (2)

e2e/solid-start/server-functions/src/routes/primitives/index.tsx (1)

8-8: Verify semantic correctness of SSR mode change for this route.

The change from ssr: 'data-only' to ssr: true has different semantic implications:

• ssr: 'data-only': Server skips component rendering; data loads, client renders
• ssr: true: Server renders the full component during SSR

The primitives route uses client-side useQuery() for data fetching with no beforeLoad or loader. With ssr: true, the server will render an empty component (queries don't execute during SSR), then the client hydrates and fetches data—similar behavior to 'data-only' but less efficient for SSR scenarios.

Compare this with redirect-test in the same project, which also uses client-side useQuery() but explicitly keeps ssr: 'data-only'. Confirm this route should follow a different pattern or if both should be aligned.

e2e/solid-start/basic-solid-query/src/router.tsx (1)

12-12: Verify hydration behavior with experimental_prefetchInRender enabled on server.

The change removes the original client-side-only guard (typeof window !== 'undefined') that was explicitly documented to prevent hydration mismatches. Web search confirms that experimental_prefetchInRender is a v5 experimental flag intended for render-time prefetching and can be used in SSR streaming scenarios, but requires thorough testing for hydration behavior and edge cases.

Critical finding: The codebase contains no visible dehydrate/hydrate patterns typical of stable SSR setups, and the original code comment noted hydration mismatch concerns when enabled on the server.

Please confirm:

1. Tests pass with this change and hydration works correctly on server render
2. Any hydration mismatch issues from the original implementation have been resolved
3. This unconditional server-side enablement is the intended approach for solid-start SSR (versus streaming-only usage)

---

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.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 3ac02b8

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

---

☁️ Nx Cloud last updated this comment at 2025-10-28 02:26:33 UTC

[pkg-pr-new]

More templates

• 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-solid-start-example-basic-cloudflare
• tanstack-solid-start-example-basic-netlify
• tanstack-solid-start-example-basic-nitro
• tanstack-start-example-basic-solid-query
• tanstack-solid-start-example-basic-static
• 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/arktype-adapter

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

@tanstack/directive-functions-plugin

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

@tanstack/eslint-plugin-router

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

@tanstack/history

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

@tanstack/nitro-v2-vite-plugin

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

@tanstack/react-router

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

@tanstack/react-router-devtools

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

@tanstack/react-router-ssr-query

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

@tanstack/react-start

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

@tanstack/react-start-client

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

@tanstack/react-start-server

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

@tanstack/router-cli

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

@tanstack/router-core

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

@tanstack/router-devtools

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

@tanstack/router-devtools-core

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

@tanstack/router-generator

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

@tanstack/router-plugin

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

@tanstack/router-ssr-query-core

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

@tanstack/router-utils

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

@tanstack/router-vite-plugin

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

@tanstack/server-functions-plugin

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

@tanstack/solid-router

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

@tanstack/solid-router-devtools

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

@tanstack/solid-router-ssr-query

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

@tanstack/solid-start

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

@tanstack/solid-start-client

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

@tanstack/solid-start-server

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

@tanstack/start-client-core

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

@tanstack/start-plugin-core

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

@tanstack/start-server-core

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

@tanstack/start-static-server-functions

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

@tanstack/start-storage-context

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

@tanstack/valibot-adapter

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

@tanstack/virtual-file-routes

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

@tanstack/zod-adapter

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

commit: 3ac02b8

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

e2e/solid-start/query-integration/src/router.tsx (1)

7-13: QueryClient configuration is correct but note code duplication.

The QueryClient configuration with experimental_prefetchInRender: true aligns with the PR objective. However, this identical configuration appears across multiple test router files (server-functions, basic-solid-query, and query-integration). While this duplication is reasonable for isolated e2e test suites, consider whether a shared factory function could reduce maintenance if this pattern expands.

Minor style note: Line 13 has a semicolon while the equivalent line in e2e/solid-start/server-functions/src/router.tsx does not. Consider standardizing for consistency.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e2be32a and 0cdc0ea.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (5)

• e2e/solid-start/basic-solid-query/src/router.tsx (1 hunks)
• e2e/solid-start/query-integration/src/router.tsx (1 hunks)
• e2e/solid-start/query-integration/src/routes/useQuery.tsx (1 hunks)
• e2e/solid-start/server-functions/src/router.tsx (1 hunks)
• e2e/solid-start/server-functions/src/routes/primitives/index.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

• e2e/solid-start/query-integration/src/router.tsx
• e2e/solid-start/server-functions/src/routes/primitives/index.tsx
• e2e/solid-start/query-integration/src/routes/useQuery.tsx
• e2e/solid-start/basic-solid-query/src/router.tsx
• e2e/solid-start/server-functions/src/router.tsx

e2e/**

📄 CodeRabbit inference engine (AGENTS.md)

Store end-to-end tests under the e2e/ directory

Files:

• e2e/solid-start/query-integration/src/router.tsx
• e2e/solid-start/server-functions/src/routes/primitives/index.tsx
• e2e/solid-start/query-integration/src/routes/useQuery.tsx
• e2e/solid-start/basic-solid-query/src/router.tsx
• e2e/solid-start/server-functions/src/router.tsx

**/src/routes/**

📄 CodeRabbit inference engine (AGENTS.md)

Place file-based routes under src/routes/ directories

Files:

• e2e/solid-start/server-functions/src/routes/primitives/index.tsx
• e2e/solid-start/query-integration/src/routes/useQuery.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Preview

🔇 Additional comments (4)

e2e/solid-start/server-functions/src/router.tsx (1)

9-15: LGTM! Configuration enables prefetch-in-render for SSR testing.

The QueryClient configuration with experimental_prefetchInRender: true aligns with the PR objective to fix solid-query SSR behavior. This is appropriate for an e2e test environment where consistent SSR/CSR prefetch behavior is desired.

e2e/solid-start/basic-solid-query/src/router.tsx (1)

12-12: Enabling prefetch-in-render for SSR is appropriate for this test.

The change from typeof window !== 'undefined' to true enables prefetching during server-side rendering, which is consistent with the PR's objective to fix solid-query SSR behavior. This unconditional enablement is appropriate for e2e testing.

e2e/solid-start/query-integration/src/routes/useQuery.tsx (1)

10-10: No issues found. The SSR configuration change is valid.

The ssr property is typed as SSROption = boolean | 'data-only' in the router core package. Both true and 'data-only' are valid SSROption values, making the change from 'data-only' to true a properly typed transformation.

e2e/solid-start/server-functions/src/routes/primitives/index.tsx (1)

8-8: No issues found after verification.

The change from ssr: 'data-only' to ssr: true is valid and intentional. Both values are supported by TanStack Start's createFileRoute API—true enables full server-side rendering (both data loading and component rendering), while 'data-only' only renders data on the server. For a route dedicated to testing server functions with primitive types, full SSR is semantically appropriate and ensures the component is properly rendered with server function results server-side.