chore: refactor next-minimal to app router #6839
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
🚅 Deployed to the trpc-pr-6839 environment in trpc-sse-and-websockets
|
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the WalkthroughThis update migrates the Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant RootLayout
participant TRPCReactProvider
participant Page
participant trpc (client)
participant tRPC API Route
participant React Query Client
Browser->>RootLayout: Load app
RootLayout->>TRPCReactProvider: Wrap children with tRPC & React Query context
Browser->>Page: Navigate to /
Page->>trpc (client): Prefetch greeting query
trpc (client)->>tRPC API Route: HTTP request for greeting
tRPC API Route->>trpc (client): Respond with greeting data
Page->>React Query Client: HydrateClient wraps Content
Content->>trpc (client): useTRPC for query/subscription
trpc (client)->>tRPC API Route: Query/subscribe as needed
Poem
✨ Finishing Touches🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![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 (2)
examples/next-minimal-starter/src/app/layout.tsx (1)
4-5: Remove unused imports.The imports
trpcfrom '../trpc/server/server' andTRPCProviderare not used in this component. OnlyTRPCReactProvideris needed.-import { trpc } from '../trpc/server/server'; -import { TRPCProvider, TRPCReactProvider } from '../trpc/trpc-client'; +import { TRPCReactProvider } from '../trpc/trpc-client';examples/next-minimal-starter/src/trpc/trpc-client.tsx (1)
9-9: Remove unused import.
httpBatchStreamLinkis imported but not used in the code. OnlyhttpBatchLinkis used in the splitLink configuration.- httpBatchStreamLink,
📜 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)
examples/next-minimal-starter/README.md(2 hunks)examples/next-minimal-starter/next-env.d.ts(1 hunks)examples/next-minimal-starter/package.json(1 hunks)examples/next-minimal-starter/src/app/api/trpc/[trpc]/route.ts(1 hunks)examples/next-minimal-starter/src/app/content.tsx(1 hunks)examples/next-minimal-starter/src/app/layout.tsx(1 hunks)examples/next-minimal-starter/src/app/page.tsx(1 hunks)examples/next-minimal-starter/src/pages/_app.tsx(0 hunks)examples/next-minimal-starter/src/pages/index.tsx(0 hunks)examples/next-minimal-starter/src/trpc/query-client.ts(1 hunks)examples/next-minimal-starter/src/trpc/server/init.ts(1 hunks)examples/next-minimal-starter/src/trpc/server/routers/_app.ts(1 hunks)examples/next-minimal-starter/src/trpc/server/server.tsx(1 hunks)examples/next-minimal-starter/src/trpc/trpc-client.tsx(1 hunks)examples/next-minimal-starter/src/utils/trpc.ts(0 hunks)examples/next-minimal-starter/tsconfig.json(1 hunks)
💤 Files with no reviewable changes (3)
- examples/next-minimal-starter/src/pages/_app.tsx
- examples/next-minimal-starter/src/utils/trpc.ts
- examples/next-minimal-starter/src/pages/index.tsx
🧰 Additional context used
🧬 Code Graph Analysis (6)
examples/next-minimal-starter/src/app/page.tsx (2)
examples/next-minimal-starter/src/trpc/server/server.tsx (3)
prefetch(20-30)trpc(14-18)HydrateClient(32-40)examples/next-minimal-starter/src/app/content.tsx (1)
Content(65-75)
examples/next-minimal-starter/src/app/api/trpc/[trpc]/route.ts (2)
packages/server/src/adapters/fetch/fetchRequestHandler.ts (1)
fetchRequestHandler(24-80)examples/next-minimal-starter/src/trpc/server/routers/_app.ts (1)
appRouter(11-64)
examples/next-minimal-starter/src/app/layout.tsx (1)
examples/next-minimal-starter/src/trpc/trpc-client.tsx (1)
TRPCReactProvider(36-73)
examples/next-minimal-starter/src/trpc/query-client.ts (1)
examples/next-minimal-starter/src/trpc/transformer.ts (1)
transformer(8-8)
examples/next-minimal-starter/src/trpc/server/routers/_app.ts (1)
examples/next-minimal-starter/src/trpc/server/init.ts (2)
router(31-31)publicProcedure(29-29)
examples/next-minimal-starter/src/app/content.tsx (1)
examples/next-minimal-starter/src/trpc/server/server.tsx (1)
trpc(14-18)
⏰ Context from checks skipped due to timeout of 90000ms (18)
- GitHub Check: E2E-tests (soa)
- GitHub Check: E2E-tests (next-minimal-starter)
- GitHub Check: E2E-tests (.test/internal-types-export)
- GitHub Check: E2E-tests (.experimental/next-app-dir)
- GitHub Check: E2E-tests (cloudflare-workers)
- GitHub Check: E2E-tests (express-minimal)
- GitHub Check: E2E-tests (.test/diagnostics-big-router)
- GitHub Check: e2e-legacy-node (next-prisma-todomvc, 20.x)
- GitHub Check: E2E-tests (.test/ssg)
- GitHub Check: e2e-legacy-node (next-prisma-websockets-starter, 18.x)
- GitHub Check: e2e-legacy-node (next-prisma-todomvc, 18.x)
- GitHub Check: e2e-legacy-node (next-prisma-websockets-starter, 20.x)
- GitHub Check: E2E-tests (Bun) (bun, ubuntu-latest)
- GitHub Check: Test a monorepo using built declaration files
- GitHub Check: Release using pkg.pr.new
- GitHub Check: E2E-tests (Deno) (deno-deploy)
- GitHub Check: test
- GitHub Check: Lint and auto-fix
🔇 Additional comments (24)
examples/next-minimal-starter/next-env.d.ts (1)
5-5: Updated link reflects current Next .js docs – looks good.examples/next-minimal-starter/src/trpc/query-client.ts (1)
7-24: Well-structured query client factory with proper SSR support.The implementation correctly configures React Query for server-side rendering with appropriate serialization/deserialization handling and includes pending queries in dehydration, which ensures smooth hydration on the client side.
examples/next-minimal-starter/tsconfig.json (1)
25-25: Appropriate removal of path aliases for the App Router migration.Removing the custom path alias mapping simplifies the configuration and aligns with the restructured codebase that no longer requires these mappings.
examples/next-minimal-starter/README.md (1)
1-1: Clear documentation updates reflecting the App Router migration.The title update and switch to pnpm commands properly document the architectural changes and align with modern package management practices.
Also applies to: 10-11, 19-19
examples/next-minimal-starter/package.json (1)
12-12: Appropriate dependency updates for the tRPC + React Query migration.The addition of React Query devtools and the migration to
@trpc/tanstack-react-querycorrectly aligns with the newer tRPC integration patterns and provides better development experience.Also applies to: 16-16
examples/next-minimal-starter/src/app/page.tsx (1)
4-12: Well-implemented App Router page with proper data prefetching and hydration.The component correctly implements the prefetch pattern using
voidfor fire-and-forget semantics and wraps the content withHydrateClientto ensure proper server-side data hydration on the client side.examples/next-minimal-starter/src/app/api/trpc/[trpc]/route.ts (1)
1-30: LGTM! Clean App Router implementation.The tRPC API route handler is properly implemented for Next.js App Router. The use of
fetchRequestHandlerwith correct configuration including router, context creation, and error handling is appropriate. Exporting both GET and POST handlers follows App Router conventions.examples/next-minimal-starter/src/trpc/server/routers/_app.ts (3)
7-7: LGTM! Import path correctly updated.The import path change from the previous alias to relative path aligns with the new file structure and App Router migration.
11-11: LGTM! Proper export for App Router.Exporting
appRouteris necessary for the new API route handler to consume it, which is the correct approach for App Router architecture.
16-20: LGTM! Improved API flexibility.Making the input schema optional provides better API flexibility by allowing calls without any input parameters.
examples/next-minimal-starter/src/trpc/server/init.ts (4)
11-11: LGTM! Import path simplified.The import path simplification aligns with the new file structure.
13-18: LGTM! Proper context setup.The
createContextfunction is correctly implemented as an async function returning an empty object. The documentation reference is helpful for future extensions.
20-20: LGTM! Correct context type definition.The Context type is properly derived from the createContext function's return type.
22-24: LGTM! Proper tRPC initialization with context.The tRPC initialization correctly includes the Context type, enabling proper type inference throughout the application.
examples/next-minimal-starter/src/app/layout.tsx (2)
9-12: LGTM! Proper metadata configuration.The metadata export is correctly configured for Next.js App Router.
14-30: LGTM! Correct layout implementation.The RootLayout component properly wraps children with TRPCReactProvider and applies the Inter font. The async function signature and HTML structure are correct for App Router.
examples/next-minimal-starter/src/trpc/trpc-client.tsx (3)
20-20: LGTM! Proper tRPC context creation.The tRPC context is correctly created with the AppRouter type, providing proper type inference for the client.
22-34: LGTM! Proper query client management.The query client management correctly handles server vs browser environments, ensuring a single client instance on the browser while creating new ones on the server. The comments explaining the importance are helpful.
36-73: LGTM! Well-structured provider component.The TRPCReactProvider component is well-implemented with:
- Proper query client initialization
- Correct tRPC client setup with appropriate links
- Proper provider nesting (QueryClientProvider -> TRPCProvider)
- Good comments explaining the implementation choices
examples/next-minimal-starter/src/app/content.tsx (2)
1-5: LGTM! Clean imports and proper client component setup.The 'use client' directive is correctly placed, and the imports are appropriate for the tRPC and React Query integration patterns used in this App Router setup.
34-63: Well-implemented subscription example with proper error handling.The subscription component correctly handles real-time data updates and provides user-friendly error recovery with the reset functionality. The table structure clearly displays subscription state information.
examples/next-minimal-starter/src/trpc/server/server.tsx (3)
1-1: Excellent use of server-only directive.The
server-onlyimport ensures this module cannot be accidentally imported on the client side, which is crucial for server-side tRPC setup and prevents bundle bloat.
13-18: Well-designed caching strategy for query client stability.The cached
getQueryClientensures the same query client instance is reused during a single request, which is important for consistent state management in server components.
32-40: Clean hydration boundary implementation.The
HydrateClientcomponent correctly dehydrates the server query client state and provides it to the client for seamless hydration. This is a standard and effective pattern for SSR with React Query.
@trpc/client
@trpc/next
@trpc/react-query
@trpc/server
@trpc/tanstack-react-query
@trpc/upgrade
commit: |
Closes #
🎯 Changes
Refactors next-minimal to app router
✅ Checklist
Summary by CodeRabbit
New Features
Chores
@trpc/react-queryand adding@tanstack/react-query-devtoolsand@trpc/tanstack-react-query.Refactor
Style
Documentation