fix: infinite query types #6571

juliusmarminge · 2025-02-27T09:04:45Z

Closes #

🎯 Changes

What changes are made in this PR? Is it a feature or a bug fix?

✅ Checklist

I have followed the steps listed in the Contributing guide.
If necessary, I have added documentation related to the changes made.
I have added or updated the tests related to the changes made.

Summary by CodeRabbit

New Features
- Introduced new types for enhanced infinite data handling and error management.
- Added a retry mechanism in Playwright configuration for improved test reliability.
Refactor
- Updated type definitions for improved clarity and specificity in query and error handling.
Tests
- Enhanced type safety in test cases for infinite query options, ensuring accurate data structure validation.
- Improved error type validation in query tests for more robust error handling.

coderabbitai · 2025-02-27T09:04:52Z

Walkthrough

The changes update several type definitions and interface signatures across the project to improve type safety with tRPC and infinite query functionality. New types such as TRPCClientErrorLike and TRPCInfiniteData are introduced, while existing interfaces have been revised to utilize these types. Updates are made to the query key and error handling mechanisms in infinite query options and related test assertions, enhancing clarity and structure in error handling.

Changes

File(s)	Change Summary
`packages/tanstack-react-query/.../createOptionsProxy.ts`	Added `TRPCClientErrorLike` and `TRPCInfiniteData` types; updated method signatures in `DecorateInfiniteQueryProcedure` and `DecorateQueryProcedure` to use the new types for error handling and query key consistency.
`packages/tanstack-react-query/.../infiniteQueryOptions.ts`	Replaced `InfiniteData` with `TRPCInfiniteData` in several interfaces; updated `queryKey` types and modified type parameters from `unknown` to `any` in infinite query options.
`packages/tanstack-react-query/.../types.ts`	Introduced new type `TRPCInfiniteData` to represent infinite data structures with specified input and output types.
`packages/tanstack-react-query/test/.../infiniteQueryOptions.test.tsx`	Enhanced tests with type assertions for `lastPage`, `data`, and `queryKey` to ensure improved type safety in infinite query options.
`packages/tanstack-react-query/test/.../queryKeyable.test.tsx`	Updated type assertions for error handling to utilize `TRPCClientErrorLike` with a defined structure, improving error type specificity in tests.
`packages/tanstack-react-query/test/.../queryOptions.test.tsx`	Added type imports for `TRPCClientErrorLike` and `inferRouterError`, enhancing type safety in error checks within the test file.
`examples/tanstack-start/playwright.config.ts`	Introduced a `retries` property set to `3` in the Playwright configuration to specify test retries upon failure.

Possibly related PRs

Add type inference doc #6517: Related to modifications of type definitions and interfaces involving TRPCInfiniteData and TRPCClientErrorLike, impacting the createOptionsProxy.ts file.
Improvements to methods in Tanstack React Query package #6529: Involves significant modifications to createOptionsProxy.ts, particularly in handling infinite queries and introducing new types and methods.
feat(client): allow any procedure name #6484: Focuses on enhancing type safety and error handling in query and mutation procedures, related to modifications of the TRPCClient type.

Suggested labels

♻️ autoupdate

Suggested reviewers

KATT

Poem

I'm a bunny with a code delight,
Hopping through types in the moonlit night.
New errors and cursors lined up in a row,
Infinite queries now smoothly flow.
With joyful hops, I cheer these changes so bright!
🐇💻

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 11b041e and 462122e.

📒 Files selected for processing (1)

examples/tanstack-start/playwright.config.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (19)

GitHub Check: E2E-tests (next-formdata)
GitHub Check: E2E-tests (fastify-server)
GitHub Check: E2E-tests (express-server)
GitHub Check: E2E-tests (express-minimal)
GitHub Check: e2e-legacy-node (next-prisma-todomvc, 20.x)
GitHub Check: E2E-tests (cloudflare-workers)
GitHub Check: e2e-legacy-node (next-prisma-todomvc, 18.x)
GitHub Check: E2E-tests (.test/ssg)
GitHub Check: e2e-legacy-node (next-prisma-websockets-starter, 20.x)
GitHub Check: Release using pkg.pr.new
GitHub Check: E2E-tests (.test/internal-types-export)
GitHub Check: e2e-legacy-node (next-prisma-websockets-starter, 18.x)
GitHub Check: E2E-tests (.test/diagnostics-big-router)
GitHub Check: Test a monorepo using built declaration files
GitHub Check: e2e-legacy-node (next-prisma-starter, 20.x)
GitHub Check: E2E-tests (.experimental/next-app-dir)
GitHub Check: E2E-tests (Bun) (bun, ubuntu-latest)
GitHub Check: E2E-tests (Deno) (deno-deploy)
GitHub Check: test

