Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughRemoved module-level cached context: Changes
Sequence Diagram(s)sequenceDiagram
participant RouterSetup as Router Setup
participant getContext as getContext()
participant RouterFactory as createTanStackRouter
participant Provider as TanstackQueryProvider
participant SSR as setupRouterSsrQueryIntegration
participant QueryClient as QueryClient
RouterSetup->>getContext: call
getContext-->>RouterSetup: return context (includes QueryClient)
RouterSetup->>RouterFactory: createTanStackRouter(..., context)
RouterSetup->>SSR: setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient })
RouterSetup->>Provider: render Wrap with context prop (when tRPC)
Provider->>QueryClient: read/use queryClient from context
SSR-->>RouterSetup: SSR integration configured
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs (1)
40-45:⚠️ Potential issue | 🔴 CriticalReturn the new context object directly instead of assigning to an undeclared variable.
The
contextvariable at line 40 is assigned without being declared. This will cause a runtime error in the generatedreact + tanstack-query + tRPCtemplate.Suggested fix
export function getContext() { const queryClient = new QueryClient({ defaultOptions: { dehydrate: { serializeData: superjson.serialize }, hydrate: { deserializeData: superjson.deserialize }, }, }); const serverHelpers = createTRPCOptionsProxy({ client: trpcClient, queryClient: queryClient, }); - context = { + return { queryClient, trpc: serverHelpers, } - - return context }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs` around lines 40 - 45, Replace the undeclared assignment to context with a direct return of the object: instead of setting context = { queryClient, trpc: serverHelpers } and returning context, return { queryClient, trpc: serverHelpers } directly from the function (locate the return in root-provider.tsx.ejs where queryClient and serverHelpers are in scope).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In
`@packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs`:
- Around line 40-45: Replace the undeclared assignment to context with a direct
return of the object: instead of setting context = { queryClient, trpc:
serverHelpers } and returning context, return { queryClient, trpc: serverHelpers
} directly from the function (locate the return in root-provider.tsx.ejs where
queryClient and serverHelpers are in scope).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8f586686-6d53-466e-be20-d9ce66d07b10
📒 Files selected for processing (3)
packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejspackages/create/src/frameworks/react/add-ons/tanstack-query/info.jsonpackages/create/src/frameworks/react/project/base/src/router.tsx.ejs
💤 Files with no reviewable changes (1)
- packages/create/src/frameworks/react/add-ons/tanstack-query/info.json
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs (1)
28-45:⚠️ Potential issue | 🔴 CriticalReturn the fresh context directly.
Line 40 assigns to
contextwithout any declaration in this template, so the generated code will fail with a reference error at runtime or fail TypeScript compilation withCannot find name 'context'. TheTanStackQueryProvidercomponent expects this function to return the context object.🔧 Proposed fix
export function getContext() { const queryClient = new QueryClient({ defaultOptions: { dehydrate: { serializeData: superjson.serialize }, hydrate: { deserializeData: superjson.deserialize }, }, }); const serverHelpers = createTRPCOptionsProxy({ client: trpcClient, - queryClient: queryClient, + queryClient, }); - context = { + return { queryClient, trpc: serverHelpers, } - - return context }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs` around lines 28 - 45, The getContext function currently assigns to an undeclared variable "context" causing a reference/TS error; change getContext to return the fresh context object directly (or declare a local const if you need the variable), e.g. build a local const (e.g., const context = { queryClient, trpc: serverHelpers }) and then return that const; update references to getContext/TanStackQueryProvider to use the returned object and avoid using a global "context" variable.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In
`@packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs`:
- Around line 28-45: The getContext function currently assigns to an undeclared
variable "context" causing a reference/TS error; change getContext to return the
fresh context object directly (or declare a local const if you need the
variable), e.g. build a local const (e.g., const context = { queryClient, trpc:
serverHelpers }) and then return that const; update references to
getContext/TanStackQueryProvider to use the returned object and avoid using a
global "context" variable.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 883dad3c-7b50-4797-a17a-c0b9a701c294
📒 Files selected for processing (2)
packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejspackages/create/src/frameworks/react/project/base/src/router.tsx.ejs
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/create/src/frameworks/react/project/base/src/router.tsx.ejs
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs (1)
3-3:⚠️ Potential issue | 🔴 CriticalMissing
QueryClientProviderwrapper: The return statement must wrapTRPCProviderwithQueryClientProvider.Per official tRPC documentation,
QueryClientProvidermust wrapTRPCProviderto provide the QueryClient context. Currently,QueryClientProvideris imported on line 3 but never used. The component at lines 57-61 renders onlyTRPCProviderwithout the required wrapper, which will cause React Query hooks to fail.The fix is:
return ( <QueryClientProvider client={queryClient}> <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}> {children} </TRPCProvider> </QueryClientProvider> )🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs` at line 3, The component currently imports QueryClientProvider but does not use it — wrap the existing TRPCProvider with QueryClientProvider so React Query context is available: open the component that returns TRPCProvider (use symbols QueryClientProvider, TRPCProvider, queryClient, trpcClient, children to locate it) and change the return so QueryClientProvider receives client={queryClient} and encloses TRPCProvider (which should still get trpcClient and queryClient) with children rendered inside the inner provider.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs`:
- Around line 63-73: The TanstackQueryProvider component currently renders
nothing and drops children; update TanstackQueryProvider to accept props ({
children, context? }) and render <QueryClientProvider
client={context?.queryClient ??
getContext().queryClient}>{children}</QueryClientProvider>, ensuring it uses the
QueryClient from getContext() when no context prop is provided and forwards
children so TanStack Query hooks work outside the tRPC branch; reference the
TanstackQueryProvider and getContext functions and the
QueryClient/QueryClientProvider symbols when making the change.
---
Outside diff comments:
In
`@packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs`:
- Line 3: The component currently imports QueryClientProvider but does not use
it — wrap the existing TRPCProvider with QueryClientProvider so React Query
context is available: open the component that returns TRPCProvider (use symbols
QueryClientProvider, TRPCProvider, queryClient, trpcClient, children to locate
it) and change the return so QueryClientProvider receives client={queryClient}
and encloses TRPCProvider (which should still get trpcClient and queryClient)
with children rendered inside the inner provider.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 0d932aa7-654f-4f83-8643-d2d447f4d85c
📒 Files selected for processing (2)
packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejspackages/create/src/frameworks/react/project/base/src/router.tsx.ejs
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/create/src/frameworks/react/project/base/src/router.tsx.ejs
Comment on lines
63
to
+73
| <% } else { %> | ||
| import type { ReactNode } from 'react' | ||
| import { QueryClient, QueryClientProvider } from '@tanstack/react-query' | ||
| let context: | ||
| | { | ||
| queryClient: QueryClient | ||
| } | ||
| | undefined | ||
| import { QueryClient } from '@tanstack/react-query' | ||
| export function getContext() { | ||
| if (context) { | ||
| return context | ||
| } | ||
| const queryClient = new QueryClient(); | ||
| context = { | ||
| return { | ||
| queryClient, | ||
| } | ||
| return context | ||
| } | ||
| export default function TanStackQueryProvider({ | ||
| children, | ||
| }: { | ||
| children: ReactNode | ||
| }) { | ||
| const { queryClient } = getContext() | ||
| return ( | ||
| <QueryClientProvider client={queryClient}> | ||
| {children} | ||
| </QueryClientProvider> | ||
| ) | ||
| } | ||
| export default function TanstackQueryProvider() {} |
There was a problem hiding this comment.
Critical: Non-tRPC branch renders nothing and discards children.
The TanstackQueryProvider component in the non-tRPC branch is completely empty:
- It doesn't accept
childrenorcontextprops - It doesn't render
QueryClientProvider - Any children passed to it are silently discarded
This breaks the TanStack Query integration when used without tRPC. Users will not have access to QueryClient context, and all useQuery/useMutation hooks will fail.
🐛 Proposed fix to provide QueryClient context
+import type { ReactNode } from 'react'
-import { QueryClient } from '@tanstack/react-query'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
export function getContext() {
const queryClient = new QueryClient();
return {
queryClient,
}
}
-export default function TanstackQueryProvider() {}
+export default function TanstackQueryProvider({
+ children,
+ context,
+}: {
+ children: ReactNode,
+ context: ReturnType<typeof getContext>
+}) {
+ return (
+ <QueryClientProvider client={context.queryClient}>
+ {children}
+ </QueryClientProvider>
+ )
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <% } else { %> | |
| import type { ReactNode } from 'react' | |
| import { QueryClient, QueryClientProvider } from '@tanstack/react-query' | |
| let context: | |
| | { | |
| queryClient: QueryClient | |
| } | |
| | undefined | |
| import { QueryClient } from '@tanstack/react-query' | |
| export function getContext() { | |
| if (context) { | |
| return context | |
| } | |
| const queryClient = new QueryClient(); | |
| context = { | |
| return { | |
| queryClient, | |
| } | |
| return context | |
| } | |
| export default function TanStackQueryProvider({ | |
| children, | |
| }: { | |
| children: ReactNode | |
| }) { | |
| const { queryClient } = getContext() | |
| return ( | |
| <QueryClientProvider client={queryClient}> | |
| {children} | |
| </QueryClientProvider> | |
| ) | |
| } | |
| export default function TanstackQueryProvider() {} | |
| <% } else { %> | |
| import type { ReactNode } from 'react' | |
| import { QueryClient, QueryClientProvider } from '@tanstack/react-query' | |
| export function getContext() { | |
| const queryClient = new QueryClient(); | |
| return { | |
| queryClient, | |
| } | |
| } | |
| export default function TanstackQueryProvider({ | |
| children, | |
| context, | |
| }: { | |
| children: ReactNode, | |
| context: ReturnType<typeof getContext> | |
| }) { | |
| return ( | |
| <QueryClientProvider client={context.queryClient}> | |
| {children} | |
| </QueryClientProvider> | |
| ) | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs`
around lines 63 - 73, The TanstackQueryProvider component currently renders
nothing and drops children; update TanstackQueryProvider to accept props ({
children, context? }) and render <QueryClientProvider
client={context?.queryClient ??
getContext().queryClient}>{children}</QueryClientProvider>, ensuring it uses the
QueryClient from getContext() when no context prop is provided and forwards
children so TanStack Query hooks work outside the tRPC branch; reference the
TanstackQueryProvider and getContext functions and the
QueryClient/QueryClientProvider symbols when making the change.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Tested locally with
node ./cli/packages/cli/dist/index.js create my-app3 --add-ons tanstack-querySummary by CodeRabbit
Refactor
Chores