Skip to content

chore: bump tanstack packages#6479

Merged
KATT merged 4 commits into
nextfrom
02-11-bump-rq
Feb 11, 2025
Merged

chore: bump tanstack packages#6479
KATT merged 4 commits into
nextfrom
02-11-bump-rq

Conversation

@KATT

@KATT KATT commented Feb 11, 2025

Copy link
Copy Markdown
Member

Closes #

🎯 Changes

  • bump tanstack
  • bump typescript for www package

Summary by CodeRabbit

  • Chores
    • Upgraded the asynchronous query management library across various projects to the latest version, offering potential performance and stability improvements.
    • Updated the corresponding developer tooling in select areas to maintain compatibility and ensure access to recent enhancements.

@KATT KATT requested a review from a team as a code owner February 11, 2025 10:01
@coderabbitai

coderabbitai Bot commented Feb 11, 2025

Copy link
Copy Markdown
Contributor

Warning

Rate limit exceeded

@KATT has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 10 minutes and 39 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between f94f69b and 5231fa5.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (2)
  • www/docs/server/validators.md (2 hunks)
  • www/package.json (1 hunks)

Walkthrough

The pull request updates dependency versions across multiple package.json files in various example and package directories. In most files, the version of @tanstack/react-query is upgraded from ^5.62.8 to ^5.66.0. Additionally, several projects also update @tanstack/react-query-devtools from ^5.59.15 to ^5.64.2. No other modifications have been made to the file structures or configurations.

Changes

File(s) Change Summary
examples/.test/{diagnostics-big-router, monotest-app, ssg[-*]}/package.json, examples/minimal-{content-types/client, react/client}/package.json, examples/next-{big-router, edge-runtime, formdata, minimal-starter, prisma-starter}/package.json, packages/tests/package.json Updated @tanstack/react-query from ^5.62.8 to ^5.66.0
examples/{.experimental/next-app-dir, next-prisma-(todomvc, websockets-starter), next-sse-chat, tanstack-start}/package.json Updated @tanstack/react-query from ^5.62.8 to ^5.66.0 and @tanstack/react-query-devtools from ^5.59.15 to ^5.64.2
packages/{next, react-query, server}/package.json Updated @tanstack/react-query in devDependencies from ^5.62.8 to ^5.66.0

Poem

Oh, how I hop with glee in the code jungle today,
Upgrading dependencies in a bright new way.
From outdated carrots to versions shiny and new,
My whiskers twitch at each update that comes through.
A bunny's joy in every fix—let's celebrate and play! 🐰🥕


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. (Beta)
  • @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.

@vercel

vercel Bot commented Feb 11, 2025

Copy link
Copy Markdown

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 11, 2025 10:24am
og-image ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 11, 2025 10:24am
www ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 11, 2025 10:24am

@railway-app

railway-app Bot commented Feb 11, 2025

Copy link
Copy Markdown

🚅 Previously deployed to Railway in the trpc-sse-and-websockets project. Environment has been deleted.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🔭 Outside diff range comments (1)
packages/react-query/package.json (1)

67-67: 💡 Verification agent

🛠️ Refactor suggestion

🧩 Analysis chain

Verify peer dependency compatibility.

The package specifies @tanstack/react-query version ^5.62.8 as a peer dependency but uses ^5.66.0 in devDependencies. This mismatch should be addressed to ensure consistent versioning.

Update the peer dependency to match:

-    "@tanstack/react-query": "^5.62.8",
+    "@tanstack/react-query": "^5.66.0",

Also applies to: 75-75


🌐 Web query:

What are the breaking changes between @tanstack/react-query versions 5.62.8 and 5.66.0?

💡 Result:

The breaking changes between @tanstack/react-query versions v5.62.x and v5.x.x up to v5.x.x are minimal but include notable TypeScript adjustments and behavioral fixes:


Breaking Changes

TypeScript Key Typing Enhancements

  • QueryKey/MutationKey Registration
    Added support for strongly typed QueryKey/MutationKey via Register, requiring updates for projects using custom key definitions[^4][^6].
    Example:
    declare module '@tanstack/react-query' {
      interface Register {
        queryKey: YourCustomQueryKeyType;
      }
    }