🔇 Additional comments (1)

examples/tanstack-start/playwright.config.ts (1)

13-13:
Details

✅ Verification successful

Added test retry mechanism to improve test stability.

Adding a retry mechanism is a good practice to handle potentially flaky tests, especially when dealing with asynchronous operations like infinite queries. This change will help ensure more consistent test results in CI environments.

While this change is appropriate, it might be worth investigating if there are underlying issues causing test flakiness:

🏁 Script executed:
#!/bin/bash
# Check if the test files have any known patterns that might cause flakiness
echo "Checking for potential sources of test flakiness..."
rg -g "*.test.tsx" "setTimeout|setInterval|waitFor|findBy" ./packages/tanstack-react-query/test/
Length of output: 4593
Test Retry Mechanism Approved – No Immediate Flakiness Issues Detected

In examples/tanstack-start/playwright.config.ts (line 13), adding retries: 3 is a solid practice for improving test stability in CI environments.

Analysis of test files under ./packages/tanstack-react-query/test/ shows widespread use of asynchronous helpers like waitFor, which is a standard pattern rather than a red flag for underlying flakiness.

While it's always wise to keep an eye on CI results, our grep output suggests there’s nothing unusual at this time.

✨ Finishing Touches

📝 Generate Docstrings

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

railway-app · 2025-02-27T09:05:10Z

🚅 Deployed to the trpc-pr-6571 environment in trpc-sse-and-websockets

Service	Status	Web	Updated (UTC)
next-sse-chat	◻️ Removed (View Logs)	Web	Feb 27, 2025 at 12:35 pm
next-prisma-websockets-starter	◻️ Removed (View Logs)		Feb 27, 2025 at 12:35 pm

vercel · 2025-02-27T09:05:11Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-prisma-starter	✅ Ready (Inspect)	Visit Preview		Feb 27, 2025 10:54am
og-image	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 27, 2025 10:54am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
www	⬜️ Ignored (Inspect)	Visit Preview		Feb 27, 2025 10:54am

pkg-pr-new · 2025-02-27T09:09:16Z

Open in Stackblitz

@trpc/client

npm i https://pkg.pr.new/trpc/trpc/@trpc/client@6571

@trpc/next

npm i https://pkg.pr.new/trpc/trpc/@trpc/next@6571

@trpc/react-query

npm i https://pkg.pr.new/trpc/trpc/@trpc/react-query@6571

@trpc/server

npm i https://pkg.pr.new/trpc/trpc/@trpc/server@6571

@trpc/tanstack-react-query

npm i https://pkg.pr.new/trpc/trpc/@trpc/tanstack-react-query@6571

@trpc/upgrade

npm i https://pkg.pr.new/trpc/trpc/@trpc/upgrade@6571

commit: 462122e

KATT · 2025-02-27T09:42:17Z

packages/tanstack-react-query/src/internals/createOptionsProxy.ts

+    TRPCClientErrorLike<{
+      transformer: TDef['transformer'];
+      errorShape: TDef['errorShape'];
+    }>


I am a boomer so I'm testing to leave a comment from vscode here

KATT

Lovely to do this through cursor

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/tanstack-react-query/src/internals/infiniteQueryOptions.ts (1)

206-210: Broader generics for infinite options.

Switching from unknown to any increases flexibility when passing diverse data shapes, but be mindful that any can reduce strict type checks.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4c8a0ca and 11b041e.

📒 Files selected for processing (6)

packages/tanstack-react-query/src/internals/createOptionsProxy.ts (6 hunks)
packages/tanstack-react-query/src/internals/infiniteQueryOptions.ts (8 hunks)
packages/tanstack-react-query/src/internals/types.ts (2 hunks)
packages/tanstack-react-query/test/infiniteQueryOptions.test.tsx (4 hunks)
packages/tanstack-react-query/test/queryKeyable.test.tsx (3 hunks)
packages/tanstack-react-query/test/queryOptions.test.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

packages/tanstack-react-query/test/infiniteQueryOptions.test.tsx
packages/tanstack-react-query/src/internals/createOptionsProxy.ts

⏰ Context from checks skipped due to timeout of 90000ms (18)

