docs(solid-router): add with-trpc example #5829
Merged
+1,000
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
WalkthroughAdds a new Solid.js example application demonstrating TanStack Router integration with tRPC. The example includes a complete project setup with route definitions, a Node.js Express server with tRPC procedures, client-side TRPC configuration, and UI components. A documentation entry is added to index this example. Changes
Sequence Diagram(s)sequenceDiagram
participant App as SolidJS App
participant Router as TanStack Router
participant Context as Router Context
participant TRPC as TRPC Client
participant Server as Express Server
App->>Router: Initialize RouterProvider with routeTree
Router->>Context: Create router context with trpc instance
Note over App: User navigates to /dashboard/posts
Router->>Router: Match route, execute loader
Router->>Context: Access trpc from context
Context->>TRPC: Call trpc.posts.query()
TRPC->>Server: HTTP request to /trpc
Server->>Server: Execute posts procedure (1s delay)
Server-->>TRPC: Return posts array
TRPC-->>Context: Resolve data promise
Router->>App: Render DashboardPostsComponent with loader data
Note over App: User clicks post link to /dashboard/posts/$postId
Router->>Router: Match dynamic route, execute loader
Router->>Context: Extract $postId param
Context->>TRPC: Call trpc.post.query(postId)
TRPC->>Server: HTTP request to /trpc with postId
Server->>Server: Execute post procedure (500ms delay)
Server-->>TRPC: Return post object
TRPC-->>Router: Resolve data
Router->>App: Render DashboardPostsPostIdComponent with post data
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
|
View your CI Pipeline Execution ↗ for commit 8c90117
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/nitro-v2-vite-plugin
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-router-ssr-query
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-static-server-functions
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (2)
examples/solid/with-trpc/index.html (1)
6-6: Consider updating the page title to reflect the example.The generic title "Vite App" could be more descriptive. Consider changing it to something like "Solid Router + tRPC Example" to better represent the purpose of this demo.
- <title>Vite App</title> + <title>Solid Router + tRPC Example</title>examples/solid/with-trpc/README.md (1)
1-6: Consider expanding the README with more context.The README is quite minimal. Consider adding:
- A brief description of what this example demonstrates (Solid Router with tRPC integration)
- Key features showcased (route loaders with tRPC, nested routes, URL-based state)
- Project structure overview
- Any prerequisites or additional setup steps
Also, verify that
npm startandyarn startscripts are defined in package.json (not visible in this PR).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (23)
docs/router/config.json(1 hunks)examples/solid/with-trpc/.gitignore(1 hunks)examples/solid/with-trpc/.vscode/settings.json(1 hunks)examples/solid/with-trpc/README.md(1 hunks)examples/solid/with-trpc/index.html(1 hunks)examples/solid/with-trpc/package.json(1 hunks)examples/solid/with-trpc/postcss.config.mjs(1 hunks)examples/solid/with-trpc/src/main.tsx(1 hunks)examples/solid/with-trpc/src/routeTree.gen.ts(1 hunks)examples/solid/with-trpc/src/routes/-components/spinner.tsx(1 hunks)examples/solid/with-trpc/src/routes/__root.tsx(1 hunks)examples/solid/with-trpc/src/routes/dashboard.index.tsx(1 hunks)examples/solid/with-trpc/src/routes/dashboard.posts.$postId.tsx(1 hunks)examples/solid/with-trpc/src/routes/dashboard.posts.index.tsx(1 hunks)examples/solid/with-trpc/src/routes/dashboard.posts.tsx(1 hunks)examples/solid/with-trpc/src/routes/dashboard.tsx(1 hunks)examples/solid/with-trpc/src/routes/index.tsx(1 hunks)examples/solid/with-trpc/src/server/server.ts(1 hunks)examples/solid/with-trpc/src/server/trpc.ts(1 hunks)examples/solid/with-trpc/src/styles.css(1 hunks)examples/solid/with-trpc/src/trpc.ts(1 hunks)examples/solid/with-trpc/tsconfig.json(1 hunks)examples/solid/with-trpc/vite.config.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
examples/{react,solid}/**
📄 CodeRabbit inference engine (AGENTS.md)
Keep example applications under examples/react/ and examples/solid/
Files:
examples/solid/with-trpc/README.mdexamples/solid/with-trpc/src/routes/index.tsxexamples/solid/with-trpc/src/trpc.tsexamples/solid/with-trpc/src/server/trpc.tsexamples/solid/with-trpc/src/routes/dashboard.posts.index.tsxexamples/solid/with-trpc/src/routes/dashboard.posts.tsxexamples/solid/with-trpc/src/main.tsxexamples/solid/with-trpc/src/routes/__root.tsxexamples/solid/with-trpc/vite.config.tsexamples/solid/with-trpc/src/routes/dashboard.tsxexamples/solid/with-trpc/src/server/server.tsexamples/solid/with-trpc/package.jsonexamples/solid/with-trpc/tsconfig.jsonexamples/solid/with-trpc/src/routes/-components/spinner.tsxexamples/solid/with-trpc/index.htmlexamples/solid/with-trpc/src/routes/dashboard.index.tsxexamples/solid/with-trpc/postcss.config.mjsexamples/solid/with-trpc/src/routeTree.gen.tsexamples/solid/with-trpc/src/styles.cssexamples/solid/with-trpc/src/routes/dashboard.posts.$postId.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript in strict mode with extensive type safety across the codebase
Files:
examples/solid/with-trpc/src/routes/index.tsxexamples/solid/with-trpc/src/trpc.tsexamples/solid/with-trpc/src/server/trpc.tsexamples/solid/with-trpc/src/routes/dashboard.posts.index.tsxexamples/solid/with-trpc/src/routes/dashboard.posts.tsxexamples/solid/with-trpc/src/main.tsxexamples/solid/with-trpc/src/routes/__root.tsxexamples/solid/with-trpc/vite.config.tsexamples/solid/with-trpc/src/routes/dashboard.tsxexamples/solid/with-trpc/src/server/server.tsexamples/solid/with-trpc/src/routes/-components/spinner.tsxexamples/solid/with-trpc/src/routes/dashboard.index.tsxexamples/solid/with-trpc/src/routeTree.gen.tsexamples/solid/with-trpc/src/routes/dashboard.posts.$postId.tsx
**/src/routes/**
📄 CodeRabbit inference engine (AGENTS.md)
Place file-based routes under src/routes/ directories
Files:
examples/solid/with-trpc/src/routes/index.tsxexamples/solid/with-trpc/src/routes/dashboard.posts.index.tsxexamples/solid/with-trpc/src/routes/dashboard.posts.tsxexamples/solid/with-trpc/src/routes/__root.tsxexamples/solid/with-trpc/src/routes/dashboard.tsxexamples/solid/with-trpc/src/routes/-components/spinner.tsxexamples/solid/with-trpc/src/routes/dashboard.index.tsxexamples/solid/with-trpc/src/routes/dashboard.posts.$postId.tsx
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Use workspace:* protocol for internal dependencies in package.json files
Files:
examples/solid/with-trpc/package.json
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/router/config.json
🧠 Learnings (10)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to examples/{react,solid}/** : Keep example applications under examples/react/ and examples/solid/
Learnt from: FatahChan
Repo: TanStack/router PR: 5475
File: e2e/react-start/basic-prerendering/src/routes/redirect/$target/via-beforeLoad.tsx:8-0
Timestamp: 2025-10-14T18:59:33.990Z
Learning: In TanStack Router e2e test files, when a route parameter is validated at the route level (e.g., using zod in validateSearch or param validation), switch statements on that parameter do not require a default case, as the validation ensures only expected values will reach the switch.
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
Applied to files:
examples/solid/with-trpc/src/routes/index.tsxexamples/solid/with-trpc/src/routes/dashboard.posts.index.tsxexamples/solid/with-trpc/src/routes/dashboard.posts.tsxexamples/solid/with-trpc/src/main.tsxexamples/solid/with-trpc/src/routes/__root.tsxexamples/solid/with-trpc/src/routes/dashboard.tsxexamples/solid/with-trpc/package.jsonexamples/solid/with-trpc/src/routes/-components/spinner.tsxexamples/solid/with-trpc/src/routes/dashboard.index.tsxexamples/solid/with-trpc/src/routeTree.gen.tsexamples/solid/with-trpc/src/routes/dashboard.posts.$postId.tsx
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/src/routes/** : Place file-based routes under src/routes/ directories
Applied to files:
examples/solid/with-trpc/src/routes/index.tsx
📚 Learning: 2025-10-08T08:11:47.088Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.
Applied to files:
examples/solid/with-trpc/src/routes/index.tsxexamples/solid/with-trpc/src/routes/dashboard.posts.index.tsxexamples/solid/with-trpc/src/routes/dashboard.posts.tsxexamples/solid/with-trpc/src/main.tsxexamples/solid/with-trpc/src/routes/__root.tsxexamples/solid/with-trpc/src/routes/dashboard.tsxexamples/solid/with-trpc/src/routes/dashboard.index.tsxexamples/solid/with-trpc/src/routeTree.gen.tsexamples/solid/with-trpc/.vscode/settings.jsonexamples/solid/with-trpc/src/routes/dashboard.posts.$postId.tsx
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/router-core/** : Keep framework-agnostic core router logic in packages/router-core/
Applied to files:
examples/solid/with-trpc/src/main.tsxexamples/solid/with-trpc/src/routes/__root.tsx
📚 Learning: 2025-11-02T16:16:24.898Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5732
File: packages/start-client-core/src/client/hydrateStart.ts:6-9
Timestamp: 2025-11-02T16:16:24.898Z
Learning: In packages/start-client-core/src/client/hydrateStart.ts, the `import/no-duplicates` ESLint disable is necessary for imports from `#tanstack-router-entry` and `#tanstack-start-entry` because both aliases resolve to the same placeholder file (`fake-start-entry.js`) in package.json during static analysis, even though they resolve to different files at runtime.
Applied to files:
examples/solid/with-trpc/src/main.tsxexamples/solid/with-trpc/package.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript in strict mode with extensive type safety across the codebase
Applied to files:
examples/solid/with-trpc/tsconfig.json
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to examples/{react,solid}/** : Keep example applications under examples/react/ and examples/solid/
Applied to files:
examples/solid/with-trpc/index.htmlexamples/solid/with-trpc/.gitignoredocs/router/config.json
📚 Learning: 2025-10-01T18:31:35.420Z
Learnt from: schiller-manuel
Repo: TanStack/router PR: 5330
File: e2e/react-start/custom-basepath/src/routeTree.gen.ts:58-61
Timestamp: 2025-10-01T18:31:35.420Z
Learning: Do not review files named `routeTree.gen.ts` in TanStack Router repositories, as these are autogenerated files that should not be manually modified.
Applied to files:
examples/solid/with-trpc/src/routes/dashboard.index.tsxexamples/solid/with-trpc/src/routeTree.gen.tsexamples/solid/with-trpc/.vscode/settings.jsonexamples/solid/with-trpc/.gitignore
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{router-cli,router-generator,router-plugin,virtual-file-routes}/** : Keep CLI, generators, bundler plugins, and virtual file routing utilities in their dedicated tooling package directories
Applied to files:
examples/solid/with-trpc/src/routeTree.gen.tsexamples/solid/with-trpc/.gitignore
🧬 Code graph analysis (11)
examples/solid/with-trpc/src/routes/index.tsx (4)
examples/solid/with-trpc/src/routes/__root.tsx (1)
Route(16-18)examples/solid/with-trpc/src/routes/dashboard.posts.$postId.tsx (1)
Route(5-16)examples/solid/with-trpc/src/routes/dashboard.posts.tsx (1)
Route(11-14)examples/solid/with-trpc/src/routes/dashboard.tsx (1)
Route(3-5)
examples/solid/with-trpc/src/trpc.ts (1)
examples/solid/with-trpc/src/server/trpc.ts (1)
AppRouter(41-41)
examples/solid/with-trpc/src/routes/dashboard.posts.index.tsx (2)
examples/solid/with-trpc/src/routes/dashboard.posts.$postId.tsx (1)
Route(5-16)examples/solid/with-trpc/src/routes/dashboard.posts.tsx (1)
Route(11-14)
examples/solid/with-trpc/src/routes/dashboard.posts.tsx (5)
examples/solid/with-trpc/src/routes/__root.tsx (1)
Route(16-18)examples/solid/with-trpc/src/routes/dashboard.posts.$postId.tsx (1)
Route(5-16)examples/solid/with-trpc/src/routes/dashboard.posts.index.tsx (1)
Route(3-5)examples/solid/with-trpc/src/trpc.ts (1)
trpc(4-13)examples/solid/with-trpc/src/routes/-components/spinner.tsx (1)
Spinner(1-17)
examples/solid/with-trpc/src/main.tsx (1)
examples/solid/with-trpc/src/routes/-components/spinner.tsx (1)
Spinner(1-17)
examples/solid/with-trpc/src/routes/__root.tsx (5)
examples/solid/with-trpc/src/trpc.ts (1)
trpc(4-13)examples/solid/with-trpc/src/routes/dashboard.index.tsx (1)
Route(3-6)examples/solid/with-trpc/src/routes/dashboard.posts.$postId.tsx (1)
Route(5-16)examples/solid/with-trpc/src/routes/dashboard.posts.tsx (1)
Route(11-14)examples/solid/with-trpc/src/routes/-components/spinner.tsx (1)
Spinner(1-17)
examples/solid/with-trpc/vite.config.ts (1)
examples/solid/basic-ssr-streaming-file-based/vite.config.js (1)
clientBuildConfig(28-41)
examples/solid/with-trpc/src/routes/dashboard.tsx (7)
examples/solid/with-trpc/src/routes/__root.tsx (1)
Route(16-18)examples/solid/with-trpc/src/routes/dashboard.index.tsx (1)
Route(3-6)examples/solid/with-trpc/src/routes/dashboard.posts.$postId.tsx (1)
Route(5-16)examples/solid/with-trpc/src/routes/dashboard.posts.index.tsx (1)
Route(3-5)examples/solid/with-trpc/src/routes/dashboard.posts.tsx (1)
Route(11-14)examples/solid/with-trpc/src/routes/index.tsx (1)
Route(3-5)packages/router-core/src/route.ts (1)
to(1543-1545)
examples/solid/with-trpc/src/server/server.ts (1)
examples/solid/with-trpc/src/server/trpc.ts (1)
trpcMiddleWare(36-39)
examples/solid/with-trpc/src/routes/dashboard.index.tsx (3)
examples/solid/with-trpc/src/routes/__root.tsx (1)
Route(16-18)examples/solid/with-trpc/src/routes/dashboard.posts.tsx (1)
Route(11-14)examples/solid/with-trpc/src/trpc.ts (1)
trpc(4-13)
examples/solid/with-trpc/src/routes/dashboard.posts.$postId.tsx (2)
examples/solid/with-trpc/src/routes/__root.tsx (1)
Route(16-18)examples/solid/with-trpc/src/trpc.ts (1)
trpc(4-13)
⏰ 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). (2)
- GitHub Check: Test
- GitHub Check: Preview
🔇 Additional comments (8)
examples/solid/with-trpc/.vscode/settings.json (1)
1-11: Appropriate DevX configuration for managing generated files.The VSCode workspace settings correctly exclude and protect the autogenerated
routeTree.gen.tsfile from unwanted interactions (watching, searching, manual editing). This is a best practice for managing generated artifacts in development environments.examples/solid/with-trpc/vite.config.ts (1)
1-47: LGTM!The Vite configuration correctly sets up separate client and server builds. The client build uses the default Vite behavior (index.html entry), while the server build properly targets the SSR entry point at
src/server/server.ts. The plugin configuration for TanStack Router and Solid is appropriate.examples/solid/with-trpc/src/routes/-components/spinner.tsx (1)
1-17: LGTM!The Spinner component is well-structured with support for both controlled visibility (via
showprop) and customizable animation delays. The conditional class application correctly handles the different animation states.examples/solid/with-trpc/src/routes/dashboard.index.tsx (1)
1-19: LGTM!The dashboard index route correctly implements the Solid Router pattern with tRPC integration. The loader fetches posts data via the tRPC client from context, and the component properly uses
Route.useLoaderData()to access the reactive signal.examples/solid/with-trpc/src/routes/dashboard.posts.index.tsx (1)
1-9: LGTM!This index route appropriately serves as a placeholder, prompting users to select a post. The minimal implementation is suitable for this use case.
examples/solid/with-trpc/src/routes/dashboard.posts.$postId.tsx (3)
5-16: LGTM!The route definition correctly integrates search validation with Zod, loads post data via tRPC, and properly types the loader return value to handle the possibility of a missing post.
23-33: Well-implemented URL-based state synchronization.The notes state management elegantly syncs local state to the URL using Solid's reactive primitives. The effect correctly:
- Watches the notes signal for changes
- Uses
replace: trueto avoid polluting browser history- Clears the notes param when empty (line 28)
- Preserves route params with
params: trueThis is a great demonstration of URL-based state management in Solid Router.
35-37: Good defensive error handling.The early return for missing posts provides a clear user experience and prevents potential runtime errors in the component body.
| /build/ | ||
| /api/ | ||
| /server/build | ||
| /public/build# Sentry Config File |
Contributor
There was a problem hiding this comment.
Fix malformed .gitignore pattern: comment on same line as pattern.
Line 13 has a comment on the same line as the ignore pattern, which is invalid .gitignore syntax. The pattern will be interpreted literally as /public/build# Sentry Config File rather than ignoring /public/build. Move the comment to the line above or separate it.
Apply this diff to fix the syntax error:
-/public/build# Sentry Config File
+/public/build
+# Sentry Config File📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| /public/build# Sentry Config File | |
| /public/build | |
| # Sentry Config File |
🤖 Prompt for AI Agents
In examples/solid/with-trpc/.gitignore around line 13, the ignore pattern
"/public/build# Sentry Config File" has an inline comment causing the entire
line to be treated as a literal pattern; remove the inline comment by placing
the comment on the previous line or on its own line and keep the pattern as
"/public/build" so the directory is correctly ignored.
Comment on lines
+12
to
+24
| "dependencies": { | ||
| "@tailwindcss/postcss": "^4.1.15", | ||
| "@tanstack/solid-router": "^1.135.2", | ||
| "@tanstack/solid-router-devtools": "^1.135.2", | ||
| "@tanstack/router-plugin": "^1.135.2", | ||
| "@trpc/client": "^11.4.3", | ||
| "@trpc/server": "^11.4.3", | ||
| "express": "^4.21.2", | ||
| "postcss": "^8.5.1", | ||
| "solid-js": "^1.9.10", | ||
| "redaxios": "^0.5.1", | ||
| "tailwindcss": "^4.1.15", | ||
| "zod": "^3.24.2" |
Contributor
There was a problem hiding this comment.
Switch internal TanStack deps to workspace: protocol.
Per the monorepo guidelines, local packages must resolve via workspace: so they never fall back to the registry. Please flip the TanStack dependencies here to workspace:* (or an appropriate range) before we land this example.
- "@tanstack/solid-router": "^1.135.2",
- "@tanstack/solid-router-devtools": "^1.135.2",
- "@tanstack/router-plugin": "^1.135.2",
+ "@tanstack/solid-router": "workspace:*",
+ "@tanstack/solid-router-devtools": "workspace:*",
+ "@tanstack/router-plugin": "workspace:*",(pnpm.io)
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "dependencies": { | |
| "@tailwindcss/postcss": "^4.1.15", | |
| "@tanstack/solid-router": "^1.135.2", | |
| "@tanstack/solid-router-devtools": "^1.135.2", | |
| "@tanstack/router-plugin": "^1.135.2", | |
| "@trpc/client": "^11.4.3", | |
| "@trpc/server": "^11.4.3", | |
| "express": "^4.21.2", | |
| "postcss": "^8.5.1", | |
| "solid-js": "^1.9.10", | |
| "redaxios": "^0.5.1", | |
| "tailwindcss": "^4.1.15", | |
| "zod": "^3.24.2" | |
| "dependencies": { | |
| "@tailwindcss/postcss": "^4.1.15", | |
| "@tanstack/solid-router": "workspace:*", | |
| "@tanstack/solid-router-devtools": "workspace:*", | |
| "@tanstack/router-plugin": "workspace:*", | |
| "@trpc/client": "^11.4.3", | |
| "@trpc/server": "^11.4.3", | |
| "express": "^4.21.2", | |
| "postcss": "^8.5.1", | |
| "solid-js": "^1.9.10", | |
| "redaxios": "^0.5.1", | |
| "tailwindcss": "^4.1.15", | |
| "zod": "^3.24.2" |
🤖 Prompt for AI Agents
In examples/solid/with-trpc/package.json around lines 12-24, the TanStack
packages are currently pinned to registry versions; change
"@tanstack/solid-router", "@tanstack/solid-router-devtools", and
"@tanstack/router-plugin" dependency versions to use the workspace protocol
(e.g. "workspace:*" or "workspace:^1.135.2") so they resolve to local monorepo
packages; update those three entries and run your workspace package manager
(pnpm install) to verify no registry fallback.
Comment on lines
+9
to
+14
| import { Spinner } from './-components/spinner' | ||
| import type { trpc } from '../trpc' | ||
|
|
||
| export interface RouterAppContext { | ||
| trpc: typeof trpc | ||
| } |
Contributor
There was a problem hiding this comment.
import type { trpc } fails – no type export exists.
trpc is exported as a value, so the type-only import raises “Module has no exported member” during the build. Swap to a pure type expression instead of importing the value as a type, e.g.:
-import type { trpc } from '../trpc'
+import type { AppRouter } from '../server/trpc'
+import type { TRPCClient } from '@trpc/client'
export interface RouterAppContext {
- trpc: typeof trpc
+ trpc: TRPCClient<AppRouter>
}(or use typeof import('../trpc').trpc if you prefer). This keeps the file type-safe without triggering a compile-time error.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In examples/solid/with-trpc/src/routes/__root.tsx around lines 9 to 14, the file
uses "import type { trpc } from '../trpc'" but trpc is exported as a value,
causing a build error; replace the type-only import by referencing the type via
a type expression instead (for example set RouterAppContext.trpc to typeof
import('../trpc').trpc) and remove the invalid "import type { trpc }" line so
the file stays type-safe without importing a non-existent type export.
Comment on lines
+30
to
+33
| post: t.procedure.input(String).query(async (req) => { | ||
| await new Promise((resolve) => setTimeout(resolve, 500)) | ||
| return POSTS.find((p) => p.id === req.input) | ||
| }), |
Contributor
There was a problem hiding this comment.
Fix invalid tRPC input schema
t.procedure.input(String) passes the built‑in String constructor where tRPC expects a parser with a parse method (e.g. a Zod schema). At runtime this throws (input.parse is not a function), breaking the post query. Switch to a real schema such as z.string().
-import { initTRPC } from '@trpc/server'
-import { createExpressMiddleware } from '@trpc/server/adapters/express'
-import type { CreateExpressContextOptions } from '@trpc/server/adapters/express'
+import { initTRPC } from '@trpc/server'
+import { createExpressMiddleware } from '@trpc/server/adapters/express'
+import type { CreateExpressContextOptions } from '@trpc/server/adapters/express'
+import { z } from 'zod'
@@
- post: t.procedure.input(String).query(async (req) => {
+ post: t.procedure.input(z.string()).query(async (req) => {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| post: t.procedure.input(String).query(async (req) => { | |
| await new Promise((resolve) => setTimeout(resolve, 500)) | |
| return POSTS.find((p) => p.id === req.input) | |
| }), | |
| post: t.procedure.input(z.string()).query(async (req) => { | |
| await new Promise((resolve) => setTimeout(resolve, 500)) | |
| return POSTS.find((p) => p.id === req.input) | |
| }), |
🤖 Prompt for AI Agents
In examples/solid/with-trpc/src/server/trpc.ts around lines 30 to 33, the post
procedure uses t.procedure.input(String) which passes the built-in String
constructor instead of a parser with a parse method, causing runtime errors;
replace it with a proper Zod schema (e.g. z.string()) and ensure z is imported
(import { z } from "zod") and the input type matches the handler (req.input will
be a string).
| "lib": ["DOM", "DOM.Iterable", "ES2022"], | ||
| "types": ["node", "vite/client"] | ||
| }, | ||
| "include": ["src", "vite.config.ts", "tsup.config.ts"] |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
Verify the inclusion of tsup.config.ts.
The includes array references tsup.config.ts, but this file doesn't appear to be added in this PR. If this file is not needed for the example, consider removing it from the includes array.
🏁 Script executed:
#!/bin/bash
# Check if tsup.config.ts exists in the example directory
fd -t f "^tsup\.config\.ts$" examples/solid/with-trpc/Length of output: 0
🏁 Script executed:
#!/bin/bash
# List all files in the example directory to see what exists
echo "=== Files in examples/solid/with-trpc/ ==="
fd -t f . examples/solid/with-trpc/ | head -20
echo -e "\n=== Checking for config files ==="
fd -t f "(config|tsup|vite)" examples/solid/with-trpc/
echo -e "\n=== Check package.json for tsup ==="
if [ -f examples/solid/with-trpc/package.json ]; then
cat examples/solid/with-trpc/package.json | grep -i tsup
fiLength of output: 1161
🏁 Script executed:
#!/bin/bash
# Show the full tsconfig.json to verify current state
cat examples/solid/with-trpc/tsconfig.jsonLength of output: 387
Remove tsup.config.ts from the includes array in tsconfig.json.
The file tsup.config.ts does not exist in the example directory and tsup is not a dependency. This example uses Vite, not tsup. The includes array should only contain ["src", "vite.config.ts"].
🤖 Prompt for AI Agents
In examples/solid/with-trpc/tsconfig.json at line 14, the "include" array
incorrectly lists "tsup.config.ts" which does not exist and is not used; remove
"tsup.config.ts" so the include array becomes ["src", "vite.config.ts"] to match
this example's Vite setup and avoid stale/nonexistent file references.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features