Suspense Mode Behavior

  • StaleTime Enforcement
    In suspense mode (useSuspenseQuery), staleTime below 1000ms now defaults to 1000ms, overriding manual configurations[^4][^6].

Notable Non-Breaking Changes

Features

  • Query Cache Unsubscription
    Added unsubscribe option to useQuery/useQueries for manual cache management[^4].
  • Infinite Query Improvements
    Introduced maxPages to limit stored pages[^6].

Fixes

  • Vue Query Key Matching
    Fixed reactivity issues with queryKey refs[^4].
  • Observer Duplicate Queries
    Improved deduplication logic for QueriesObserver[^4].

Migration Steps

1️⃣ Update TypeScript definitions if using custom query/mutation keys:

// Before
type QueryKeys = { ... };

// After
declare module '@tanstack/react-query' {
  interface Register {
    queryKey: QueryKeys;
    mutationKey: MutationKeys;
  }
}

2️⃣ Adjust suspense configurations if relying on low staleTime values:

// Before
useSuspenseQuery({ queryKey: ['todos'], queryFn: fetchTodos, staleTime: 500 });

// After (staleTime automatically set to 1000)
useSuspenseQuery({ queryKey: ['todos'], queryFn: fetchTodos });

For detailed code examples and additional fixes (e.g., ESLint compatibility), refer to the official v5 migration guide[^1][^6].

Citations:


Action: Update @tanstack/react-query peer dependency version for consistency

  • The peer dependency is set to ^5.62.8 while the devDependencies reference ^5.66.0.
  • According to the migration details, the changes between these versions are minimal (mainly TypeScript enhancements and minor behavioral tweaks), so updating the peer dependency should be safe.
  • Recommend updating to "@tanstack/react-query": "^5.66.0" in both locations (lines 67 and 75) to ensure consistency.
🧹 Nitpick comments (1)
packages/next/package.json (1)

76-76: Consider updating the peer dependency version.

The devDependency version of @tanstack/react-query is ^5.66.0 while the peerDependency is still at ^5.59.15. Consider updating the peerDependency to match for better version alignment.

-    "@tanstack/react-query": "^5.59.15",
+    "@tanstack/react-query": "^5.66.0",

Also applies to: 94-94

✅ Verification successful

🌐 Web query:

What are the breaking changes or deprecations in @tanstack/react-query between versions 5.62.8 and 5.66.0?

💡 Result:

Between versions 5.62.8 and 5.66.0 of @tanstack/react-query, several updates and fixes were introduced with no major breaking changes reported in the release notes[3][10]. However, there are notable adjustments worth highlighting:


Key Changes

  1. Suspense Timers Adjustment

    • In v5.62.14, suspense timers now enforce a minimum staleTime of 1000ms when using suspense mode[3]. This affects timing-sensitive implementations:
    // Before: Could use staleTime <1000ms
    // After: Automatically set to 1000ms if lower
    useSuspenseQuery({ queryKey: ['todos'], queryFn: fetchTodos, staleTime: 500 }) // [!code --]
  2. TypeScript Improvements

    • v5.64.x improved type safety for query/mutation keys by supporting both Array and ReadonlyArray types[3].
  3. Unsubscription Option

    • Added subscribed option in v5.63.x to control cache subscription behavior for useQuery/useQueries[3]:
    useQuery({
      queryKey: ['todos'],
      queryFn: fetchTodos,
      subscribed: false // Opt out of automatic cache updates
    })

Deprecations & Removals

No explicit deprecations occurred in this version range based on available data[3][10]. Earlier major changes (like v5’s removal of overloaded APIs) predate these versions[1][7].


Critical Fixes

  • React Suspense Errors (v5.65.x): Improved error propagation for useSuspenseQuery[3].
  • Vue Query Keys (v5.62.x): Fixed reactivity issues with Vue’s queryKey refs[3].

For full details, see the release notes[3].

Citations:


Action: Update the peer dependency version to ensure consistency.

After verifying the changelog for @tanstack/react-query, we confirmed that the changes between versions 5.62.8 and 5.66.0 introduced minor adjustments and improvements without any breaking changes. Given that the devDependency is now set to ^5.66.0, aligning the peer dependency to the same version (i.e., updating it from ^5.59.15 to ^5.66.0) will ensure consistency across your project.

  • File: packages/next/package.json (lines 76 and 94)
  • Suggestion:
    -    "@tanstack/react-query": "^5.59.15",
    +    "@tanstack/react-query": "^5.66.0",
📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 9a91ad2 and f94f69b.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (20)
  • examples/.experimental/next-app-dir/package.json (1 hunks)
  • examples/.test/diagnostics-big-router/package.json (1 hunks)
  • examples/.test/monotest-app/package.json (1 hunks)
  • examples/.test/ssg-infinite-serialization/package.json (1 hunks)
  • examples/.test/ssg/package.json (1 hunks)
  • examples/minimal-content-types/client/package.json (1 hunks)
  • examples/minimal-react/client/package.json (1 hunks)
  • examples/next-big-router/package.json (1 hunks)
  • examples/next-edge-runtime/package.json (1 hunks)
  • examples/next-formdata/package.json (1 hunks)
  • examples/next-minimal-starter/package.json (1 hunks)
  • examples/next-prisma-starter/package.json (1 hunks)
  • examples/next-prisma-todomvc/package.json (2 hunks)
  • examples/next-prisma-websockets-starter/package.json (2 hunks)
  • examples/next-sse-chat/package.json (1 hunks)
  • examples/tanstack-start/package.json (1 hunks)
  • packages/next/package.json (1 hunks)
  • packages/react-query/package.json (1 hunks)
  • packages/server/package.json (1 hunks)
  • packages/tests/package.json (1 hunks)
✅ Files skipped from review due to trivial changes (8)
  • examples/next-minimal-starter/package.json
  • examples/next-big-router/package.json
  • examples/next-edge-runtime/package.json
  • examples/next-formdata/package.json
  • examples/minimal-react/client/package.json
  • examples/.test/monotest-app/package.json
  • examples/.experimental/next-app-dir/package.json
  • examples/next-sse-chat/package.json
⏰ Context from checks skipped due to timeout of 90000ms (3)
  • GitHub Check: test
  • GitHub Check: build
  • GitHub Check: Lint and auto-fix
🔇 Additional comments (9)
examples/minimal-content-types/client/package.json (1)

12-12: Verify compatibility with the latest @tanstack/react-query version.

Let's check the latest version and any potential security advisories for @tanstack/react-query.

✅ Verification successful

🏁 Script executed:

#!/bin/bash
# Description: Check for security advisories and latest versions of @tanstack/react-query

# Check NPM for latest versions
curl -s https://registry.npmjs.org/@tanstack/react-query | jq '.["dist-tags"]'

# Check for security advisories
gh api graphql -f query='
{
  securityVulnerabilities(first: 5, ecosystem: NPM, package: "@tanstack/react-query") {
    nodes {
      advisory {
        summary
        severity
        publishedAt
      }
      vulnerableVersionRange
      firstPatchedVersion {
        identifier
      }
    }
  }
}'

Length of output: 539


🌐 Web query:

What is the latest version of @tanstack/react-query and are there any breaking changes between 5.62.8 and 5.66.0?

💡 Result:

The latest version of @tanstack/react-query is v5.66.0, released on January 31, 2025[1].

Breaking Changes Between v5.62.x and v5.66.x

No major breaking changes are documented in releases from v5.62.x to v5.66.x. However, several notable updates and fixes were introduced:

Key Changes

1️⃣ React Suspense Improvements

  • Fixed suspense timers to enforce staleTime ≥ 1000ms when using ensureSuspenseTimers[1][7].
  • Errors from select in useSuspenseQuery now propagate to React Error Boundaries[1].

2️⃣ TypeScript Enhancements

  • Added support for both Array and ReadonlyArray types in query/mutation keys[1][7].
  • Fixed missing subscribed option type in UseInfiniteQueryOptions[1].

3️⃣ New Features

  • Added an unsubscribe option for useQuery/useQueries to disconnect from the query cache[1][7].

Deprecations & Migration Notes

While no direct breaking changes occurred between these versions:

  • The broader v5 release introduced major changes like replacing keepPreviousData with placeholderData, renaming Hydrate to HydrationBoundary, and requiring React ≥18[4][2].
  • Ensure your codebase follows v5 migration guidelines[4], such as updating hydration patterns and structural sharing configurations[4][2].

For full details, review the release notes[1] or test upgrades using automated codemods from TanStack[4].

