-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
fix(tanstack-react-query): keyPrefix of undefined #6990
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
🚅 Deployed to the trpc-pr-6990 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 Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughMade the Changes
Sequence Diagram(s)(omitted — changes adjust parameter handling and tests without introducing new control-flow interactions that require a sequence diagram) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
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 |
|
|
||
| expect(calls).toEqual(['onMutate', 'onSuccess', 'onSettled']); | ||
| }); | ||
| test('useMutation with no opts', async () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the failing case. opts might not be set but our internal types taking from the proxy were assuming they always will, so opts.keyPrefix was erroring
@trpc/client
@trpc/next
@trpc/react-query
@trpc/server
@trpc/tanstack-react-query
@trpc/upgrade
commit: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/tanstack-react-query/src/internals/mutationOptions.ts (1)
130-145: Consider using nullish coalescing for consistency.Spreading undefined at line 131 works correctly in JavaScript, but for consistency with
infiniteQueryOptions.ts(line 291), consider using:return { - ...opts, + ...(opts ?? {}), mutationKey,This makes the intent more explicit and aligns with the pattern used in the infinite query options.
packages/tanstack-react-query/src/internals/queryOptions.ts (1)
257-264: Consider using nullish coalescing for consistency.Spreading undefined at line 259 works correctly, but for consistency with
infiniteQueryOptions.ts(line 291), consider:return Object.assign( queryOptions({ - ...opts, + ...(opts ?? {}), queryKey: queryKey, queryFn: inputIsSkipToken ? skipToken : queryFn, }), { trpc: createTRPCOptionsResult({ path }) }, );This makes the intent more explicit and aligns with the pattern used elsewhere.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
packages/tanstack-react-query/test/__snapshots__/queryOptions.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (5)
packages/tanstack-react-query/src/internals/infiniteQueryOptions.ts(2 hunks)packages/tanstack-react-query/src/internals/mutationOptions.ts(1 hunks)packages/tanstack-react-query/src/internals/queryOptions.ts(1 hunks)packages/tanstack-react-query/test/mutationOptions.test.tsx(2 hunks)packages/tanstack-react-query/test/queryOptions.test.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
packages/tanstack-react-query/**/*.test.tsx
📄 CodeRabbit inference engine (.cursor/rules/tanstack-react-query-tests.mdc)
packages/tanstack-react-query/**/*.test.tsx: ALWAYS useawait using ctx = testReactResource(...)to set up TanStack React Query tests
ImporttestReactResourcefrom the local path./__helpers
Do NOT importtestReactResourcefrom./test/__helpers(wrong path)
Do NOT import legacy helpers likecreateAppRouterfrom./__testHelpers
Usectx.useTRPC()for TanStack React Query hooks access in components under test
Usectx.useTRPCClient()for direct (vanilla) tRPC client access in tests
Usectx.optionsProxyClientwhen testing client-side options proxy
Usectx.optionsProxyServerwhen testing server-side options proxy
Render viactx.renderApp()and rerender viactx.rerenderApp()instead of custom providers
Import testing utilities from@testing-library/react
Import user interaction utilities from@testing-library/user-eventwhen simulating interactions
Import React Query types from@tanstack/react-queryas needed
Import TanStack React Query utilities from the package source via../src
Import React testing utilities withimport * as React from 'react';
Files:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/test/mutationOptions.test.tsx
**/*.{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:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/src/internals/mutationOptions.tspackages/tanstack-react-query/src/internals/infiniteQueryOptions.tspackages/tanstack-react-query/test/mutationOptions.test.tsxpackages/tanstack-react-query/src/internals/queryOptions.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:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/src/internals/mutationOptions.tspackages/tanstack-react-query/src/internals/infiniteQueryOptions.tspackages/tanstack-react-query/test/mutationOptions.test.tsxpackages/tanstack-react-query/src/internals/queryOptions.ts
{**/*.test.{ts,tsx},**/__tests__/**/*.{ts,tsx}}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
{**/*.test.{ts,tsx},**/__tests__/**/*.{ts,tsx}}: Do not use Testing LibrarywaitFor; usevi.waitForinstead
Tests may use non-null assertions
Tests may have unused variables
Tests may allow floating promises
Files:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/test/mutationOptions.test.tsx
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
No
console.login packages; use proper logging instead
Files:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/src/internals/mutationOptions.tspackages/tanstack-react-query/src/internals/infiniteQueryOptions.tspackages/tanstack-react-query/test/mutationOptions.test.tsxpackages/tanstack-react-query/src/internals/queryOptions.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:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/test/mutationOptions.test.tsx
🧠 Learnings (18)
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
PR: trpc/trpc#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.optionsProxyClient` when testing client-side options proxy
Applied to files:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/test/mutationOptions.test.tsx
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
PR: trpc/trpc#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.optionsProxyServer` when testing server-side options proxy
Applied to files:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/test/mutationOptions.test.tsx
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/test/mutationOptions.test.tsxpackages/tanstack-react-query/src/internals/queryOptions.ts
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/test/mutationOptions.test.tsx
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/test/mutationOptions.test.tsx
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/test/mutationOptions.test.tsx
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsx
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/test/mutationOptions.test.tsx
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/test/mutationOptions.test.tsxpackages/tanstack-react-query/src/internals/queryOptions.ts
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsx
📚 Learning: 2025-09-05T15:16:01.878Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/test/mutationOptions.test.tsx
📚 Learning: 2025-09-05T15:16:01.878Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsx
📚 Learning: 2025-09-05T15:16:01.878Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/test/mutationOptions.test.tsx
📚 Learning: 2025-09-05T15:16:01.878Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/src/internals/queryOptions.ts
📚 Learning: 2025-09-05T15:17:32.520Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsx
📚 Learning: 2025-09-05T15:16:31.379Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/test/mutationOptions.test.tsx
📚 Learning: 2025-09-05T15:17:32.520Z
Learnt from: CR
PR: trpc/trpc#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:
packages/tanstack-react-query/test/queryOptions.test.tsxpackages/tanstack-react-query/src/internals/mutationOptions.tspackages/tanstack-react-query/src/internals/queryOptions.ts
📚 Learning: 2025-09-05T15:17:32.520Z
Learnt from: CR
PR: trpc/trpc#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 : Manage test resources with `await using ctx = testReactResource(...)` for setup/teardown
Applied to files:
packages/tanstack-react-query/test/mutationOptions.test.tsx
🧬 Code graph analysis (3)
packages/tanstack-react-query/test/queryOptions.test.tsx (1)
packages/tanstack-react-query/test/__helpers.tsx (1)
testReactResource(14-92)
packages/tanstack-react-query/src/internals/mutationOptions.ts (1)
packages/tanstack-react-query/src/internals/utils.ts (2)
unwrapLazyArg(201-203)getMutationKeyInternal(183-196)
packages/tanstack-react-query/test/mutationOptions.test.tsx (1)
packages/tanstack-react-query/test/__helpers.tsx (1)
testReactResource(14-92)
⏰ 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). (20)
- GitHub Check: E2E-tests (soa)
- GitHub Check: E2E-tests (next-formdata)
- GitHub Check: E2E-tests (next-minimal-starter)
- GitHub Check: E2E-tests (.test/internal-types-export)
- GitHub Check: E2E-tests (minimal-react)
- GitHub Check: E2E-tests (.test/ssg)
- GitHub Check: E2E-tests (express-server)
- GitHub Check: E2E-tests (.experimental/next-app-dir)
- GitHub Check: e2e-legacy-node (next-prisma-websockets-starter, 18.x)
- GitHub Check: e2e-legacy-node (next-prisma-websockets-starter, 20.x)
- GitHub Check: e2e-legacy-node (next-prisma-todomvc, 20.x)
- GitHub Check: e2e-legacy-node (next-prisma-todomvc, 18.x)
- GitHub Check: e2e-legacy-node (next-prisma-starter, 18.x)
- GitHub Check: Test a monorepo using built declaration files
- GitHub Check: e2e-legacy-node (next-prisma-starter, 20.x)
- GitHub Check: Release using pkg.pr.new
- GitHub Check: typecheck-www
- GitHub Check: E2E-tests (Deno) (deno-deploy)
- GitHub Check: Lint and auto-fix
- GitHub Check: test
🔇 Additional comments (9)
packages/tanstack-react-query/src/internals/infiniteQueryOptions.ts (2)
259-259: LGTM! Opts parameter now properly optional.The parameter type change correctly allows undefined opts, which fixes the root cause of the "keyPrefix of undefined" error reported in issue #6988.
291-291: LGTM! Safe handling of undefined opts.The nullish coalescing operator provides an explicit empty object when opts is undefined, ensuring the spread operation always has a valid object to work with.
packages/tanstack-react-query/src/internals/mutationOptions.ts (2)
104-104: LGTM! Opts parameter now properly optional.The parameter type change correctly allows undefined opts, preventing the "keyPrefix of undefined" error.
112-112: LGTM! Optional chaining prevents the crash.Using
opts?.keyPrefixsafely handles the case when opts is undefined, directly addressing the bug reported in issue #6988.packages/tanstack-react-query/src/internals/queryOptions.ts (1)
226-226: LGTM! Opts parameter now properly optional.The parameter type change correctly allows undefined opts, fixing the regression introduced in 11.7.0.
packages/tanstack-react-query/test/queryOptions.test.tsx (2)
17-62: LGTM! Excellent test parameterization.The updated
testContextsignature and parameterized test suite effectively validate behavior with and withoutkeyPrefix, ensuring the fix works in both scenarios.As per coding guidelines.
64-97: LGTM! Comprehensive regression coverage.The parameterized test structure verifies the fix for issue #6988 by exercising
queryOptionscalls without opts (line 73), which would previously cause the "keyPrefix of undefined" error.packages/tanstack-react-query/test/mutationOptions.test.tsx (2)
9-46: LGTM! Excellent test parameterization.The updated
testContextsignature and parameterized test suite effectively validate behavior with and withoutkeyPrefix, ensuring comprehensive coverage of the fix.As per coding guidelines.
105-157: LGTM! Critical regression test for the bug.Line 114 explicitly tests
mutationOptions()with no arguments, which directly exercises the scenario that caused the "keyPrefix of undefined" error in issue #6988. This test ensures the fix prevents the regression.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This PR is being reviewed by Cursor Bugbot
Details
You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
| path: string[]; | ||
| queryKey: TRPCQueryKey<TFeatureFlags['keyPrefix']>; | ||
| opts: AnyTRPCQueryOptionsIn<TFeatureFlags>; | ||
| opts: AnyTRPCQueryOptionsIn<TFeatureFlags> | undefined; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bug: Undefined Options Spread Causes Runtime Errors
The opts parameter can now be undefined, but spreading ...opts without a null check causes a runtime error. This happens in trpcQueryOptions, trpcMutationOptions, and within the actualOpts creation in trpcInfiniteQueryOptions. The infiniteQueryOptions return statement already handles this correctly, which could be a good reference.
Additional Locations (2)
c946059 to
225097f
Compare
|
This pull request has been locked because we are very unlikely to see comments on closed issues. If you think, this PR is still necessary, create a new one with the same branch. Thank you. |
Closes #6988
Fixes issue where mutationOptions() calls and potentially queryOptions and infiniteQueryOptions could fail when no opts are passed in
🎯 Changes
What changes are made in this PR? Is it a feature or a bug fix?
✅ Checklist
Summary by CodeRabbit
Improvements
Tests