examples: add example using tanstack start #7024
Conversation
|
🚅 Deployed to the trpc-pr-7024 environment in trpc-sse-and-websockets
|
WalkthroughAdds a new TanStack Router + tRPC example project under examples/tanstack-react-start and updates .gitignore to ignore Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Browser as Client
participant Router as TanStack Router
participant TRPC as TRPC Client
participant API as /api/trpc
participant Handler as fetchRequestHandler
participant ServerRouter as appRouter
Browser->>Router: Navigate to "/"
Router->>TRPC: useSuspenseQuery('greeting',{name})
TRPC->>API: POST /api/trpc (greeting)
API->>Handler: forward request
Handler->>ServerRouter: call greeting
ServerRouter-->>Handler: { text: "Hello world" }
Handler-->>API: response
API-->>TRPC: { text: "Hello world" }
TRPC-->>Browser: render greeting
sequenceDiagram
autonumber
participant Browser as Client
participant Router as TanStack Router
participant TRPC as TRPC Client
participant API as /api/trpc
participant ServerRouter as appRouter
Browser->>Router: Mount SubscriptionExample
Router->>TRPC: subscribe loopData({lastEventId})
TRPC->>API: open subscription (SSE/WebSocket)
API->>ServerRouter: start loopData subscription
loop every 1s
ServerRouter->>TRPC: yield data(eventId, payload)
TRPC-->>Browser: deliver event
end
Browser->>TRPC: subscription.reset()
TRPC->>ServerRouter: unsubscribe
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (4)
⏰ 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). (19)
Comment |
railway-app
bot
temporarily deployed
to
next-prisma-websockets-starter (trpc-sse-and-websockets / trpc-pr-7024)
railway-app
bot
temporarily deployed
to
next-sse-chat (trpc-sse-and-websockets / trpc-pr-7024)
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
railway-app
bot
temporarily deployed
to
next-sse-chat (trpc-sse-and-websockets / trpc-pr-7024)
railway-app
bot
temporarily deployed
to
next-prisma-websockets-starter (trpc-sse-and-websockets / trpc-pr-7024)
@trpc/client
@trpc/next
@trpc/react-query
@trpc/server
@trpc/tanstack-react-query
@trpc/upgrade
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (11)
examples/tanstack-react-start/README.md (1)
25-25: Consider markdown formatting improvements.The static analysis tools flagged a few markdown style issues:
- Line 25: "markdown" should be capitalized as "Markdown" (proper noun)
- Line 66: Use proper markdown link syntax instead of bare URLs:
[http://localhost:3000/form/latest/docs/overview](http://localhost:3000/form/latest/docs/overview)Also applies to: 66-66
examples/tanstack-react-start/src/components/DefaultCatchBoundary.tsx (1)
27-27: Extract duplicated className to a constant.The same className string is repeated three times (lines 27, 34, 41). Extract it to reduce duplication and improve maintainability.
Apply this diff:
export function DefaultCatchBoundary({ error }: ErrorComponentProps) { const router = useRouter() const isRoot = useMatch({ strict: false, select: (state) => state.id === rootRouteId, }) console.error(error) + + const buttonClassName = 'px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded-sm text-white uppercase font-extrabold' return ( <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6"> <ErrorComponent error={error} /> <div className="flex gap-2 items-center flex-wrap"> <button onClick={() => { router.invalidate() }} - className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded-sm text-white uppercase font-extrabold`} + className={buttonClassName} > Try Again </button> {isRoot ? ( <Link to="/" - className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded-sm text-white uppercase font-extrabold`} + className={buttonClassName} > Home </Link> ) : ( <Link to="/" - className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded-sm text-white uppercase font-extrabold`} + className={buttonClassName} onClick={(e) => { e.preventDefault() window.history.back() }} > Go Back </Link> )} </div> </div> ) }Also applies to: 34-34, 41-41
examples/tanstack-react-start/src/trpc/client.ts (1)
1-52: Split AppRouter into a separate type importTo match the TS guidelines (“always use
import typefor type‑only imports” and keep type/value imports separate), consider adjusting the AppRouter import like this:-import { appRouter, type AppRouter } from '~/trpc/router/_app'; +import { appRouter } from '~/trpc/router/_app'; +import type { AppRouter } from '~/trpc/router/_app';The rest of the isomorphic client setup (localLink on the server and split httpSubscriptionLink/httpBatchStreamLink on the client) looks solid.
As per coding guidelinesexamples/tanstack-react-start/src/routes/api/trpc.$trpc.ts (1)
6-21: Avoid parameter destructuring in GET/POST handlersRepo guidelines forbid destructuring in function parameter declarations. You can keep behavior identical with:
export const Route = createFileRoute('/api/trpc/$trpc')({ server: { handlers: { - GET: ({ request }) => handler(request), - POST: ({ request }) => handler(request), + GET: (ctx) => handler(ctx.request), + POST: (ctx) => handler(ctx.request), }, }, });The shared
handleraroundfetchRequestHandlerand/api/trpcendpoint otherwise looks good.
As per coding guidelinesexamples/tanstack-react-start/src/router.tsx (1)
31-42: Avoid destructuring props in theWrapcomponentTo align with the “never destructure in function parameter declarations” rule, you can rewrite
Wrapwithout changing behavior:- Wrap: ({ children }) => ( - <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}> - {children} - </TRPCProvider> - ), + Wrap: (props) => ( + <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}> + {props.children} + </TRPCProvider> + ),The rest of the router + TRPC/QueryClient integration looks correct and idiomatic for TanStack Start.
As per coding guidelinesexamples/tanstack-react-start/src/routes/index.tsx (1)
10-72: TRPC query + subscription usage looks correctThe Home and SubscriptionExample components are wired the way the TanStack React Query + tRPC docs recommend (queryOptions + useSuspenseQuery, subscriptionOptions + useSubscription, and wrapping the subscription in ClientOnly), and I don’t see functional issues here.
If you want perfect HTML semantics later, you could wrap the
<tr>rows in a<tbody>, but that’s purely optional for this example.examples/tanstack-react-start/src/trpc/init.ts (1)
13-32: Keep the context doc comment in sync with the actual route pathThe tRPC init and context setup look good and match the recommended patterns. Tiny nit: the comment still references
/trpc/$trpc, while the actual route is/api/trpc/$trpc. You could update it for clarity:- * Shared context helper invoked by both `localLink` during SSR as - * well as the /trpc/$trpc API route handler for HTTP requests. + * Shared context helper invoked by both `localLink` during SSR as + * well as the /api/trpc/$trpc API route handler for HTTP requests.Otherwise this file is in good shape.
examples/tanstack-react-start/src/trpc/router/_app.ts (2)
1-3: Align zod import style with project guidelinesGuidelines say to prefer namespace imports for validation libraries; consider switching to
import * as z from 'zod'instead of a named import.As per coding guidelines.
16-22: Avoid parameter destructuring in procedure resolverThe guidelines forbid destructuring in function parameter declarations; you currently have
.query(({ input }) => { ... }). Prefer using the options object and accessinginputinside the body, e.g.:.query((opts) => { const input = opts.input; return { text: `hello ${input?.name ?? 'world'}`, }; })This also avoids unnecessary destructuring for a value used only once.
As per coding guidelines.
examples/tanstack-react-start/src/routes/__root.tsx (2)
56-82: RefactorRootDocumentto avoid parameter destructuringGuidelines prohibit destructuring in function parameters;
function RootDocument({ children }: { children: React.ReactNode })violates this. Consider:function RootDocument(props: { children: React.ReactNode }) { return ( <html> <head> <HeadContent /> </head> <body> {/* ... */} {props.children} {/* ... */} </body> </html> ); }This also aligns with the preference for direct property access when a value is used only once.
As per coding guidelines.
58-63: Optional: Addlangattribute for accessibilityFor better a11y and semantics, consider specifying a language on the root element, e.g.
<html lang="en">.
📜 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 (16)
.gitignore(2 hunks)examples/tanstack-react-start/README.md(1 hunks)examples/tanstack-react-start/package.json(1 hunks)examples/tanstack-react-start/src/components/DefaultCatchBoundary.tsx(1 hunks)examples/tanstack-react-start/src/components/NotFound.tsx(1 hunks)examples/tanstack-react-start/src/router.tsx(1 hunks)examples/tanstack-react-start/src/routes/__root.tsx(1 hunks)examples/tanstack-react-start/src/routes/api/trpc.$trpc.ts(1 hunks)examples/tanstack-react-start/src/routes/index.tsx(1 hunks)examples/tanstack-react-start/src/styles/app.css(1 hunks)examples/tanstack-react-start/src/trpc/client.ts(1 hunks)examples/tanstack-react-start/src/trpc/init.ts(1 hunks)examples/tanstack-react-start/src/trpc/router/_app.ts(1 hunks)examples/tanstack-react-start/src/trpc/transformer.ts(1 hunks)examples/tanstack-react-start/tsconfig.json(1 hunks)examples/tanstack-react-start/vite.config.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.{ts,tsx}: Always useimport typefor type-only imports
Separate type imports from value imports
Avoid overzealous object destructuring; prefer direct property access
Object destructuring is acceptable when a variable is used 3+ times
Prefer array destructuring
Avoid sparse array destructuring
Never destructure in function parameter declarations
Avoid destructuring potentially nullish nested properties
Maximum 3 parameters per function; use options objects when more
Type parameter names must match /^(T|$)(A-Z)?[0-9]*$/
Prefix unused variables, parameters, and caught errors with_
Prefer namespace imports for validation libraries and large modules (e.g.,import * as z from 'zod',import * as React from 'react')
Follow import order: test helpers, tRPC test imports, third-party, then relative
Never import from@trpc/*/src; import from the package root instead
Do not useSymbol.disposeorSymbol.asyncDispose; usemakeResource()/makeAsyncResource()
Always useawait usingfor resource cleanup
PrefermakeResource()/makeAsyncResource()over manual disposal logic
Avoid non-null assertions (!)
Use proper type guards and optional chaining instead of non-null assertions
Switch statements must be exhaustive for union types
Rely on TypeScript inference; avoid unnecessary explicit return/output types
Use explicit types at public API boundaries, for complex generic constraints, or when inference is insufficient/ambiguous
Use thesatisfiesoperator to retain inference while enforcing shapes
Useas constfor literal type inference when appropriate
Prefer explicit typing overany
Use type assertions sparingly
Leverage TypeScript strict mode features
Files:
examples/tanstack-react-start/src/components/DefaultCatchBoundary.tsxexamples/tanstack-react-start/src/routes/api/trpc.$trpc.tsexamples/tanstack-react-start/src/trpc/init.tsexamples/tanstack-react-start/src/components/NotFound.tsxexamples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/trpc/client.tsexamples/tanstack-react-start/src/trpc/router/_app.tsexamples/tanstack-react-start/src/routes/__root.tsxexamples/tanstack-react-start/src/routes/index.tsxexamples/tanstack-react-start/src/trpc/transformer.tsexamples/tanstack-react-start/vite.config.ts
**/*.{ts,tsx,md,mdx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
Use camelCase for file names (with exceptions like TRPC/RPC/HTTP/JSON acronyms, .config.js, .d.ts, and tests)
Files:
examples/tanstack-react-start/src/components/DefaultCatchBoundary.tsxexamples/tanstack-react-start/src/routes/api/trpc.$trpc.tsexamples/tanstack-react-start/src/trpc/init.tsexamples/tanstack-react-start/README.mdexamples/tanstack-react-start/src/components/NotFound.tsxexamples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/trpc/client.tsexamples/tanstack-react-start/src/trpc/router/_app.tsexamples/tanstack-react-start/src/routes/__root.tsxexamples/tanstack-react-start/src/routes/index.tsxexamples/tanstack-react-start/src/trpc/transformer.tsexamples/tanstack-react-start/vite.config.ts
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.tsx: Follow React Hooks rules (React Compiler compatible patterns)
Use the JSX runtime (no need to import React for JSX)
Prefer function components
Files:
examples/tanstack-react-start/src/components/DefaultCatchBoundary.tsxexamples/tanstack-react-start/src/components/NotFound.tsxexamples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/routes/__root.tsxexamples/tanstack-react-start/src/routes/index.tsx
🧠 Learnings (44)
📓 Common learnings
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:01.878Z
Learning: Applies to packages/react-query/**/*.test.tsx : Create the tRPC React client with createTRPCReact<typeof appRouter>()
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Use `ctx.useTRPCClient()` for direct (vanilla) tRPC client access in tests
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Use `ctx.useTRPC()` for TanStack React Query hooks access in components under test
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Share common functionality through `trpc/server` and keep client/server concerns separate
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Do NOT import legacy helpers like `createAppRouter` from `./__testHelpers`
Applied to files:
examples/tanstack-react-start/src/components/DefaultCatchBoundary.tsx.gitignoreexamples/tanstack-react-start/README.mdexamples/tanstack-react-start/src/components/NotFound.tsxexamples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/trpc/router/_app.tsexamples/tanstack-react-start/package.jsonexamples/tanstack-react-start/src/routes/__root.tsxexamples/tanstack-react-start/src/routes/index.tsx
📚 Learning: 2025-09-05T15:16:01.878Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:01.878Z
Learning: Applies to packages/react-query/**/*.test.tsx : Create the tRPC React client with createTRPCReact<typeof appRouter>()
Applied to files:
examples/tanstack-react-start/src/routes/api/trpc.$trpc.tsexamples/tanstack-react-start/src/trpc/init.tsexamples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/trpc/client.tsexamples/tanstack-react-start/src/trpc/router/_app.tsexamples/tanstack-react-start/src/routes/__root.tsxexamples/tanstack-react-start/src/routes/index.tsx
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Use `ctx.useTRPCClient()` for direct (vanilla) tRPC client access in tests
Applied to files:
examples/tanstack-react-start/src/routes/api/trpc.$trpc.tsexamples/tanstack-react-start/src/trpc/init.tsexamples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/trpc/client.tsexamples/tanstack-react-start/src/trpc/router/_app.tsexamples/tanstack-react-start/package.jsonexamples/tanstack-react-start/src/routes/__root.tsxexamples/tanstack-react-start/src/routes/index.tsx
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Share common functionality through `trpc/server` and keep client/server concerns separate
Applied to files:
examples/tanstack-react-start/src/routes/api/trpc.$trpc.tsexamples/tanstack-react-start/src/trpc/init.tsexamples/tanstack-react-start/src/trpc/client.tsexamples/tanstack-react-start/src/trpc/router/_app.ts
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Use `ctx.useTRPC()` for TanStack React Query hooks access in components under test
Applied to files:
examples/tanstack-react-start/src/routes/api/trpc.$trpc.tsexamples/tanstack-react-start/src/trpc/init.tsexamples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/trpc/client.tsexamples/tanstack-react-start/src/trpc/router/_app.tsexamples/tanstack-react-start/package.jsonexamples/tanstack-react-start/src/routes/__root.tsxexamples/tanstack-react-start/src/routes/index.tsx
📚 Learning: 2025-09-05T15:17:32.520Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/upgrade-tests.mdc:0-0
Timestamp: 2025-09-05T15:17:32.520Z
Learning: Applies to packages/upgrade/**/*.{test,spec,trpc,snap}.tsx : Import both 'trpc/react-query' as rq (legacy) and 'trpc/tanstack-react-query' as trq (modern) when writing migration tests
Applied to files:
examples/tanstack-react-start/src/routes/api/trpc.$trpc.tsexamples/tanstack-react-start/src/trpc/init.tsexamples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/trpc/client.tsexamples/tanstack-react-start/package.jsonexamples/tanstack-react-start/src/trpc/transformer.ts
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx} : Never import from `trpc/*/src`; import from the package root instead
Applied to files:
examples/tanstack-react-start/src/routes/api/trpc.$trpc.tsexamples/tanstack-react-start/src/trpc/init.tsexamples/tanstack-react-start/tsconfig.json
📚 Learning: 2025-09-05T15:16:01.878Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:01.878Z
Learning: Applies to packages/react-query/**/*.test.tsx : Import createTRPCReact from 'trpc/react-query' (legacy API)
Applied to files:
examples/tanstack-react-start/src/routes/api/trpc.$trpc.tsexamples/tanstack-react-start/src/trpc/init.tsexamples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/trpc/client.tsexamples/tanstack-react-start/src/routes/__root.tsxexamples/tanstack-react-start/src/routes/index.tsx
📚 Learning: 2025-09-05T15:16:48.745Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-09-05T15:16:48.745Z
Learning: Applies to **/*.test.ts : Import `testServerAndClientResource` from `trpc/client/__tests__/testClientResource`
Applied to files:
examples/tanstack-react-start/src/routes/api/trpc.$trpc.ts.gitignoreexamples/tanstack-react-start/src/trpc/client.ts
📚 Learning: 2025-09-05T15:16:48.745Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-09-05T15:16:48.745Z
Learning: Applies to **/*.test.ts : NEVER use the deprecated `routerToServerAndClientNew()` in tests
Applied to files:
examples/tanstack-react-start/src/routes/api/trpc.$trpc.ts.gitignoreexamples/tanstack-react-start/src/trpc/router/_app.ts
📚 Learning: 2025-09-05T15:17:32.520Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/upgrade-tests.mdc:0-0
Timestamp: 2025-09-05T15:17:32.520Z
Learning: Applies to packages/upgrade/**/*.{test,spec,trpc,snap}.tsx : For migration testing, exercise both legacy and modern patterns via ctx.rq and ctx.trq within the same test when relevant
Applied to files:
examples/tanstack-react-start/src/routes/api/trpc.$trpc.ts.gitignore
📚 Learning: 2025-09-05T15:16:01.878Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:01.878Z
Learning: Applies to packages/react-query/**/*.test.tsx : If not using createAppRouter, you may create an inline router using testServerAndClientResource with appropriate server and client link configuration
Applied to files:
examples/tanstack-react-start/src/routes/api/trpc.$trpc.ts.gitignoreexamples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/trpc/client.tsexamples/tanstack-react-start/src/routes/__root.tsxexamples/tanstack-react-start/src/routes/index.tsx
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx,md,mdx} : Use camelCase for file names (with exceptions like TRPC/RPC/HTTP/JSON acronyms, .config.js, .d.ts, and tests)
Applied to files:
.gitignoreexamples/tanstack-react-start/tsconfig.json
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx} : Prefix unused variables, parameters, and caught errors with `_`
Applied to files:
.gitignore
📚 Learning: 2025-09-05T15:17:32.520Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/upgrade-tests.mdc:0-0
Timestamp: 2025-09-05T15:17:32.520Z
Learning: Applies to packages/upgrade/**/*.{test,spec,trpc,snap}.tsx : Do NOT import legacy-only helpers like createAppRouter from './__testHelpers' in upgrade-package tests
Applied to files:
.gitignoreexamples/tanstack-react-start/src/trpc/router/_app.ts
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx} : Follow import order: test helpers, tRPC test imports, third-party, then relative
Applied to files:
.gitignoreexamples/tanstack-react-start/tsconfig.json
📚 Learning: 2025-09-05T15:16:01.878Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:01.878Z
Learning: Applies to packages/react-query/**/*.test.tsx : ALWAYS import createAppRouter from './__testHelpers' (not '__helpers')
Applied to files:
.gitignoreexamples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/trpc/router/_app.tsexamples/tanstack-react-start/src/routes/__root.tsxexamples/tanstack-react-start/src/routes/index.tsx
📚 Learning: 2025-09-05T15:16:48.745Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-09-05T15:16:48.745Z
Learning: Applies to **/*.test.ts : Configure server options via the `server` property in `testServerAndClientResource` options
Applied to files:
.gitignore
📚 Learning: 2025-09-05T15:16:01.878Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:01.878Z
Learning: Applies to packages/react-query/**/*.test.tsx : Manage test resources with konn(): call createAppRouter() in beforeEach and ctx?.close?.() in afterEach
Applied to files:
.gitignoreexamples/tanstack-react-start/src/routes/__root.tsx
📚 Learning: 2025-02-19T20:31:52.088Z
Learnt from: barelyhuman
Repo: trpc/trpc PR: 6530
File: packages/upgrade/src/bin/cli.ts:218-222
Timestamp: 2025-02-19T20:31:52.088Z
Learning: The CLI options `trpcFile` and `trpcImportName` in `packages/upgrade/src/bin/cli.ts` are temporary and planned to be removed in favor of using automatically discovered references from the TypeScript program.
Applied to files:
examples/tanstack-react-start/src/trpc/init.ts
📚 Learning: 2025-06-09T14:01:20.033Z
Learnt from: juliusmarminge
Repo: trpc/trpc PR: 6789
File: packages/tanstack-react-query/tsdown.config.ts:1-24
Timestamp: 2025-06-09T14:01:20.033Z
Learning: In the tRPC monorepo, packages/tests and packages/upgrade don't need main/module/types fields in their package.json because tests is not distributed and upgrade just exposes a binary.
Applied to files:
examples/tanstack-react-start/src/trpc/init.ts
📚 Learning: 2025-09-05T15:16:01.878Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:01.878Z
Learning: Applies to packages/react-query/**/*.test.tsx : Wrap components with a custom App that provides trpc.Provider (legacy) and QueryClientProvider
Applied to files:
examples/tanstack-react-start/src/trpc/init.tsexamples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/trpc/client.tsexamples/tanstack-react-start/src/trpc/router/_app.tsexamples/tanstack-react-start/src/routes/__root.tsxexamples/tanstack-react-start/src/routes/index.tsx
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Import React testing utilities with `import * as React from 'react';`
Applied to files:
examples/tanstack-react-start/src/components/NotFound.tsxexamples/tanstack-react-start/tsconfig.jsonexamples/tanstack-react-start/package.json
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Render via `ctx.renderApp()` and rerender via `ctx.rerenderApp()` instead of custom providers
Applied to files:
examples/tanstack-react-start/src/components/NotFound.tsxexamples/tanstack-react-start/package.jsonexamples/tanstack-react-start/src/routes/__root.tsxexamples/tanstack-react-start/src/routes/index.tsx
📚 Learning: 2025-09-05T15:16:01.878Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:01.878Z
Learning: Applies to packages/react-query/**/*.test.tsx : Use queryClient, db, and resolvers exposed by createAppRouter instead of redefining them
Applied to files:
examples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/trpc/client.tsexamples/tanstack-react-start/src/trpc/router/_app.tsexamples/tanstack-react-start/src/routes/__root.tsxexamples/tanstack-react-start/src/routes/index.tsx
📚 Learning: 2025-09-05T15:16:01.878Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:01.878Z
Learning: Applies to packages/react-query/**/*.test.tsx : ALWAYS use createAppRouter() helper for legacy React Query tests
Applied to files:
examples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/routes/__root.tsxexamples/tanstack-react-start/src/routes/index.tsx
📚 Learning: 2025-09-05T15:16:01.878Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:01.878Z
Learning: Applies to packages/react-query/**/*.test.tsx : Import getUntypedClient from 'trpc/client' when an untyped client is needed
Applied to files:
examples/tanstack-react-start/src/router.tsxexamples/tanstack-react-start/src/trpc/client.ts
📚 Learning: 2025-09-05T15:16:48.745Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-09-05T15:16:48.745Z
Learning: Applies to **/*.test.ts : Use `ctx.client` from the test resource for making tRPC calls
Applied to files:
examples/tanstack-react-start/src/trpc/client.ts
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx} : Leverage TypeScript strict mode features
Applied to files:
examples/tanstack-react-start/tsconfig.json
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx} : Use `as const` for literal type inference when appropriate
Applied to files:
examples/tanstack-react-start/tsconfig.json
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx} : Separate type imports from value imports
Applied to files:
examples/tanstack-react-start/tsconfig.json
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx} : Use explicit types at public API boundaries, for complex generic constraints, or when inference is insufficient/ambiguous
Applied to files:
examples/tanstack-react-start/tsconfig.json
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx} : Prefer namespace imports for validation libraries and large modules (e.g., `import * as z from 'zod'`, `import * as React from 'react'`)
Applied to files:
examples/tanstack-react-start/tsconfig.json
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx} : Always use `import type` for type-only imports
Applied to files:
examples/tanstack-react-start/tsconfig.json
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx} : Avoid sparse array destructuring
Applied to files:
examples/tanstack-react-start/tsconfig.json
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx} : Prefer array destructuring
Applied to files:
examples/tanstack-react-start/tsconfig.json
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.tsx : Follow React Hooks rules (React Compiler compatible patterns)
Applied to files:
examples/tanstack-react-start/tsconfig.json
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.tsx : Use the JSX runtime (no need to import React for JSX)
Applied to files:
examples/tanstack-react-start/tsconfig.json
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Import TanStack React Query utilities from the package source via `../src`
Applied to files:
examples/tanstack-react-start/package.json
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Import React Query types from `tanstack/react-query` as needed
Applied to files:
examples/tanstack-react-start/package.jsonexamples/tanstack-react-start/src/routes/__root.tsx
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Do NOT import `testReactResource` from `./test/__helpers` (wrong path)
Applied to files:
examples/tanstack-react-start/package.json
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : ALWAYS use `await using ctx = testReactResource(...)` to set up TanStack React Query tests
Applied to files:
examples/tanstack-react-start/package.json
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Import `testReactResource` from the local path `./__helpers`
Applied to files:
examples/tanstack-react-start/package.json
🧬 Code graph analysis (6)
examples/tanstack-react-start/src/routes/api/trpc.$trpc.ts (3)
packages/server/src/adapters/fetch/fetchRequestHandler.ts (1)
fetchRequestHandler(24-80)examples/tanstack-react-start/src/trpc/router/_app.ts (1)
appRouter(7-58)examples/tanstack-react-start/src/trpc/init.ts (1)
createTRPCContextInner(18-21)
examples/tanstack-react-start/src/router.tsx (6)
examples/tanstack-react-start/src/trpc/transformer.ts (1)
transformer(8-8)examples/tanstack-react-start/src/trpc/client.ts (1)
makeTRPCClient(22-50)examples/tanstack-react-start/src/trpc/router/_app.ts (1)
AppRouter(60-60)examples/tanstack-react-start/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)examples/tanstack-react-start/src/components/NotFound.tsx (1)
NotFound(3-25)packages/react-query/src/shared/hooks/types.ts (1)
TRPCProvider(237-239)
examples/tanstack-react-start/src/trpc/client.ts (6)
examples/tanstack-react-start/src/trpc/router/_app.ts (2)
AppRouter(60-60)appRouter(7-58)packages/client/src/links/localLink.ts (1)
unstable_localLink(40-277)examples/tanstack-react-start/src/trpc/init.ts (1)
createTRPCContextInner(18-21)packages/client/src/links/splitLink.ts (1)
splitLink(9-30)packages/client/src/links/httpSubscriptionLink.ts (1)
httpSubscriptionLink(65-240)packages/client/src/links/httpBatchStreamLink.ts (1)
httpBatchStreamLink(23-186)
examples/tanstack-react-start/src/trpc/router/_app.ts (1)
examples/tanstack-react-start/src/trpc/init.ts (2)
createTRPCRouter(32-32)publicProcedure(30-30)
examples/tanstack-react-start/src/routes/__root.tsx (5)
examples/tanstack-react-start/src/routes/index.tsx (1)
Route(6-8)packages/client/src/createTRPCClient.ts (1)
TRPCClient(40-48)examples/tanstack-react-start/src/trpc/router/_app.ts (1)
AppRouter(60-60)examples/tanstack-react-start/src/components/DefaultCatchBoundary.tsx (1)
DefaultCatchBoundary(10-53)examples/tanstack-react-start/src/components/NotFound.tsx (1)
NotFound(3-25)
examples/tanstack-react-start/src/routes/index.tsx (2)
examples/tanstack-react-start/src/routes/__root.tsx (1)
Route(20-46)examples/tanstack-react-start/src/routes/api/trpc.$trpc.ts (1)
Route(14-21)
🪛 LanguageTool
examples/tanstack-react-start/README.md
[uncategorized] ~25-~25: Did you mean the formatting language “Markdown” (= proper noun)?
Context: ...TanStack Router app. In production, the markdown doc pages are fetched from the GitHub r...
(MARKDOWN_NNP)
[style] ~71-~71: Using many exclamation marks might seem excessive (in this case: 8 exclamation marks for a text that’s 1725 characters long)
Context: ...e manually reloaded in the browser. > [!WARNING] > You will need to update the docs/config.json file (in the project's repo) if you add a new doc page!
(EN_EXCESSIVE_EXCLAMATION)
🪛 markdownlint-cli2 (0.18.1)
examples/tanstack-react-start/README.md
46-46: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
53-53: Blank line inside blockquote
(MD028, no-blanks-blockquote)
66-66: Bare URL used
(MD034, no-bare-urls)
70-70: Blank line inside blockquote
(MD028, no-blanks-blockquote)
⏰ 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). (4)
- GitHub Check: test
- GitHub Check: typecheck
- GitHub Check: build
- GitHub Check: Lint and auto-fix
🔇 Additional comments (6)
.gitignore (1)
8-8: LGTM!The additions follow existing naming conventions and are well-organized:
.nitro/and.tanstack/appropriately ignore build artifacts from the Nitro server and TanStack tooling (consistent with.vinxi/already present)**/routeTree.gen.tscorrectly captures TanStack Router-generated route trees at any nesting levelAlso applies to: 10-10, 38-38
examples/tanstack-react-start/src/styles/app.css (1)
27-29: Ensure proper mouse detection for accessibility.The
.using-mouseselector suppresses outlines for all descendants, which is acceptable for mouse users but requires careful implementation. Verify that the JavaScript code properly adds/removes this class based on actual input method detection (mouse vs keyboard) to maintain keyboard accessibility.examples/tanstack-react-start/src/trpc/transformer.ts (1)
1-8: LGTM!Clean implementation with helpful documentation. The centralized transformer export allows for easy extension with custom type handlers in the future.
examples/tanstack-react-start/package.json (1)
37-37: Confirm rolldown-vite is intentional for this example.The
rolldown-vite@7.2.5package is an experimental/beta Vite build that uses Rolldown (a Rust bundler) as a drop-in replacement for testing purposes. While version 7.2.5 is published, rolldown-vite is explicitly experimental and only the most recent minor receives updates; patch releases can contain breaking changes.For an example project that users may clone, confirm:
- Is showcasing Rolldown capabilities the intended goal, or should this use standard Vite?
- Are you prepared for potential breaking changes or ecosystem incompatibilities?
- Will users expect this example to be production-ready and stable?
examples/tanstack-react-start/src/trpc/router/_app.ts (1)
23-53: Subscription implementation looks solid for the example use caseInput schema, abort handling, and use of
trackedyield values form a clear, easy-to-follow example of a streaming procedure. No blocking or correctness issues stand out for an example.examples/tanstack-react-start/src/routes/__root.tsx (1)
20-46: Root route context and wiring look correctTyped context for
queryClient,trpcClient, andtrpcmatches the surrounding TRPC setup, and error/not-found/component wiring is consistent with TanStack Router Start patterns.
| <Link | ||
| to="/" | ||
| className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded-sm text-white uppercase font-extrabold`} | ||
| onClick={(e) => { | ||
| e.preventDefault() | ||
| window.history.back() | ||
| }} | ||
| > | ||
| Go Back | ||
| </Link> |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Remove unnecessary to prop on prevented navigation.
The "Go Back" Link component specifies to="/" but immediately prevents default navigation and calls window.history.back(). This is inconsistent and potentially confusing. Consider either:
- Remove the
toprop since navigation is prevented, or - Use a
<button>element instead since this isn't actually navigating via the router
Option 1: Remove the to prop
) : (
- <Link
- to="/"
- className={buttonClassName}
- onClick={(e) => {
+ <button
+ className={buttonClassName}
+ onClick={() => {
- e.preventDefault()
window.history.back()
}}
>
Go Back
- </Link>
+ </button>
)}Option 2: Use proper router navigation
If you want to navigate within the router, consider using router.history.back() instead of window.history.back() without preventDefault.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In examples/tanstack-react-start/src/components/DefaultCatchBoundary.tsx around
lines 39 to 48, the Link uses a `to="/"` prop but the click handler prevents
default and calls `window.history.back()`, which is inconsistent; fix by either
removing the `to` prop from the Link when you intend to intercept navigation and
keep the click handler, or replace the Link with a semantic <button> element
styled the same and attach the onClick that calls `window.history.back()`;
alternatively, if you want to perform router-based back navigation, remove
preventDefault and invoke the router's back/history API instead of
window.history.back().
| @@ -0,0 +1,25 @@ | |||
| import { Link } from '@tanstack/react-router' | |||
|
|
|||
| export function NotFound({ children }: { children?: any }) { | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Replace any with proper type.
The children prop uses any, which violates the guideline to prefer explicit typing. Use React.ReactNode for children props.
Apply this diff:
+import type * as React from 'react'
import { Link } from '@tanstack/react-router'
-export function NotFound({ children }: { children?: any }) {
+export function NotFound({ children }: { children?: React.ReactNode }) {As per coding guidelines.
📝 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.
| export function NotFound({ children }: { children?: any }) { | |
| import type * as React from 'react' | |
| import { Link } from '@tanstack/react-router' | |
| export function NotFound({ children }: { children?: React.ReactNode }) { |
🤖 Prompt for AI Agents
In examples/tanstack-react-start/src/components/NotFound.tsx around line 3, the
NotFound component types its children as any; replace that with the proper React
type by importing React (if not already) and changing the children prop type to
React.ReactNode (or ReactNode) so children are explicitly and accurately typed,
updating the prop signature accordingly.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
examples/tanstack-react-start/src/components/NotFound.tsx (1)
3-3: Replaceanywith proper type.The
childrenprop usesany, which violates the guideline to prefer explicit typing. UseReact.ReactNodefor children props.As per coding guidelines.
examples/tanstack-react-start/src/components/DefaultCatchBoundary.tsx (1)
39-48: Replace Link with button for prevented navigation.The Link specifies
to="/"but immediately prevents default navigation and callswindow.history.back(), which is inconsistent and potentially confusing. Use a<button>element instead since this isn't actually navigating via the router.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
examples/tanstack-react-start/src/components/DefaultCatchBoundary.tsx(1 hunks)examples/tanstack-react-start/src/components/NotFound.tsx(1 hunks)examples/tanstack-react-start/src/styles/app.css(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- examples/tanstack-react-start/src/styles/app.css
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.{ts,tsx}: Always useimport typefor type-only imports
Separate type imports from value imports
Avoid overzealous object destructuring; prefer direct property access
Object destructuring is acceptable when a variable is used 3+ times
Prefer array destructuring
Avoid sparse array destructuring
Never destructure in function parameter declarations
Avoid destructuring potentially nullish nested properties
Maximum 3 parameters per function; use options objects when more
Type parameter names must match /^(T|$)(A-Z)?[0-9]*$/
Prefix unused variables, parameters, and caught errors with_
Prefer namespace imports for validation libraries and large modules (e.g.,import * as z from 'zod',import * as React from 'react')
Follow import order: test helpers, tRPC test imports, third-party, then relative
Never import from@trpc/*/src; import from the package root instead
Do not useSymbol.disposeorSymbol.asyncDispose; usemakeResource()/makeAsyncResource()
Always useawait usingfor resource cleanup
PrefermakeResource()/makeAsyncResource()over manual disposal logic
Avoid non-null assertions (!)
Use proper type guards and optional chaining instead of non-null assertions
Switch statements must be exhaustive for union types
Rely on TypeScript inference; avoid unnecessary explicit return/output types
Use explicit types at public API boundaries, for complex generic constraints, or when inference is insufficient/ambiguous
Use thesatisfiesoperator to retain inference while enforcing shapes
Useas constfor literal type inference when appropriate
Prefer explicit typing overany
Use type assertions sparingly
Leverage TypeScript strict mode features
Files:
examples/tanstack-react-start/src/components/NotFound.tsxexamples/tanstack-react-start/src/components/DefaultCatchBoundary.tsx
**/*.{ts,tsx,md,mdx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
Use camelCase for file names (with exceptions like TRPC/RPC/HTTP/JSON acronyms, .config.js, .d.ts, and tests)
Files:
examples/tanstack-react-start/src/components/NotFound.tsxexamples/tanstack-react-start/src/components/DefaultCatchBoundary.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.tsx: Follow React Hooks rules (React Compiler compatible patterns)
Use the JSX runtime (no need to import React for JSX)
Prefer function components
Files:
examples/tanstack-react-start/src/components/NotFound.tsxexamples/tanstack-react-start/src/components/DefaultCatchBoundary.tsx
🧠 Learnings (7)
📓 Common learnings
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Do NOT import legacy helpers like `createAppRouter` from `./__testHelpers`
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Use `ctx.useTRPC()` for TanStack React Query hooks access in components under test
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Do NOT import legacy helpers like `createAppRouter` from `./__testHelpers`
Applied to files:
examples/tanstack-react-start/src/components/NotFound.tsxexamples/tanstack-react-start/src/components/DefaultCatchBoundary.tsx
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx} : Prefer explicit typing over `any`
Applied to files:
examples/tanstack-react-start/src/components/NotFound.tsx
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx} : Use proper type guards and optional chaining instead of non-null assertions
Applied to files:
examples/tanstack-react-start/src/components/NotFound.tsx
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.{ts,tsx} : Avoid non-null assertions (`!`)
Applied to files:
examples/tanstack-react-start/src/components/NotFound.tsx
📚 Learning: 2025-09-05T16:48:06.982Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/coding-guidelines.mdc:0-0
Timestamp: 2025-09-05T16:48:06.982Z
Learning: Applies to **/*.tsx : Prefer function components
Applied to files:
examples/tanstack-react-start/src/components/NotFound.tsx
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
Repo: trpc/trpc PR: 0
File: .cursor/rules/tanstack-react-query-tests.mdc:0-0
Timestamp: 2025-09-05T15:16:31.379Z
Learning: Applies to packages/tanstack-react-query/**/*.test.tsx : Import React testing utilities with `import * as React from 'react';`
Applied to files:
examples/tanstack-react-start/src/components/NotFound.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). (7)
- GitHub Check: E2E-tests (next-prisma-websockets-starter)
- GitHub Check: E2E-tests (nuxt)
- GitHub Check: E2E-tests (next-minimal-starter)
- GitHub Check: E2E-tests (minimal-react)
- GitHub Check: E2E-tests (express-minimal)
- GitHub Check: E2E-tests (.test/diagnostics-big-router)
- GitHub Check: typecheck-www
🔇 Additional comments (1)
examples/tanstack-react-start/src/components/DefaultCatchBoundary.tsx (1)
1-8: LGTM: Import structure follows guidelines.Type imports are properly separated using
import type, and value imports are correctly grouped.
examples/tanstack-react-start/src/components/DefaultCatchBoundary.tsx
Outdated
Show resolved
Hide resolved
railway-app
bot
temporarily deployed
to
next-prisma-websockets-starter (trpc-sse-and-websockets / trpc-pr-7024)
railway-app
bot
temporarily deployed
to
next-sse-chat (trpc-sse-and-websockets / trpc-pr-7024)
Summary by CodeRabbit
New Features
Documentation
Chores
✏️ Tip: You can customize this high-level summary in your review settings.