feat(trpc): trpc v11 support #1656
Conversation
WalkthroughWalkthroughThe changes introduce new TypeScript functions and utility types to facilitate the integration of TRPC with Next.js and React applications. Additionally, they enhance type safety, flexibility, and version handling capabilities for the generator and helper functions. These modifications streamline customization for different TRPC library versions, ensuring robust type management and functionality across various contexts. Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add 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: 1
Outside diff range, codebase verification and nitpick comments (8)
packages/plugins/trpc/tests/t3.test.ts (1)
31-42: Ensure test isolation and cleanup.The test case for TRPC v11 is well-structured, but consider adding steps to ensure test isolation and cleanup, such as removing installed dependencies or resetting the environment after the test.
packages/plugins/trpc/src/helpers.ts (2)
Line range hint
187-243: Add comments to explain version-specific logic.The
generateRouterTypingfunction includes conditional logic based on the TRPC version. Adding comments to explain the differences between versions v10 and v11 would improve code readability and maintainability.
261-276: Add comments to explain version-specific imports.The
generateRouterTypingImportsfunction uses conditional imports based on the TRPC version. Adding comments to clarify why certain imports are used for each version would enhance understanding.packages/plugins/trpc/src/generator.ts (5)
53-69: Add comments to explain version checks and required options.The
generatefunction includes checks for the TRPC version and required options for v11. Adding comments to explain these checks and the rationale behind them would improve code clarity.
121-147: Add comments to explain version-specific imports.The
createAppRouterfunction uses conditional imports based on the TRPC version. Adding comments to clarify the differences in imports for v10 and v11 would enhance understanding.
Line range hint
157-178: Add comments to explain version-specific router creation logic.The
createAppRouterfunction includes different router creation logic for TRPC v10 and v11. Adding comments to explain these differences would improve code readability.
263-280: Add comments to explain version-specific client helper creation.The
createClientHelpersfunction loads different resources based on the TRPC version. Adding comments to explain the rationale behind these choices would enhance code clarity.
306-334: Add comments to explain version-specific imports in model router creation.The
generateModelCreateRouterfunction uses conditional imports based on the TRPC version. Adding comments to clarify these differences would improve understanding.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (6)
- packages/plugins/trpc/res/client/v11/next.ts (1 hunks)
- packages/plugins/trpc/res/client/v11/react.ts (1 hunks)
- packages/plugins/trpc/res/client/v11/utils.ts (1 hunks)
- packages/plugins/trpc/src/generator.ts (10 hunks)
- packages/plugins/trpc/src/helpers.ts (3 hunks)
- packages/plugins/trpc/tests/t3.test.ts (1 hunks)
Additional context used
Biome
packages/plugins/trpc/res/client/v11/utils.ts
[error] 5-5: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
[error] 5-5: Don't use 'Symbol' as a type.
Use lowercase primitives for consistency.
Safe fix: Use 'symbol' instead(lint/complexity/noBannedTypes)
Additional comments not posted (2)
packages/plugins/trpc/res/client/v11/next.ts (1)
9-16: LGTM! The function is well-implemented.The
createTRPCNextfunction correctly integrates TRPC with Next.js, leveraging utility types for enhanced type safety and flexibility.packages/plugins/trpc/res/client/v11/react.ts (1)
9-16: LGTM! The function is well-implemented.The
createTRPCReactfunction correctly integrates TRPC with React, leveraging utility types for enhanced type safety and flexibility.
There was a problem hiding this comment.
Actionable comments posted: 7
Outside diff range, codebase verification and nitpick comments (2)
packages/plugins/trpc/tests/projects/t3-trpc-v11/src/app/api/trpc/[trpc]/route.ts (1)
1-6: Potential issue withenvimport pathThe imports for
appRouterandcreateTRPCContextare correctly set up and verified. However, theenvimport might be incorrect or missing, as the expectedenv.tsfile was not found in the relevant directory.
- Ensure that the
env.tsfile exists in the correct path or update the import statement accordingly.Analysis chain
Imports are relevant and necessary.
The imports are correctly set up for TRPC handler configuration. Ensure that the paths are correct and accessible.
Run the following script to verify the existence of the specified import paths:
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of the specified import paths in the route.ts file. # Test: Check if the specified paths exist. Expect: Paths should exist. fd 'root' --type f --glob 'packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/**' fd 'trpc' --type f --glob 'packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/**'Length of output: 497
Script:
#!/bin/bash # Description: Verify the existence of the specific import files in the route.ts file. # Search for the 'root' file that corresponds to the appRouter import fd 'root.ts' --type f # Search for the 'trpc' file that corresponds to the createTRPCContext import fd 'trpc.ts' --type f # Search for the 'env' file that corresponds to the env import fd 'env.ts' --type fLength of output: 440
packages/plugins/trpc/tests/projects/t3-trpc-v11/README.md (1)
23-23: Consider using a more formal term than 'awesome'.The word "awesome" is informal. Consider using a more formal alternative like "excellent" or "comprehensive" to maintain a professional tone.
Tools
LanguageTool
[style] ~23-~23: Consider using a more formal and expressive alternative to ‘awesome’.
Context: ...-currently-available) — Check out these awesome tutorials You can check out the [creat...(AWESOME)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (10)
packages/plugins/trpc/tests/projects/t3-trpc-v11/package-lock.jsonis excluded by!**/package-lock.json,!**/*.jsonpackages/plugins/trpc/tests/projects/t3-trpc-v11/package.jsonis excluded by!**/*.jsonpackages/plugins/trpc/tests/projects/t3-trpc-v11/public/favicon.icois excluded by!**/*.ico,!**/*.icopackages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/routers/generated/client/react.tsis excluded by!**/generated/**packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/routers/generated/client/utils.tsis excluded by!**/generated/**packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/routers/generated/helper.tsis excluded by!**/generated/**packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/routers/generated/routers/Post.router.tsis excluded by!**/generated/**packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/routers/generated/routers/User.router.tsis excluded by!**/generated/**packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/routers/generated/routers/index.tsis excluded by!**/generated/**packages/plugins/trpc/tests/projects/t3-trpc-v11/tsconfig.jsonis excluded by!**/*.json
Files selected for processing (20)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/.eslintrc.cjs (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/.gitignore (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/README.md (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/next.config.js (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/prisma/schema.prisma (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/schema.zmodel (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/app/_components/post.tsx (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/app/api/trpc/[trpc]/route.ts (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/app/index.module.css (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/app/layout.tsx (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/app/page.tsx (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/env.js (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/root.ts (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/routers/generated-router-helper.ts (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/trpc.ts (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/db.ts (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/styles/globals.css (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/trpc/query-client.ts (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/trpc/react.tsx (1 hunks)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/trpc/server.ts (1 hunks)
Files skipped from review due to trivial changes (4)
- packages/plugins/trpc/tests/projects/t3-trpc-v11/.gitignore
- packages/plugins/trpc/tests/projects/t3-trpc-v11/prisma/schema.prisma
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/routers/generated-router-helper.ts
- packages/plugins/trpc/tests/projects/t3-trpc-v11/src/styles/globals.css
Additional context used
LanguageTool
packages/plugins/trpc/tests/projects/t3-trpc-v11/README.md
[style] ~23-~23: Consider using a more formal and expressive alternative to ‘awesome’.
Context: ...-currently-available) — Check out these awesome tutorials You can check out the [creat...(AWESOME)
Biome
packages/plugins/trpc/tests/projects/t3-trpc-v11/src/trpc/react.tsx
[error] 20-20: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.(lint/suspicious/noAssignInExpressions)
Additional comments not posted (21)
packages/plugins/trpc/tests/projects/t3-trpc-v11/next.config.js (1)
5-5: Consider the implications of asynchronous import in configuration.Using
await importin a configuration file is unconventional and may lead to issues if the configuration is required synchronously. Ensure that this asynchronous behavior is intentional and handled appropriately.packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/db.ts (1)
1-17: LGTM! Verify environment variable usage.The setup for the Prisma client and the use of a global variable is well-implemented. Ensure that the environment variables, especially
NODE_ENV, are correctly set and used across the application.Run the following script to check the usage of
env.NODE_ENV:Verification successful
Environment Variable Usage Verified
The usage of
env.NODE_ENVis consistent and correctly implemented across the application, particularly in thet3-trpc-v11project files. The environment variable is accessed both directly and through theenvobject, which is a common practice for centralized management. No issues found.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `env.NODE_ENV`. # Test: Search for the usage of `env.NODE_ENV`. Expect: Correct usage across the application. rg --type js --type ts 'env\.NODE_ENV'Length of output: 1512
packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/root.ts (1)
1-21: LGTM!The setup for the primary router and the server-side caller factory is well-structured and clearly documented. The use of the factory pattern is a good practice for creating server-side callers.
packages/plugins/trpc/tests/projects/t3-trpc-v11/src/app/layout.tsx (1)
1-24: LGTM!The
RootLayoutcomponent is well-structured and integrates TRPC with Next.js effectively. The use ofTRPCReactProviderensures that TRPC is available throughout the application. The metadata setup is also appropriate for a Next.js app.packages/plugins/trpc/tests/projects/t3-trpc-v11/src/trpc/query-client.ts (1)
1-25: LGTM!The
createQueryClientfunction is well-configured for SSR with appropriate serialization and deserialization usingSuperJSON. The defaultstaleTimeis set to avoid immediate refetching, which is a good practice.packages/plugins/trpc/tests/projects/t3-trpc-v11/src/trpc/server.ts (1)
1-30: LGTM!The server setup for TRPC is efficient and well-structured. The use of
cachefor context and query client creation is optimal for performance. The integration with React Server Components is handled correctly.packages/plugins/trpc/tests/projects/t3-trpc-v11/schema.zmodel (4)
4-11: Generator and datasource configuration looks good.The setup for Prisma Client JS and SQLite datasource is standard for local development.
22-28: User model definition is correct.The model is well-defined with appropriate constraints and relations.
30-41: Post model definition is correct.The model is well-defined with appropriate constraints, relations, and indexing.
13-19: TRPC plugin configuration is well-defined.The configuration aligns with TRPC v11 integration. Ensure that the specified paths are correct and accessible.
Run the following script to verify the existence of the specified paths:
Verification successful
To correctly verify the existence of the specified paths in the TRPC plugin configuration, let's adjust the script to search for the specific files without using unsupported glob patterns.
TRPC plugin paths are valid and accessible.
The
generated-router-helper.tsfile was found in the expected directory, confirming that the specified paths in the TRPC plugin configuration are correct. No further action is required.
- Path verified:
./packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/routers/generated-router-helper.tsScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of the specified paths in the TRPC plugin configuration. # Test: Check if the specified paths exist. Expect: Paths should exist. fd 'generated-router-helper' --type f --glob 'packages/plugins/trpc/tests/projects/t3-trpc-v11/src/**'Length of output: 245
Script:
#!/bin/bash # Description: Verify the existence of the specified paths in the TRPC plugin configuration. # Test: Check if the 'generated-router-helper' file exists in the expected directory. fd 'generated-router-helper' --type f --exec echo "Found: {}"Length of output: 169
packages/plugins/trpc/tests/projects/t3-trpc-v11/src/app/api/trpc/[trpc]/route.ts (2)
12-16: Context creation function is correctly implemented.The function provides necessary context for TRPC requests using headers from
NextRequest.
18-34: Handler setup is correctly implemented.The handler is well-configured for TRPC requests with appropriate error handling in development mode.
packages/plugins/trpc/tests/projects/t3-trpc-v11/.eslintrc.cjs (2)
1-6: Parser configuration looks good.The parser is correctly set up for TypeScript projects with the project option enabled.
7-40: Plugins, extends, and rules configuration is comprehensive.The configuration follows best practices for TypeScript projects with appropriate customizations.
packages/plugins/trpc/tests/projects/t3-trpc-v11/src/env.js (1)
1-42: Well-structured environment configuration.The use of
zodfor environment variable validation is a good practice, and the file is well-documented.packages/plugins/trpc/tests/projects/t3-trpc-v11/src/app/page.tsx (1)
1-37: Well-structured React component.The component is well-organized, and the use of Next.js features and custom components is appropriate.
packages/plugins/trpc/tests/projects/t3-trpc-v11/src/app/index.module.css (1)
1-177: CSS styles are well-structured.The CSS styles are consistent and well-organized.
packages/plugins/trpc/tests/projects/t3-trpc-v11/src/server/api/trpc.ts (4)
1-14: File header and imports look good.The file header provides clear guidance on when to edit the file, and the necessary imports are included.
27-32:createTRPCContextfunction is well-implemented.The function correctly sets up the context for tRPC procedures by including the database and request headers.
41-52: tRPC initialization is correctly configured.The use of
superjsonas a transformer and the error formatter forZodErrorensures type-safe error handling.
59-59:createCallerFactoryexport is appropriate.This export is necessary for enabling server-side calls in tRPC.
packages/plugins/trpc/tests/projects/t3-trpc-v11/src/app/_components/post.tsx
Show resolved
Hide resolved
packages/plugins/trpc/tests/projects/t3-trpc-v11/src/app/_components/post.tsx
Show resolved
Hide resolved
packages/plugins/trpc/tests/projects/t3-trpc-v11/src/app/_components/post.tsx
Show resolved
Hide resolved
packages/plugins/trpc/tests/projects/t3-trpc-v11/src/app/_components/post.tsx
Show resolved
Hide resolved
Fixes #859