GitHub Check: E2E-tests (fastify-server)
GitHub Check: e2e-legacy-node (next-prisma-todomvc, 20.x)
GitHub Check: E2E-tests (express-server)
GitHub Check: e2e-legacy-node (next-prisma-todomvc, 18.x)
GitHub Check: E2E-tests (express-minimal)
GitHub Check: e2e-legacy-node (next-prisma-websockets-starter, 20.x)
GitHub Check: Release using pkg.pr.new
GitHub Check: e2e-legacy-node (next-prisma-websockets-starter, 18.x)
GitHub Check: E2E-tests (.test/ssg)
GitHub Check: e2e-legacy-node (next-prisma-starter, 20.x)
GitHub Check: E2E-tests (.test/internal-types-export)
GitHub Check: Test a monorepo using built declaration files
GitHub Check: e2e-legacy-node (next-prisma-starter, 18.x)
GitHub Check: E2E-tests (.test/diagnostics-big-router)
GitHub Check: E2E-tests (Bun) (bun, ubuntu-latest)
GitHub Check: E2E-tests (.experimental/next-app-dir)
GitHub Check: E2E-tests (Deno) (deno-deploy)
GitHub Check: test

🔇 Additional comments (19)

packages/tanstack-react-query/src/internals/types.ts (2)

1-1: Import is correct.

Importing InfiniteData from @tanstack/react-query is properly aligned with its usage below.

35-41: Introducing a specialized infinite query type.

Defining TRPCInfiniteData as a specialized version of InfiniteData<TOutput, NonNullable<ExtractCursorType<TInput>> | null> fortifies type safety around infinite queries and cursors.

packages/tanstack-react-query/test/queryOptions.test.tsx (2)

4-5: New imports for error shape consistency.

Importing TRPCClientErrorLike and inferRouterError ensures that tests conform to the revised error structure.

73-76: Explicitly verifying the error shape.

Validating that query1.error is TRPCClientErrorLike<{ transformer: false; errorShape: inferRouterError<typeof ctx.router>; }> adds clarity and reliability in type checks.

packages/tanstack-react-query/test/queryKeyable.test.tsx (3)

3-4: Added TRPCError imports.

These imports prepare for error type refinements, aligning with the new error shape strategy.

266-273: Improved error typing.

Switching to TRPCClientErrorLike clarifies potential error structures, facilitating better error handling in queries.

300-307: Consistent error shape usage.

Applying the same error typing reaffirms a stronger and uniform approach to runtime error handling across the codebase.

packages/tanstack-react-query/src/internals/infiniteQueryOptions.ts (12)

16-16: Referencing TRPCInfiniteData.

Leveraging TRPCInfiniteData in the imports ensures alignment with your specialized infinite query data structure.

39-39: Revised TQueryFnData reference.

Replacing the plain TData type with TRPCInfiniteData<TInput, TData> enhances clarity around infinite query paging.

58-58: Incorporating TRPCInfiniteData.

This enforces a fully typed structure for paginated data within undefined-initial-data options.

65-65: Aligned queryKey type.

Referencing TRPCInfiniteData<TInput, TData> within queryKey provides stronger type alignment for infinite queries.

74-74: Updating TData in defined-initial-data options.

Switching to TRPCInfiniteData<TInput, TData> keeps all infinite query definitions consistent.

93-93: Consistent approach to data shaping.

Continuing TRPCInfiniteData usage avoids mixing different shapes in the same infinite query logic.

100-100: queryKey upgrade with infinite data.

Using TRPCInfiniteData in the queryKey property ensures consistent referencing of typed infinite query results.

113-113: Enforcing typed infinite results.

Referencing TRPCInfiniteData clarifies the return shape within skip-token-based infinite queries.

132-132: Streamlined page-param type.

Aligning the cursor structure with TRPCInfiniteData helps maintain correctness when advancing infinite query pages.

139-139: Specifically typed queryKey.

Using TRPCInfiniteData<TInput, TData> ensures a cohesive link between the data source and the query key itself.

150-153: More precise error typing.

Defining TRPCClientErrorLike with explicit transformer and errorShape parameters clarifies error states for infinite queries.

160-163: Reinforcing error structure.

Applying the same TRPCClientErrorLike pattern across all overloads fosters uniform error handling.

github-actions · 2025-02-28T18:02:22Z

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.

juliusmarminge requested a review from a team as a code owner February 27, 2025 09:04

railway-app bot temporarily deployed to trpc-pr-6571 February 27, 2025 09:05 Destroyed

vercel bot deployed to Preview – og-image February 27, 2025 09:05 View deployment

railway-app bot temporarily deployed to trpc-pr-6571 February 27, 2025 09:05 Destroyed

vercel bot deployed to Preview – examples-todomvc February 27, 2025 09:05 View deployment

vercel bot deployed to Preview – next-prisma-starter February 27, 2025 09:05 View deployment

vercel bot deployed to Preview – trpc-next-app-dir February 27, 2025 09:05 View deployment

Nick-Lucas previously approved these changes Feb 27, 2025

View reviewed changes

vercel bot deployed to Preview – www February 27, 2025 09:06 View deployment

juliusmarminge dismissed Nick-Lucas’s stale review via 4c8a0ca February 27, 2025 09:09

juliusmarminge force-pushed the 02-27-fix_infinite_types branch from 5f6883f to 4c8a0ca Compare February 27, 2025 09:09

railway-app bot temporarily deployed to trpc-pr-6571 February 27, 2025 09:09 Destroyed

vercel bot deployed to Preview – next-prisma-starter February 27, 2025 09:10 View deployment

vercel bot deployed to Preview – og-image February 27, 2025 09:10 View deployment

vercel bot deployed to Preview – examples-todomvc February 27, 2025 09:10 View deployment

vercel bot deployed to Preview – trpc-next-app-dir February 27, 2025 09:10 View deployment

vercel bot deployed to Preview – www February 27, 2025 09:11 View deployment

juliusmarminge force-pushed the 02-27-fix_infinite_types branch from 4c8a0ca to 520ee0d Compare February 27, 2025 09:21

railway-app bot temporarily deployed to trpc-pr-6571 February 27, 2025 09:21 Destroyed

juliusmarminge force-pushed the 02-27-fix_infinite_types branch from 520ee0d to 034fcdb Compare February 27, 2025 09:21

railway-app bot temporarily deployed to trpc-pr-6571 February 27, 2025 09:21 Destroyed

vercel bot deployed to Preview – og-image February 27, 2025 09:22 View deployment

vercel bot deployed to Preview – next-prisma-starter February 27, 2025 09:22 View deployment

vercel bot deployed to Preview – og-image February 27, 2025 09:30 View deployment

vercel bot deployed to Preview – examples-todomvc February 27, 2025 09:30 View deployment

vercel bot deployed to Preview – trpc-next-app-dir February 27, 2025 09:30 View deployment

vercel bot deployed to Preview – www February 27, 2025 09:31 View deployment

KATT approved these changes Feb 27, 2025

View reviewed changes

KATT previously approved these changes Feb 27, 2025

View reviewed changes

fix weird import path

11b041e

juliusmarminge dismissed KATT’s stale review via 11b041e February 27, 2025 09:51

railway-app bot temporarily deployed to trpc-pr-6571 February 27, 2025 09:51 Destroyed

vercel bot deployed to Preview – next-prisma-starter February 27, 2025 09:52 View deployment

vercel bot deployed to Preview – og-image February 27, 2025 09:52 View deployment

vercel bot deployed to Preview – examples-todomvc February 27, 2025 09:53 View deployment

vercel bot deployed to Preview – trpc-next-app-dir February 27, 2025 09:53 View deployment

vercel bot deployed to Preview – www February 27, 2025 09:54 View deployment

coderabbitai bot reviewed Feb 27, 2025

View reviewed changes

juliusmarminge enabled auto-merge (squash) February 27, 2025 10:18

retries?

462122e

railway-app bot temporarily deployed to trpc-pr-6571 February 27, 2025 10:53 Destroyed

vercel bot deployed to Preview – og-image February 27, 2025 10:54 View deployment

vercel bot deployed to Preview – next-prisma-starter February 27, 2025 10:54 View deployment

vercel bot deployed to Preview – trpc-next-app-dir February 27, 2025 10:54 View deployment

vercel bot deployed to Preview – examples-todomvc February 27, 2025 10:54 View deployment

juliusmarminge disabled auto-merge February 27, 2025 12:33

juliusmarminge merged commit 53ebeae into next Feb 27, 2025
44 checks passed

juliusmarminge deleted the 02-27-fix_infinite_types branch February 27, 2025 12:35

github-actions bot locked as resolved and limited conversation to collaborators Feb 28, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix: infinite query types #6571

fix: infinite query types #6571

Uh oh!

juliusmarminge commented Feb 27, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Feb 27, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

railway-app bot commented Feb 27, 2025 •

edited

Loading

Uh oh!

vercel bot commented Feb 27, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Feb 27, 2025 •

edited

Loading

Uh oh!

KATT Feb 27, 2025

Uh oh!

KATT left a comment

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

github-actions bot commented Feb 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

fix: infinite query types #6571

fix: infinite query types #6571

Uh oh!

Conversation

juliusmarminge commented Feb 27, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

railway-app bot commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Feb 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

KATT Feb 27, 2025

Choose a reason for hiding this comment

Uh oh!

KATT left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Feb 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

juliusmarminge commented Feb 27, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Feb 27, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

railway-app bot commented Feb 27, 2025 •

edited

Loading

vercel bot commented Feb 27, 2025 •

edited

Loading

pkg-pr-new bot commented Feb 27, 2025 •

edited

Loading