feat(tanstack-react-query): Add QueryKey and MutationKey Prefix option #6976
Conversation
|
🚅 Deployed to the trpc-pr-6976 environment in trpc-sse-and-websockets
|
|
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. WalkthroughAdds feature-flagged, prefix-aware query/mutation key support across tanstack-react-query: new FeatureFlags and KeyPrefixOptions types, prefixed/unprefixed key variants, keyPrefix plumbing through Context/Provider and options proxy, prefix-aware key-generation utils, updated option typings, tests, and docs. Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant TRPCProvider
participant OptionsProxy as createTRPCOptionsProxy
participant KeyUtil as getQueryKeyInternal
App->>TRPCProvider: Render (trpcClient, keyPrefix?)
TRPCProvider->>TRPCProvider: memoize value (deps include keyPrefix)
TRPCProvider->>OptionsProxy: createTRPCOptionsProxy<TRouter,TFeatureFlags>({ keyPrefix })
OptionsProxy->>KeyUtil: getQueryKeyInternal({ path, type, prefix: keyPrefix })
alt keyPrefix present
KeyUtil-->>OptionsProxy: return prefixed key (["prefix", path..., args?])
else
KeyUtil-->>OptionsProxy: return unprefixed key ([path..., args?])
end
OptionsProxy-->>TRPCProvider: return prefix-aware TRPCOptionsProxy
TRPCProvider-->>App: provide context value
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Possibly related issues
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
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 |
railway-app
bot
temporarily deployed
to
next-prisma-websockets-starter (trpc-sse-and-websockets / trpc-pr-6976)
railway-app
bot
temporarily deployed
to
next-sse-chat (trpc-sse-and-websockets / trpc-pr-6976)
railway-app
bot
temporarily deployed
to
next-prisma-websockets-starter (trpc-sse-and-websockets / trpc-pr-6976)
railway-app
bot
temporarily deployed
to
next-sse-chat (trpc-sse-and-websockets / trpc-pr-6976)
@trpc/client
@trpc/next
@trpc/react-query
@trpc/server
@trpc/tanstack-react-query
@trpc/upgrade
commit: |
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/tanstack-react-query/src/internals/mutationOptions.ts (1)
99-99: Missing prefix in mutation key construction.The
getMutationKeyInternalcall doesn't receive thequeryKeyPrefix, so mutation keys will always have an empty prefix even when a prefix is configured. The function should receive a prefix parameter (similar to howgetQueryKeyInternalreceives{ prefix: queryKeyPrefix }throughout the codebase), or the mutation key should be passed in pre-constructed.Consider passing the prefix through
trpcMutationOptionsparameters:export function trpcMutationOptions(args: { mutate: typeof TRPCUntypedClient.prototype.mutation; queryClient: QueryClient | (() => QueryClient); path: readonly string[]; opts: AnyTRPCMutationOptionsIn; overrides: MutationOptionsOverride | undefined; + prefix?: readonly string[]; }): AnyTRPCMutationOptionsOut {Then update line 99:
- const mutationKey = getMutationKeyInternal(path); + const mutationKey = getMutationKeyInternal(path, { prefix: args.prefix });And in
createOptionsProxy.ts(lines 441-448), pass the prefix when callingtrpcMutationOptions.packages/tanstack-react-query/src/internals/createOptionsProxy.ts (1)
450-452: Mutation key missing prefix.The
mutationKey()method doesn't pass thequeryKeyPrefixtogetMutationKeyInternal, so mutation keys will always have an empty prefix regardless of the configuredqueryKeyPrefix. This is inconsistent with query keys and breaks the prefix feature for mutations.Apply this diff:
mutationKey: () => { - return getMutationKeyInternal(path); + return getMutationKeyInternal(path, { prefix: queryKeyPrefix }); },You'll also need to update
getMutationKeyInternalinutils.tsto accept an options parameter withprefix, similar togetQueryKeyInternal.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
packages/tanstack-react-query/src/internals/Context.tsx(2 hunks)packages/tanstack-react-query/src/internals/createOptionsProxy.ts(6 hunks)packages/tanstack-react-query/src/internals/mutationOptions.ts(1 hunks)packages/tanstack-react-query/src/internals/subscriptionOptions.ts(1 hunks)packages/tanstack-react-query/src/internals/types.ts(1 hunks)packages/tanstack-react-query/src/internals/utils.ts(4 hunks)packages/tanstack-react-query/test/__helpers.tsx(3 hunks)packages/tanstack-react-query/test/queryKeyable.test.tsx(11 hunks)packages/tanstack-react-query/test/utils.test.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{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/src/internals/types.tspackages/tanstack-react-query/src/internals/subscriptionOptions.tspackages/tanstack-react-query/src/internals/mutationOptions.tspackages/tanstack-react-query/src/internals/Context.tsxpackages/tanstack-react-query/src/internals/createOptionsProxy.tspackages/tanstack-react-query/src/internals/utils.tspackages/tanstack-react-query/test/__helpers.tsxpackages/tanstack-react-query/test/utils.test.tspackages/tanstack-react-query/test/queryKeyable.test.tsx
**/*.{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/src/internals/types.tspackages/tanstack-react-query/src/internals/subscriptionOptions.tspackages/tanstack-react-query/src/internals/mutationOptions.tspackages/tanstack-react-query/src/internals/Context.tsxpackages/tanstack-react-query/src/internals/createOptionsProxy.tspackages/tanstack-react-query/src/internals/utils.tspackages/tanstack-react-query/test/__helpers.tsxpackages/tanstack-react-query/test/utils.test.tspackages/tanstack-react-query/test/queryKeyable.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/src/internals/types.tspackages/tanstack-react-query/src/internals/subscriptionOptions.tspackages/tanstack-react-query/src/internals/mutationOptions.tspackages/tanstack-react-query/src/internals/Context.tsxpackages/tanstack-react-query/src/internals/createOptionsProxy.tspackages/tanstack-react-query/src/internals/utils.tspackages/tanstack-react-query/test/__helpers.tsxpackages/tanstack-react-query/test/utils.test.tspackages/tanstack-react-query/test/queryKeyable.test.tsx
**/*.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/src/internals/Context.tsxpackages/tanstack-react-query/test/__helpers.tsxpackages/tanstack-react-query/test/queryKeyable.test.tsx
**/*.test.ts
📄 CodeRabbit inference engine (.cursor/rules/test-patterns.mdc)
**/*.test.ts: ALWAYS useawait using ctx = testServerAndClientResource(...)in tests that need both server and client setup
NEVER use the deprecatedrouterToServerAndClientNew()in tests
ImporttestServerAndClientResourcefrom@trpc/client/__tests__/testClientResource
Create fresh mock instances per test using a factory (e.g.,getMockFetch())
Do not use global mocks that persist across tests
Configure mocks via theclientcallback intestServerAndClientResourceoptions
Usectx.clientfrom the test resource for making tRPC calls
Access server URLs viactx.httpUrlandctx.wssUrl
Configure server options via theserverproperty intestServerAndClientResourceoptions
Configure client options via theclientcallback intestServerAndClientResourceoptions
Use descriptive test names that explain the behavior under test
Focus test names on what the test validates, not just what it does
Use proper TypeScript typing for mocks
Clear mocks between tests when needed
Use factory functions for mock creation to ensure isolation
Files:
packages/tanstack-react-query/test/utils.test.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/utils.test.tspackages/tanstack-react-query/test/queryKeyable.test.tsx
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/queryKeyable.test.tsx
🧠 Learnings (20)
📓 Common learnings
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
📚 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/src/internals/types.tspackages/tanstack-react-query/src/internals/Context.tsxpackages/tanstack-react-query/test/__helpers.tsxpackages/tanstack-react-query/test/queryKeyable.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/src/internals/Context.tsxpackages/tanstack-react-query/test/__helpers.tsxpackages/tanstack-react-query/test/queryKeyable.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/src/internals/Context.tsxpackages/tanstack-react-query/test/__helpers.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/src/internals/Context.tsxpackages/tanstack-react-query/test/__helpers.tsxpackages/tanstack-react-query/test/queryKeyable.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/src/internals/Context.tsxpackages/tanstack-react-query/test/__helpers.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/src/internals/Context.tsxpackages/tanstack-react-query/test/__helpers.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.optionsProxyClient` when testing client-side options proxy
Applied to files:
packages/tanstack-react-query/src/internals/createOptionsProxy.tspackages/tanstack-react-query/test/__helpers.tsxpackages/tanstack-react-query/test/utils.test.tspackages/tanstack-react-query/test/queryKeyable.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/__helpers.tsxpackages/tanstack-react-query/test/queryKeyable.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/__helpers.tsxpackages/tanstack-react-query/test/utils.test.tspackages/tanstack-react-query/test/queryKeyable.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/__helpers.tsxpackages/tanstack-react-query/test/queryKeyable.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 : Do NOT import testReactResource from './__helpers' or './test/__helpers' in legacy React Query tests
Applied to files:
packages/tanstack-react-query/test/__helpers.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 : If not using createAppRouter, you may create an inline router using testServerAndClientResource with appropriate server and client link configuration
Applied to files:
packages/tanstack-react-query/test/__helpers.tsxpackages/tanstack-react-query/test/queryKeyable.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/__helpers.tsxpackages/tanstack-react-query/test/queryKeyable.test.tsx
📚 Learning: 2025-09-05T15:16:48.745Z
Learnt from: CR
PR: trpc/trpc#0
File: .cursor/rules/test-patterns.mdc:0-0
Timestamp: 2025-09-05T15:16:48.745Z
Learning: Applies to **/*.test.ts : Import `testServerAndClientResource` from `trpc/client/__tests__/testClientResource`
Applied to files:
packages/tanstack-react-query/test/__helpers.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 : Use queryClient, db, and resolvers exposed by createAppRouter instead of redefining them
Applied to files:
packages/tanstack-react-query/test/__helpers.tsxpackages/tanstack-react-query/test/queryKeyable.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/__helpers.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/utils.test.tspackages/tanstack-react-query/test/queryKeyable.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 testing utilities with `import * as React from 'react';`
Applied to files:
packages/tanstack-react-query/test/utils.test.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 TanStack React Query utilities from the package source via `../src`
Applied to files:
packages/tanstack-react-query/test/utils.test.ts
🧬 Code graph analysis (7)
packages/tanstack-react-query/src/internals/mutationOptions.ts (1)
packages/tanstack-react-query/src/internals/utils.ts (1)
getClientArgs(26-46)
packages/tanstack-react-query/src/internals/Context.tsx (1)
packages/tanstack-react-query/src/internals/createOptionsProxy.ts (1)
createTRPCOptionsProxy(323-470)
packages/tanstack-react-query/src/internals/createOptionsProxy.ts (1)
packages/tanstack-react-query/src/internals/utils.ts (1)
getQueryKeyInternal(85-140)
packages/tanstack-react-query/src/internals/utils.ts (2)
packages/tanstack-react-query/src/internals/types.ts (3)
QueryType(81-81)TRPCQueryKey(86-90)TRPCMutationKey(95-98)packages/server/src/unstable-core-do-not-import/utils.ts (1)
isObject(31-33)
packages/tanstack-react-query/test/__helpers.tsx (3)
packages/client/src/__tests__/testClientResource.ts (1)
TestServerAndClientResourceOpts(39-57)packages/tanstack-react-query/src/internals/createOptionsProxy.ts (1)
createTRPCOptionsProxy(323-470)packages/tanstack-react-query/src/internals/Context.tsx (1)
createTRPCContext(23-78)
packages/tanstack-react-query/test/utils.test.ts (1)
packages/tanstack-react-query/src/internals/utils.ts (1)
getQueryKeyInternal(85-140)
packages/tanstack-react-query/test/queryKeyable.test.tsx (1)
packages/tanstack-react-query/test/__helpers.tsx (1)
testReactResource(15-79)
⏰ 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). (4)
- GitHub Check: test
- GitHub Check: typecheck
- GitHub Check: build
- GitHub Check: Lint and auto-fix
🔇 Additional comments (21)
packages/tanstack-react-query/src/internals/subscriptionOptions.ts (1)
131-131: LGTM! Correctly adjusted for the new key structure.The input location changed from
queryKey[1]?.inputtoqueryKey[2]?.inputto align with the updatedTRPCQueryKeystructure where the prefix is now at index 0, path at index 1, and opts at index 2.packages/tanstack-react-query/test/__helpers.tsx (3)
13-34: LGTM! Query key prefix properly threaded through test infrastructure.The new
queryKeyPrefixoption is correctly propagated throughtestReactResourceto both the options proxy and the TRPCProvider, enabling prefix testing.
38-64: LGTM! Prefix correctly propagated to render helpers.Both
renderAppandrerenderAppcorrectly passopts?.queryKeyPrefixto theTRPCProvider, ensuring the prefix is available throughout the component tree.
6-7: Useimport typefor type-only imports.
RenderResultis used only as a type (line 52), so it should be imported withimport typeto comply with the coding guidelines.Apply this diff:
import '@testing-library/dom'; import '@testing-library/jest-dom/vitest'; import type { TestServerAndClientResourceOpts } from '@trpc/client/__tests__/testClientResource'; import { testServerAndClientResource } from '@trpc/client/__tests__/testClientResource'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import type { RenderResult } from '@testing-library/react'; -import { render } from '@testing-library/react'; +import { render } from '@testing-library/react'; +import type { RenderResult } from '@testing-library/react';As per coding guidelines.
⛔ Skipped due to learnings
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';`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 : Use testing-library/react for rendering in testsLearnt 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)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 neededLearnt 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 : Do NOT import testReactResource from './__helpers' or './test/__helpers' in legacy React Query testsLearnt from: CR PR: trpc/trpc#0 File: .cursor/rules/test-patterns.mdc:0-0 Timestamp: 2025-09-05T15:16:48.745Z Learning: Applies to **/*.test.ts : Import `testServerAndClientResource` from `trpc/client/__tests__/testClientResource`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 getUntypedClient from 'trpc/client' when an untyped client is neededLearnt 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 : Use testing-library/react for rendering in upgrade-package testsLearnt 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 testsLearnt 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 testReactResource only from './__helpers' (when inside test files) or './test/__helpers' (from package root)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 testing utilities from `testing-library/react`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 providerspackages/tanstack-react-query/test/utils.test.ts (2)
6-22: LGTM! Correctly updated to use the new signature.The test now calls
getQueryKeyInternalwith an options object{ input, type }instead of positional parameters, aligning with the refactored API while maintaining the same output structure.
37-53: LGTM! Test updated for the new API.Correctly uses the options-object signature for infinite query key construction.
packages/tanstack-react-query/src/internals/createOptionsProxy.ts (5)
285-285: LGTM! New public API option added.The
queryKeyPrefixoption is correctly added to the public interface, allowing users to configure a prefix for all generated query and mutation keys.
326-333: LGTM! Prefix normalization is correct.The code properly normalizes the
queryKeyPrefixoption (which can be a string or array) into a consistent array format for internal use.
367-406: LGTM! Prefix consistently propagated to query key methods.All query-related methods (
pathKey,pathFilter,queryOptions,queryKey,queryFilter) correctly passprefix: queryKeyPrefixtogetQueryKeyInternal.
409-438: LGTM! Infinite query methods correctly include prefix.All infinite query methods (
infiniteQueryOptions,infiniteQueryKey,infiniteQueryFilter) properly propagate the prefix togetQueryKeyInternal.
454-465: LGTM! Subscription options correctly include prefix.The
subscriptionOptionsmethod properly passesprefix: queryKeyPrefixtogetQueryKeyInternal.packages/tanstack-react-query/src/internals/types.ts (1)
86-98: LGTM! Key types updated to support prefix.The
TRPCQueryKeyandTRPCMutationKeytypes are correctly updated to include theprefixas the first element. The use of labeled tuple elements (prefix:,path:,opts?:) improves readability and self-documentation.Note: This is a breaking change to the public API, as existing code that destructures or accesses these key tuples by index will need updates.
packages/tanstack-react-query/src/internals/Context.tsx (2)
8-17: LGTM! Public API correctly extended.The
TRPCProviderprops interface correctly includes the new optionalqueryKeyPrefixparameter, allowing users to configure a prefix at the provider level.
33-49: LGTM! Prefix properly propagated and memoized.The
TRPCProviderimplementation correctly:
- Accepts
queryKeyPrefixin its props (line 38)- Passes it to
createTRPCOptionsProxy(line 46)- Includes it in the
useMemodependency array (line 48) to recompute the proxy when the prefix changespackages/tanstack-react-query/test/queryKeyable.test.tsx (3)
11-34: LGTM! Test helper correctly extended to support prefix.The
testContextfunction now accepts an optionaloptsparameter withqueryKeyPrefixand properly forwards it totestReactResource, enabling prefix testing.
61-134: LGTM! Existing tests correctly updated for new key structure.The snapshots now show an empty array
[]as the first element (the prefix) in all query keys, which is correct for tests without a configured prefix.
336-419: LGTM! New test suite validates prefixed query keys.The test suite correctly validates that when
queryKeyPrefix: 'user-123'is configured, all generated keys include["user-123"]as the prefix element.Consider adding a test case for prefixed mutation keys within this suite to ensure mutations also respect the prefix (similar to the query key tests). For example:
expect(trpc.bluesky.post.create.mutationKey()).toMatchInlineSnapshot(` Array [ Array [ "user-123", ], Array [ "bluesky", "post", "create", ], ] `);This would help catch the mutation key prefix bug identified in the earlier review comments.
packages/tanstack-react-query/src/internals/utils.ts (4)
34-35: LGTM! Array indices correctly adjusted for prefix.The index updates properly account for the new key structure where prefix is now at index 0.
85-92: LGTM! Options object pattern improves signature.Refactoring to an options object is a good choice as the parameter count grows, making the function more maintainable.
111-129: LGTM! Infinite query handling correctly includes prefix.The logic properly removes cursor and direction from the input while maintaining the correct key structure with prefix.
131-139: LGTM! Default case properly constructs key with prefix.The conditional inclusion of input and type fields is handled correctly, and the prefix is properly integrated into the key structure.
railway-app
bot
temporarily deployed
to
next-sse-chat (trpc-sse-and-websockets / trpc-pr-6976)
railway-app
bot
temporarily deployed
to
next-prisma-websockets-starter (trpc-sse-and-websockets / trpc-pr-6976)
Nick-Lucas
force-pushed
the
prefix-query-key
branch
from
bb744d9 to
7366515
Compare
railway-app
bot
temporarily deployed
to
next-sse-chat (trpc-sse-and-websockets / trpc-pr-6976)
railway-app
bot
temporarily deployed
to
next-prisma-websockets-starter (trpc-sse-and-websockets / trpc-pr-6976)
railway-app
bot
temporarily deployed
to
next-sse-chat (trpc-sse-and-websockets / trpc-pr-6976)
railway-app
bot
temporarily deployed
to
next-prisma-websockets-starter (trpc-sse-and-websockets / trpc-pr-6976)
railway-app
bot
temporarily deployed
to
next-sse-chat (trpc-sse-and-websockets / trpc-pr-6976)
railway-app
bot
temporarily deployed
to
next-prisma-websockets-starter (trpc-sse-and-websockets / trpc-pr-6976)
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
railway-app
bot
temporarily deployed
to
next-sse-chat (trpc-sse-and-websockets / trpc-pr-6976)
railway-app
bot
temporarily deployed
to
next-prisma-websockets-starter (trpc-sse-and-websockets / trpc-pr-6976)
railway-app
bot
temporarily deployed
to
next-sse-chat (trpc-sse-and-websockets / trpc-pr-6976)
railway-app
bot
temporarily deployed
to
next-prisma-websockets-starter (trpc-sse-and-websockets / trpc-pr-6976)
|
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 #4989
🎯 Changes
Supports queryKeyPrefix on TRPCProvider with the Tanstack Query Client, allowing all cached queries in a react tree to be prefixed, for instance with a user ID. This allows easier implementation of user/session switching while keeping data cached for switching back and forth
Nuances:
invalidateQueries([[]])would invalidate[["somePrefix"]]as well✅ Checklist
Summary by CodeRabbit
New Features
Improvements
Documentation
Tests