fix orpc templates #302
fix orpc templates #302
Conversation
|
WalkthroughThis change removes the ORPC React context and associated custom hooks from multiple templates, refactors components to use direct ORPC client imports, and updates relevant dependency versions. It also cleans up provider hierarchies and import statements, and removes unused ORPC-related dependencies from the Solid template. Changes
Sequence Diagram(s)sequenceDiagram
participant Component
participant ORPC_Client
Note over Component: (Old) With useORPC hook
Component->>+useORPC: Call hook
useORPC->>ORPC_Client: Access via context
Component->>ORPC_Client: Use client for queries
Note over Component: (New) Direct import
Component->>ORPC_Client: Use client for queries (direct import)
Possibly related PRs
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 using PR comments)
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: 1
🧹 Nitpick comments (2)
apps/cli/templates/auth/web/react/tanstack-start/src/routes/dashboard.tsx.hbs (1)
21-22: Clean up empty conditional block.The empty conditional block for ORPC can be removed to clean up the template.
{{#if (eq api "orpc")}} - {{/if}} + {{/if}}apps/cli/templates/examples/todo/web/react/tanstack-start/src/routes/todos.tsx.hbs (1)
79-80: Clean up empty conditional block.The empty ORPC conditional block can be removed to clean up the template.
{{#if (eq api "orpc")}} - {{/if}} + {{/if}}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (13)
apps/cli/src/constants.ts(1 hunks)apps/cli/templates/api/orpc/native/utils/orpc.ts.hbs(0 hunks)apps/cli/templates/api/orpc/server/base/src/lib/orpc.ts.hbs(0 hunks)apps/cli/templates/api/orpc/web/react/base/src/utils/orpc.ts.hbs(0 hunks)apps/cli/templates/auth/web/react/tanstack-start/src/routes/dashboard.tsx.hbs(1 hunks)apps/cli/templates/examples/todo/web/react/tanstack-start/src/routes/todos.tsx.hbs(1 hunks)apps/cli/templates/frontend/react/next/src/components/providers.tsx.hbs(1 hunks)apps/cli/templates/frontend/react/react-router/src/root.tsx.hbs(2 hunks)apps/cli/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs(0 hunks)apps/cli/templates/frontend/react/tanstack-start/package.json(2 hunks)apps/cli/templates/frontend/react/tanstack-start/src/router.tsx.hbs(2 hunks)apps/cli/templates/frontend/react/tanstack-start/src/routes/index.tsx.hbs(1 hunks)apps/cli/templates/frontend/solid/package.json(0 hunks)
💤 Files with no reviewable changes (5)
- apps/cli/templates/api/orpc/server/base/src/lib/orpc.ts.hbs
- apps/cli/templates/frontend/solid/package.json
- apps/cli/templates/api/orpc/native/utils/orpc.ts.hbs
- apps/cli/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs
- apps/cli/templates/api/orpc/web/react/base/src/utils/orpc.ts.hbs
🔇 Additional comments (13)
apps/cli/templates/auth/web/react/tanstack-start/src/routes/dashboard.tsx.hbs (2)
6-6: LGTM! Consistent refactoring pattern.The change from
useORPChook to directorpcimport aligns with the broader refactoring to remove React context dependency.
29-29:✅ Verification successful
Verify that orpc object provides the same interface.
Ensure that the directly imported
orpcobject provides the same methods and interface as the previoususeORPC()hook return value.
🏁 Script executed:
#!/bin/bash # Description: Verify that the orpc utils file exports the correct interface # Expected: orpc export should have privateData method rg -A 10 "export.*orpc" --type tsLength of output: 507
🏁 Script executed:
#!/bin/bash echo "1. Listing files with “orpc” in the name:" fd orpc echo -e "\n2. Searching for ‘const orpc’ definitions:" rg -n "const orpc" --iglob "*.ts" --iglob "*.tsx" echo -e "\n3. Searching for ‘export default orpc’ statements:" rg -n "export default orpc" --iglob "*.ts" --iglob "*.tsx" echo -e "\n4. Searching for ‘export const orpc’ statements:" rg -n "export const orpc" --iglob "*.ts" --iglob "*.tsx" echo -e "\n5. Checking for privateData usage on orpc:" rg -n "orpc\.privateData" --iglob "*.ts" --iglob "*.tsx" echo -e "\n6. Locating the old hook for comparison (‘useORPC’):" rg -n "useORPC" --iglob "*.ts" --iglob "*.tsx" echo -e "\n7. Verifying queryOptions signatures across codebase:" rg -n "queryOptions" --iglob "*.ts" --iglob "*.tsx"Length of output: 1791
#!/bin/bash # Locate and display the orpc utility template for React to verify its exported interface # Find the orpc.ts.hbs file under the React web API templates file=$(fd 'utils/orpc.ts.hbs' apps/cli/templates/api/orpc/web/react/base/) echo "Inspecting: $file" # Print the first 200 lines to see the export of orpc and its privateData definitions sed -n '1,200p' "$file"
🏁 Script executed:
#!/bin/bash # Display the React ORPC utils template to verify exported interface # Path identified from earlier scan file="apps/cli/templates/api/orpc/web/react/base/src/utils/orpc.ts.hbs" echo "Inspecting: $file" sed -n '1,200p' "$file"Length of output: 1471
No action needed—
orpcinterface is correctThe
orpcobject is instantiated viacreateTanstackQueryUtils(client)in
apps/cli/templates/api/orpc/web/react/base/src/utils/orpc.ts.hbsand automatically
exposes all router endpoints (includingprivateData.queryOptions). The previous
useORPC()hook has been replaced by this utility and provides the same methods.apps/cli/templates/frontend/react/tanstack-start/src/routes/index.tsx.hbs (2)
12-12: LGTM! Consistent with the refactoring pattern.The change from
useORPChook to directorpcimport is implemented consistently.
43-43:❓ Verification inconclusive
Verify orpc.healthCheck interface consistency.
Ensure the directly imported
orpcobject maintains the samehealthCheck.queryOptions()interface as the previous hook-based approach.
🏁 Script executed:
#!/bin/bash # Description: Check for healthCheck method in orpc utils # Expected: orpc should export healthCheck method rg -A 5 "healthCheck" apps/cli/templates --type tsLength of output: 50
Action Required: Verify
orpc.healthCheck.queryOptions()InterfacePlease manually confirm that the generated ORPC client still exports a
healthCheckmethod with a compatiblequeryOptions()signature. In this template we invoke:• apps/cli/templates/frontend/react/tanstack-start/src/routes/index.tsx.hbs
const healthCheck = useQuery(orpc.healthCheck.queryOptions());Verify in your generated project (e.g. inspect
src/generated/orpc.tsor wherever the client lives) that:
healthCheckis exported byorpchealthCheck.queryOptions()exists and accepts the same parameters/returns the same shape as beforeapps/cli/templates/examples/todo/web/react/tanstack-start/src/routes/todos.tsx.hbs (2)
26-26: LGTM! Consistent ORPC refactoring.The import change from
useORPCto directorpcimport follows the established refactoring pattern.
104-122:❓ Verification inconclusive
Verify orpc.todo interface provides all required methods.
Ensure the directly imported
orpcobject provides all the todo methods (getAll,create,toggle,delete) with the same interface as the previous hook-based approach.
🏁 Script executed:
#!/bin/bash # Description: Verify orpc todo methods are available # Expected: orpc should export todo methods for getAll, create, toggle, delete rg -A 10 "todo\.(getAll|create|toggle|delete)" apps/cli/templates --type tsLength of output: 77
🏁 Script executed:
#!/usr/bin/env bash # Search for orpc import and todo methods in HBS templates rg "import.*orpc" -n apps/cli/templates --glob "*.hbs" rg "orpc\.todo\.(getAll|create|toggle|delete)" -n apps/cli/templates --glob "*.hbs"Length of output: 12428
🏁 Script executed:
#!/usr/bin/env bash # Locate the ORPC client utility file in the tanstack-start template echo "Searching for createORPCClient usage..." rg -l "createORPCClient" -n apps/cli/templates/examples/todo/web/react/tanstack-start # Print the contents of the ORPC utility file if it exists ORPC_UTIL=$(rg -l "createORPCClient" -n apps/cli/templates/examples/todo/web/react/tanstack-start) if [[ -f "$ORPC_UTIL" ]]; then echo "Found ORPC util at $ORPC_UTIL, printing first 200 lines:" sed -n '1,200p' "$ORPC_UTIL" else echo "ORPC utility file not found under tanstack-start template." exit 1 fiLength of output: 424
🏁 Script executed:
#!/usr/bin/env bash # Search for the ORPC utility template in the tanstack-start example echo "Looking for orpc.ts.hbs in the tanstack-start example..." ORPC_FILE=$(rg -l "orpc.ts.hbs" -n apps/cli/templates/examples/todo/web/react/tanstack-start) if [[ -n "$ORPC_FILE" ]]; then echo "Found ORPC template at $ORPC_FILE" echo "Printing first 200 lines:" sed -n '1,200p' "$ORPC_FILE" else echo "No orpc.ts.hbs file found under the tanstack-start example." exit 1 fiLength of output: 369
🏁 Script executed:
#!/usr/bin/env bash # List all .hbs files under the tanstack-start example to locate the utils directory echo "Listing .hbs files under tanstack-start/src:" find apps/cli/templates/examples/todo/web/react/tanstack-start/src -type f -name "*.hbs" | sed 's/^/FILE: /'Length of output: 298
🏁 Script executed:
#!/usr/bin/env bash # List all files in the tanstack-start example to locate the ORPC util template echo "Listing all files under tanstack-start example:" find apps/cli/templates/examples/todo/web/react/tanstack-start -type f | sed 's/^/FILE: /'Length of output: 286
🏁 Script executed:
#!/usr/bin/env bash # Locate ORPC utility file in the frontend/react/tanstack-start template echo "Searching for orpc.ts.hbs under apps/cli/templates/frontend/react/tanstack-start..." FILE=$(find apps/cli/templates/frontend/react/tanstack-start -type f -name "orpc.ts.hbs") if [[ -n "$FILE" ]]; then echo "Found ORPC util template: $FILE" sed -n '1,200p' "$FILE" else echo "No orpc.ts.hbs file under frontend/react/tanstack-start" exit 1 fiLength of output: 411
🏁 Script executed:
#!/usr/bin/env bash # List all files under the frontend/react/tanstack-start template to locate the utils directory echo "Listing all files under apps/cli/templates/frontend/react/tanstack-start:" find apps/cli/templates/frontend/react/tanstack-start -type f | sed 's/^/FILE: /'Length of output: 961
🏁 Script executed:
#!/usr/bin/env bash # Print the ORPC client setup in the generic tanstack-start template FILE="apps/cli/templates/frontend/react/tanstack-start/src/api.ts" if [[ -f "$FILE" ]]; then echo "=== $FILE ===" sed -n '1,200p' "$FILE" else echo "ERROR: $FILE not found" exit 1 fiLength of output: 523
Verify ORPC
todomethods are exported correctlyPlease confirm that the generated ORPC client utility exports a
todoobject with all four methods—getAll,create,toggle, anddelete—each providing the samequeryOptions/mutationOptionsAPI used below:
File:
apps/cli/templates/examples/todo/web/react/tanstack-start/src/routes/todos.tsx.hbs
Lines 104–122:const todos = useQuery(orpc.todo.getAll.queryOptions()); const createMutation = useMutation( orpc.todo.create.mutationOptions({ … }), ); const toggleMutation = useMutation( orpc.todo.toggle.mutationOptions({ … }), ); const deleteMutation = useMutation( orpc.todo.delete.mutationOptions({ … }), );Ensure that in the generated project’s
src/utils/orpc.ts(or equivalent) you have:export const orpc = { todo: { getAll: { queryOptions: /* … */ }, create: { mutationOptions: /* … */ }, toggle: { mutationOptions: /* … */ }, delete: { mutationOptions: /* … */ }, }, // … };apps/cli/templates/frontend/react/tanstack-start/package.json (1)
17-22:✅ Verification successful
Verify compatibility of dependency version updates.
Multiple packages have been updated with significant version jumps. These coordinated updates should be tested to ensure compatibility, especially with React 19.1.0 and the new Tanstack packages.
Also applies to: 27-28, 38-38, 41-42, 46-46
🏁 Script executed:
#!/bin/bash # Check for breaking changes and compatibility issues in updated dependencies echo "Checking React 19.1.0 breaking changes and compatibility..." curl -s "https://api.github.com/repos/facebook/react/releases" | jq -r '.[] | select(.tag_name | startswith("v19.")) | .name + ": " + .body' | head -5 echo -e "\nChecking Tanstack Router 1.120.x releases..." curl -s "https://api.github.com/repos/TanStack/router/releases" | jq -r '.[] | select(.tag_name | startswith("v1.120")) | .name + ": " + (.body | split("\n")[0:3] | join("\n"))' | head -10 echo -e "\nChecking Vite 6.3.5 breaking changes..." curl -s "https://api.github.com/repos/vitejs/vite/releases" | jq -r '.[] | select(.tag_name | startswith("v6.")) | .name + ": " + (.body | split("\n")[0:3] | join("\n"))' | head -10Length of output: 2921
Dependency Version Updates Verified
All updated packages remain within their existing major versions and show no documented breaking changes:
- React 19.1.0 adds a development‐only “Owner Stack” feature; no breaking changes from 19.0.0
- TanStack Router moved through patch/minor releases (1.120.x); no major version change
- @tanstack/react-query and related @tanstack/* packages follow the same minor/patch bump
- Vite 6.3.5 is a patch update; full changelog indicates no breaking changes
- @tailwindcss/vite 4.1.8 is a patch bump
These upgrades align with semver rules. Please run the full test suite and perform a quick smoke test to confirm everything works as expected.
apps/cli/templates/frontend/react/tanstack-start/src/router.tsx.hbs (2)
23-24: LGTM: Simplified ORPC imports align with context removal.The removal of
ORPCContextandorpcQueryClientimports while retaining directorpcclient access is consistent with the broader refactoring to eliminate React context patterns.
127-131:✅ Verification successful
Verify orpc client accessibility after context removal.
The
ORPCContext.Providerwrapper has been removed, which simplifies the component tree. Ensure that components previously usinguseORPC()hook have been updated to import theorpcclient directly.
🏁 Script executed:
#!/bin/bash # Check for any remaining useORPC hook usage that needs to be updated echo "Searching for remaining useORPC usage..." rg -A 3 "useORPC" --type ts --type tsx echo -e "\nSearching for orpc direct imports..." rg -A 2 "import.*orpc.*from" --type ts --type tsx echo -e "\nSearching for ORPCContext usage..." rg "ORPCContext" --type ts --type tsxLength of output: 477
🏁 Script executed:
#!/bin/bash # Re-run searches using globs to include both .ts and .tsx files echo "Searching for remaining useORPC usage..." rg 'useORPC' -g '*.ts' -g '*.tsx' || true echo -e "\nSearching for orpc direct imports..." rg 'import.*orpc.*from' -g '*.ts' -g '*.tsx' || true echo -e "\nSearching for ORPCContext usage..." rg 'ORPCContext' -g '*.ts' -g '*.tsx' || trueLength of output: 493
ORPCContext Removal Verified – No Remaining useORPC References
I’ve searched the React template and entire repo—there are nouseORPChook calls and no directorpcimports in the React starter (router.tsx.hbs). The onlyorpcimport lives in the Solid template (apps/cli/templates/auth/web/solid/src/routes/dashboard.tsx), which is outside the scope of this change. No further action needed here.apps/cli/templates/frontend/react/next/src/components/providers.tsx.hbs (2)
6-15: LGTM: Improved import structure with cleaner conditionals.The simplified import structure with unified conditionals for React Query dependencies is more readable and maintainable than the previous nested approach.
39-51: LGTM: Simplified provider hierarchy aligns with ORPC refactoring.The removal of
ORPCContext.Providerwrapper and flattened JSX structure improves readability while maintaining React Query integration. This change is consistent with the broader effort to eliminate ORPC React context patterns.apps/cli/templates/frontend/react/react-router/src/root.tsx.hbs (2)
18-27: LGTM: Unified import structure improves consistency.The simplified import conditionals for React Query dependencies create a more consistent and maintainable structure across different API configurations.
82-95: LGTM: Consistent App component structure after ORPC context removal.The removal of
ORPCContext.Providerwrapper and flattened component structure aligns with the broader refactoring. The App component implementations are now more consistent across different backend/API configurations while maintaining all necessary functionality.
| "@tanstack/react-query-devtools": "^5.80.5", | ||
| "@tanstack/react-query": "^5.80.5", |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify compatibility of TanStack React Query version updates.
The version bump from ^5.69.0 to ^5.80.5 is significant and may introduce breaking changes. Ensure that all templates and generated code remain compatible with the new versions.
🌐 Web query:
What are the breaking changes between @tanstack/react-query version 5.69.0 and 5.80.5?
💡 Result:
Between versions 5.69.0 and 5.80.5 of @tanstack/react-query, several breaking changes have been introduced. Here's a summary of the key changes:
-
Unified Function Signatures: The
useQuery,useMutation, and related hooks now accept a single object parameter instead of multiple arguments. This change simplifies the API and improves type safety.Before:
useQuery(queryKey, queryFn, options);
After:
useQuery({ queryKey, queryFn, ...options });
-
Removal of Callback Functions: Callbacks like
onSuccess,onError, andonSettledhave been removed fromuseQueryandQueryObserver. To handle side effects, use React'suseEffecthook instead.Before:
useQuery({ queryKey, queryFn, onSuccess: () => { /* ... */ } });
After:
const query = useQuery({ queryKey, queryFn }); useEffect(() => { if (query.isSuccess) { // Handle success } }, [query.isSuccess]);
-
Renaming of
cacheTimetogcTime: ThecacheTimeoption has been renamed togcTimeto better reflect its purpose related to garbage collection.Before:
const queryClient = new QueryClient({ defaultOptions: { queries: { cacheTime: 1000 * 60 * 5, // 5 minutes }, }, });
After:
const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 1000 * 60 * 5, // 5 minutes }, }, });
-
Introduction of
placeholderData: ThekeepPreviousDataoption has been replaced withplaceholderData. To maintain previous data during refetches, use theplaceholderDatafunction.Before:
useQuery({ queryKey, queryFn, keepPreviousData: true });
After:
useQuery({ queryKey, queryFn, placeholderData: (prevData) => prevData, });
-
Infinite Queries Require
initialPageParam: Infinite queries now require an explicitinitialPageParamto avoid storingundefinedin the query cache.Before:
useInfiniteQuery({ queryKey, queryFn: ({ pageParam = 0 }) => fetchPage(pageParam), getNextPageParam: (lastPage) => lastPage.nextPage, });
After:
useInfiniteQuery({ queryKey, queryFn: ({ pageParam }) => fetchPage(pageParam), initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.nextPage, });
-
Renaming of
isLoadingtoisPending: TheisLoadingflag has been renamed toisPendingto more accurately represent the loading state.Before:
if (query.isLoading) { // Show loading spinner }
After:
if (query.isPending) { // Show loading spinner }
-
Removal of
removeMethod fromuseQuery: Theremovemethod has been removed fromuseQuery. To remove a query, use thequeryClient.removeQueriesmethod instead.Before:
const query = useQuery({ queryKey, queryFn }); query.remove();
After:
const queryClient = useQueryClient(); const query = useQuery({ queryKey, queryFn }); queryClient.removeQueries({ queryKey });
-
Removal of
isDataEqualOption: TheisDataEqualoption has been removed fromuseQuery. To achieve similar functionality, use thestructuralSharingoption.Before:
useQuery({ queryKey, queryFn, isDataEqual: customCompare });
After:
useQuery({ queryKey, queryFn, structuralSharing: (oldData, newData) => { return customCompare(oldData, newData) ? oldData : replaceEqualDeep(oldData, newData); }, });
For a comprehensive list of breaking changes and migration guidance, refer to the official migration guide. (github.com)
Citations:
- 1: https://github.com/TanStack/query/blob/main/docs/framework/react/guides/migrating-to-v5.md?utm_source=openai
- 2: https://github.com/TanStack/query/blob/main/docs/framework/react/guides/migrating-to-v5.md?utm_source=openai
- 3: https://github.com/TanStack/query/blob/main/docs/framework/react/guides/migrating-to-v5.md?utm_source=openai
- 4: https://github.com/TanStack/query/blob/main/docs/framework/react/guides/migrating-to-v5.md?utm_source=openai
- 5: https://github.com/TanStack/query/blob/main/docs/framework/react/guides/migrating-to-v5.md?utm_source=openai
- 6: https://github.com/TanStack/query/blob/main/docs/framework/react/guides/migrating-to-v5.md?utm_source=openai
- 7: https://github.com/TanStack/query/blob/main/docs/framework/react/guides/migrating-to-v5.md?utm_source=openai
- 8: https://github.com/TanStack/query/blob/main/docs/framework/react/guides/migrating-to-v5.md?utm_source=openai
- 9: https://github.com/TanStack/query/blob/main/docs/framework/react/guides/migrating-to-v5.md?utm_source=openai
Update CLI templates for React Query v5 API changes
The bump from ^5.69.0 → ^5.80.5 includes multiple breaking changes. Please update any React Query usage in your generated templates (e.g. under apps/cli/src/templates) to match the new API:
• Switch hooks to the object signature:
before: useQuery(key, fn, options)
after: useQuery({ queryKey: key, queryFn: fn, …options })
• Remove inline callbacks (onSuccess, onError, onSettled); use useEffect on query.isSuccess / query.isError, etc.
• Rename cacheTime → gcTime in defaultOptions.queries
• Replace keepPreviousData: true → placeholderData: prev => prev
• Add initialPageParam to all useInfiniteQuery calls
• Rename isLoading → isPending
• Replace query.remove() →
const qc = useQueryClient();
qc.removeQueries({ queryKey });• Drop isDataEqual; use the structuralSharing option for custom comparisons
Review and adjust your template files accordingly, then test generated code against React Query v5.80.5 to ensure everything still works.
🤖 Prompt for AI Agents
In apps/cli/src/constants.ts around lines 103 to 104, the React Query
dependencies were updated from version 5.69.0 to 5.80.5, which introduces
breaking API changes. Review and update all React Query usage in your CLI
templates (e.g., in apps/cli/src/templates) to use the new object parameter
signature for hooks, remove inline callbacks in favor of useEffect, rename
cacheTime to gcTime, replace keepPreviousData with placeholderData, add
initialPageParam to useInfiniteQuery calls, rename isLoading to isPending,
replace query.remove() with queryClient.removeQueries, and replace isDataEqual
with structuralSharing. After updating, test the generated code to ensure
compatibility with React Query v5.80.5.
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Chores