Citations:


Compatibility Confirmed: @tanstack/react-query v5.66.0 is safe to use

  • The NPM registry confirms 5.66.0 is the latest release.
  • No security vulnerabilities were reported.
  • Documentation shows no major breaking changes between v5.62.x and v5.66.x.
  • React 19 (your current version) meets the requirement of React ≥18 for v5.
  • Compatibility with @trpc/react-query@next appears unaffected based on relevant version updates.
examples/.test/diagnostics-big-router/package.json (1)

10-10: LGTM! Version update is consistent.

The update to @tanstack/react-query ^5.66.0 maintains consistency with other packages in the monorepo.

examples/.test/ssg/package.json (1)

14-14: LGTM! Version update is consistent.

The update to @tanstack/react-query ^5.66.0 maintains consistency with other packages in the monorepo.

examples/tanstack-start/package.json (1)

15-16: Verify compatibility between TanStack packages.

Please ensure compatibility between all TanStack packages:

  • @tanstack/react-query ^5.66.0
  • @tanstack/react-query-devtools ^5.64.2
  • @tanstack/react-router ^1.85.10
  • @tanstack/react-router-with-query ^1.85.10
  • @tanstack/router-devtools ^1.69.1
  • @tanstack/start ^1.69.1
✅ Verification successful

🌐 Web query:

What are the peer dependency requirements for @tanstack/react-query-devtools v5.64.2?

💡 Result:

The peer dependency requirements for @tanstack/react-query-devtools v5.64.2 are:

  1. React ≥18:

    • Required due to React Query v5's reliance on useSyncExternalStore, introduced in React 18[4][5].
    • Conflicts arise if using React 19 beta or older versions like React 17[5][10].
  2. @tanstack/react-query ≥v5:

    • Must match compatible versions (e.g., @tanstack/react-query@5.x)[1][3].
    • Version mismatches trigger installation errors unless forced with --force[5].

For Next.js 13+ App Dir projects, install as a dev dependency:

npm install @tanstack/react-query-devtools@5.64.2 --save-dev

Citations:


Compatibility between TanStack packages verified.

The peer dependency check for @tanstack/react-query-devtools v5.64.2 confirms it requires @tanstack/react-query ≥ v5, which is satisfied by ^5.66.0. The other TanStack packages (react-router, react-router-with-query, router-devtools, and start) are maintained at consistent version levels that are designed to work together within the TanStack ecosystem.

examples/next-prisma-todomvc/package.json (1)

25-25: LGTM! Dependencies updated consistently.

The updates to both @tanstack/react-query and @tanstack/react-query-devtools are aligned with the project-wide version bump.

Also applies to: 41-41

examples/next-prisma-starter/package.json (1)

35-35: LGTM! Dependency version updated consistently.

The update to @tanstack/react-query matches the project-wide version bump.

examples/next-prisma-websockets-starter/package.json (1)

44-44: LGTM! Dependencies updated consistently.

The updates to both @tanstack/react-query and @tanstack/react-query-devtools are aligned with the project-wide version bump.

Also applies to: 61-61

packages/tests/package.json (1)

18-18: LGTM! Test dependency version updated consistently.

The update to @tanstack/react-query matches the project-wide version bump.

packages/server/package.json (1)

121-121: LGTM! Version update is consistent.

The update of @tanstack/react-query to ^5.66.0 matches the version used in other packages, maintaining consistency across the project.

Comment thread examples/.test/ssg-infinite-serialization/package.json
@pkg-pr-new

pkg-pr-new Bot commented Feb 11, 2025

Copy link
Copy Markdown

Open in Stackblitz

npm i https://pkg.pr.new/trpc/trpc/@trpc/client@6479
npm i https://pkg.pr.new/trpc/trpc/@trpc/next@6479
npm i https://pkg.pr.new/trpc/trpc/@trpc/server@6479
npm i https://pkg.pr.new/trpc/trpc/@trpc/react-query@6479

commit: 5231fa5

@KATT KATT merged commit 7c239ec into next Feb 11, 2025
@KATT KATT deleted the 02-11-bump-rq branch February 11, 2025 10:25
@github-actions

Copy link
Copy Markdown
Contributor

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.

@github-actions github-actions Bot locked as resolved and limited conversation to collaborators Feb 12, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants