Skip to content

Conversation

@AlexanderKaran
Copy link

@AlexanderKaran AlexanderKaran commented Nov 11, 2025

🎯 Changes

Upgrade TanStack Query to use Vitest 4. Most changes were around mocks, testing functions being used and some config tweaks.

A few gotchas I am unsure about:

  • Had to pin Vite version in overrides
  • Vitest 4 has some changes under the hood that causes a few tests to fail in react-query not 100% sure about the solution

Please let me know if I have messed with things that should not be touched.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

  • Chores
    • Updated Vite to v6.4.1 across examples, integrations, and toolings; bumped several dev tooling and type packages for compatibility.
  • Tests
    • Improved mocks, assertions, timers, dynamic-import handling, and added mock cleanup for more reliable, deterministic test suites.
  • Configuration
    • Switched React JSX compiler option to "react-jsx" in example configs and added Next.js route type imports to improve type checking.

✏️ Tip: You can customize this high-level summary in your review settings.

@changeset-bot
Copy link

changeset-bot bot commented Nov 11, 2025

⚠️ No Changeset found

Latest commit: 8ab8f92

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 11, 2025

📝 Walkthrough

Walkthrough

Bulk updates across examples and integrations: many package.json files bump Vite; root devDependencies updated; React example tsconfigs switch JSX runtime to "react-jsx"; Next.js route types imported into example ambient typings; multiple test mocks, assertions, and mock-reset calls refined.

Changes

Cohort / File(s) Summary
Vite devDependency bumps
examples/.../*/package.json, integrations/*-vite/package.json, packages/vue-query-devtools/package.json, integrations/...
Updated devDependency vite from ^6.3.6^6.4.1 across many example and integration package.json files.
Root dependency upgrades
package.json
Upgraded root devDeps (vite, vitest, @vitest/coverage-istanbul, @vitest/eslint-plugin) and pnpm overrides (types and tooling versions).
Next.js route type imports
examples/react/*/next-env.d.ts
Added import "./.next/types/routes.d.ts" to several Next.js ambient type files.
React JSX runtime changes
examples/react/*/tsconfig.json
Changed compilerOptions.jsx from "preserve""react-jsx" in multiple React example tsconfigs; one tsconfig added .next/dev/types/**/*.ts to includes.
ESLint & Vitest/Vite config tweaks
eslint.config.js, packages/query-codemods/vite.config.ts, packages/solid-query-devtools/vite.config.ts
Merged vitest rules with explicit vitest/no-standalone-expect option; expanded vitest coverage include patterns; switched defineConfig import to vitest/config.
Vue & Angular mock/test refinements
packages/vue-query/src/__mocks__/useBaseQuery.ts, packages/vue-query/src/__mocks__/useQueryClient.ts, packages/vue-query/src/__tests__/*, packages/angular-query-experimental/src/__tests__/*
Adjusted mock typings/exports (removed explicit Mock types, removed unrefQueryArgs), changed vi.fn usage to named helpers, and added vi.clearAllMocks() in beforeEach hooks.
Test behavior & assertion adjustments
packages/react-query/..., packages/query-core/..., packages/query-persist-client-core/..., packages/vue-query/src/__tests__/*, packages/solid-query/src/__tests__/*
Tightened assertions (e.g., use rejects, toHaveBeenCalledExactlyOnceWith, expect.objectContaining), updated fake-timer setups, added vi.dynamicImportSettled()/waitFor, and replaced restoreAllMocks() with clearAllMocks() in several tests.
Small typing tweaks
packages/vue-query-devtools/src/devtoolsPanel.vue, packages/query-core/...
Local type annotation adjustments (e.g., computed style typed as any, spy typings changed to MockInstance).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested labels

dependencies

Suggested reviewers

  • manudeli

Poem

🐰 I hopped through deps and nibbled a line,

Vite climbed up, typings fell in line.
JSX now dances with react-jsx cheer,
Mocks polished, tests whisper "all clear". 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Upgrade to Vitest v4' is clear, specific, and directly summarizes the main change - upgrading the testing framework from Vitest v3 to v4.
Description check ✅ Passed The PR description covers the 🎯 Changes section explaining the upgrade and challenges, completes both checklist items, and indicates the change is docs/CI/dev-only with no changeset needed.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Collaborator

@TkDodo TkDodo left a comment

Choose a reason for hiding this comment

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

awesome. can you please fix the conflicts and I’ll try to ship it


expect(queryFn).toHaveBeenCalledOnce()
expect(queryFn).toHaveBeenCalledWith(context)
expect(queryFn).toHaveBeenCalledExactlyOnceWith(context)
Copy link
Collaborator

Choose a reason for hiding this comment

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

oh this is a nice new matcher 👍


afterEach(() => {
vi.useRealTimers()
Fallback.mockClear()
Copy link
Collaborator

Choose a reason for hiding this comment

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

what’s that doing?

Copy link
Author

Choose a reason for hiding this comment

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

Left over from debugging why the test broke on the upgrade. Forgot to remove sorry

Copy link
Author

Choose a reason for hiding this comment

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

Removed

@AlexanderKaran
Copy link
Author

@TkDodo sorry missed these comments will get this fixed tomorrow/day after

@AlexanderKaran
Copy link
Author

@TkDodo Fixed merge conflicts but now one test is failing, need to double check why

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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

♻️ Duplicate comments (9)
examples/react/optimistic-updates-ui/next-env.d.ts (1)

3-3: Same concern as previous next-env.d.ts files.

This file has the same manual edit concern raised for examples/react/infinite-query-with-max-pages/next-env.d.ts. Please verify these imports are auto-generated by Next.js tooling.

examples/react/optimistic-updates-cache/tsconfig.json (1)

9-9: Same JSX runtime concern as other tsconfig files.

This JSX runtime change from "preserve" to "react-jsx" has the same compatibility implications flagged in examples/react/prefetching/tsconfig.json. Please verify this is intentional and tested across all affected examples.

examples/react/optimistic-updates-ui/tsconfig.json (1)

9-9: Same JSX runtime concern as other tsconfig files.

Duplicate of the JSX runtime compatibility concern raised in previous tsconfig.json files.

examples/react/nextjs-suspense-streaming/tsconfig.json (1)

19-19: Same JSX runtime concern as other tsconfig files.

This is the same JSX runtime change flagged in multiple other tsconfig.json files. Verify compatibility and intentionality.

examples/react/auto-refetching/next-env.d.ts (1)

3-3: Same concern as other next-env.d.ts files.

Duplicate of the auto-generated file editing concern raised for previous next-env.d.ts files.

examples/react/pagination/tsconfig.json (1)

18-18: Same JSX runtime concern as other tsconfig files.

This is the same JSX runtime compatibility concern raised across multiple tsconfig.json files in this PR.

examples/react/load-more-infinite-scroll/tsconfig.json (1)

18-18: Verify JSX runtime change is intentional.

Same concern as in examples/react/auto-refetching/tsconfig.json - the jsx option changed from "preserve" to "react-jsx". Please verify this is intentional and compatible with the React version used in this example.

examples/react/nextjs-app-prefetching/tsconfig.json (1)

19-19: Verify JSX runtime change is intentional.

Same JSX runtime change from "preserve" to "react-jsx" as in other examples. Please verify this is intentional and compatible.

examples/react/nextjs/tsconfig.json (1)

18-18: Verify JSX runtime change is intentional.

Same JSX runtime change from "preserve" to "react-jsx" as in other examples. Please confirm this is intentional and part of the Vitest v4 upgrade requirements.

🧹 Nitpick comments (6)
examples/solid/default-query-function/package.json (1)

17-17: Consider using exact version "6.4.1" if strict pinning is required.

The caret in ^6.4.1 allows minor and patch updates (6.4.x, 6.x where x ≥ 4) rather than pinning to the exact version. If the PR aims to pin the Vite version as mentioned in the description, use "vite": "6.4.1" instead. Vite 6.4.1 is secure with no known vulnerabilities.

examples/react/prefetching/tsconfig.json (1)

3-7: LGTM: Formatting improvements.

The multi-line formatting of the lib, include, and exclude arrays improves readability with no semantic changes.

Also applies to: 22-29

examples/react/optimistic-updates-cache/tsconfig.json (1)

5-8: LGTM: Formatting improvements.

The multi-line formatting of the configuration arrays improves readability without changing behavior.

Also applies to: 21-26

examples/react/optimistic-updates-ui/tsconfig.json (1)

5-8: LGTM: Formatting improvements.

Multi-line array formatting enhances readability with no semantic changes.

Also applies to: 21-26

examples/react/nextjs-suspense-streaming/tsconfig.json (1)

4-8: LGTM: Formatting improvements.

Multi-line formatting improves readability without semantic changes.

Also applies to: 34-36

examples/react/pagination/tsconfig.json (1)

3-7: LGTM: Formatting improvements.

The multi-line array formatting enhances readability with no semantic changes.

Also applies to: 22-29

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between aeefc4c and ed0ad73.

📒 Files selected for processing (50)
  • eslint.config.js (1 hunks)
  • examples/react/algolia/package.json (1 hunks)
  • examples/react/auto-refetching/next-env.d.ts (1 hunks)
  • examples/react/auto-refetching/tsconfig.json (2 hunks)
  • examples/react/basic-graphql-request/package.json (1 hunks)
  • examples/react/basic/package.json (1 hunks)
  • examples/react/chat/package.json (1 hunks)
  • examples/react/default-query-function/package.json (1 hunks)
  • examples/react/devtools-panel/package.json (1 hunks)
  • examples/react/eslint-legacy/package.json (1 hunks)
  • examples/react/infinite-query-with-max-pages/next-env.d.ts (1 hunks)
  • examples/react/infinite-query-with-max-pages/tsconfig.json (2 hunks)
  • examples/react/load-more-infinite-scroll/next-env.d.ts (1 hunks)
  • examples/react/load-more-infinite-scroll/tsconfig.json (2 hunks)
  • examples/react/nextjs-app-prefetching/tsconfig.json (2 hunks)
  • examples/react/nextjs-suspense-streaming/tsconfig.json (3 hunks)
  • examples/react/nextjs/next-env.d.ts (1 hunks)
  • examples/react/nextjs/tsconfig.json (2 hunks)
  • examples/react/offline/package.json (1 hunks)
  • examples/react/optimistic-updates-cache/next-env.d.ts (1 hunks)
  • examples/react/optimistic-updates-cache/tsconfig.json (2 hunks)
  • examples/react/optimistic-updates-ui/next-env.d.ts (1 hunks)
  • examples/react/optimistic-updates-ui/tsconfig.json (2 hunks)
  • examples/react/pagination/next-env.d.ts (1 hunks)
  • examples/react/pagination/tsconfig.json (2 hunks)
  • examples/react/playground/package.json (1 hunks)
  • examples/react/prefetching/next-env.d.ts (1 hunks)
  • examples/react/prefetching/tsconfig.json (2 hunks)
  • examples/react/react-router/package.json (1 hunks)
  • examples/react/rick-morty/package.json (1 hunks)
  • examples/react/shadow-dom/package.json (1 hunks)
  • examples/react/simple/package.json (1 hunks)
  • examples/react/star-wars/package.json (1 hunks)
  • examples/react/suspense/package.json (1 hunks)
  • examples/solid/basic-graphql-request/package.json (1 hunks)
  • examples/solid/basic/package.json (1 hunks)
  • examples/solid/default-query-function/package.json (1 hunks)
  • examples/solid/simple/package.json (1 hunks)
  • examples/svelte/auto-refetching/package.json (1 hunks)
  • examples/svelte/basic/package.json (1 hunks)
  • examples/svelte/load-more-infinite-scroll/package.json (1 hunks)
  • examples/svelte/optimistic-updates/package.json (1 hunks)
  • examples/svelte/playground/package.json (1 hunks)
  • examples/svelte/simple/package.json (1 hunks)
  • examples/svelte/ssr/package.json (1 hunks)
  • examples/svelte/star-wars/package.json (1 hunks)
  • examples/vue/basic/package.json (1 hunks)
  • examples/vue/dependent-queries/package.json (1 hunks)
  • examples/vue/persister/package.json (1 hunks)
  • examples/vue/simple/package.json (1 hunks)
✅ Files skipped from review due to trivial changes (1)
  • examples/react/infinite-query-with-max-pages/tsconfig.json
🚧 Files skipped from review as they are similar to previous changes (28)
  • examples/vue/dependent-queries/package.json
  • examples/svelte/load-more-infinite-scroll/package.json
  • examples/react/suspense/package.json
  • examples/react/chat/package.json
  • examples/svelte/auto-refetching/package.json
  • examples/solid/basic/package.json
  • examples/react/playground/package.json
  • examples/react/devtools-panel/package.json
  • examples/react/star-wars/package.json
  • examples/react/prefetching/next-env.d.ts
  • examples/svelte/optimistic-updates/package.json
  • examples/svelte/simple/package.json
  • examples/react/react-router/package.json
  • examples/react/basic/package.json
  • examples/react/load-more-infinite-scroll/next-env.d.ts
  • examples/solid/simple/package.json
  • examples/svelte/playground/package.json
  • examples/svelte/star-wars/package.json
  • examples/react/simple/package.json
  • examples/react/shadow-dom/package.json
  • examples/solid/basic-graphql-request/package.json
  • examples/react/pagination/next-env.d.ts
  • examples/react/basic-graphql-request/package.json
  • examples/svelte/basic/package.json
  • examples/vue/persister/package.json
  • examples/react/rick-morty/package.json
  • examples/react/optimistic-updates-cache/next-env.d.ts
  • examples/react/offline/package.json
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-08-19T03:18:18.303Z
Learnt from: oscartbeaumont
Repo: TanStack/query PR: 9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.

Applied to files:

  • examples/solid/default-query-function/package.json
  • examples/react/load-more-infinite-scroll/tsconfig.json
  • examples/react/nextjs/next-env.d.ts
  • examples/react/optimistic-updates-ui/tsconfig.json
  • examples/react/optimistic-updates-cache/tsconfig.json
  • examples/react/infinite-query-with-max-pages/next-env.d.ts
  • examples/react/auto-refetching/next-env.d.ts
  • examples/react/optimistic-updates-ui/next-env.d.ts
  • examples/react/nextjs-app-prefetching/tsconfig.json
📚 Learning: 2025-09-02T17:57:33.184Z
Learnt from: TkDodo
Repo: TanStack/query PR: 9612
File: packages/query-async-storage-persister/src/asyncThrottle.ts:0-0
Timestamp: 2025-09-02T17:57:33.184Z
Learning: When importing from tanstack/query-core in other TanStack Query packages like query-async-storage-persister, a workspace dependency "tanstack/query-core": "workspace:*" needs to be added to the package.json.

Applied to files:

  • examples/solid/default-query-function/package.json
🔇 Additional comments (12)
examples/react/algolia/package.json (1)

23-23: Vite 6.4.1 is compatible with Vitest v4 and receives security patches.

Vitest v4 requires Vite >=v6.0.0, and Vite 6.4 receives important fixes and security patches. The version bump from 6.3.6 to 6.4.1 is appropriate and aligns with the PR's Vitest v4 upgrade objectives.

examples/react/eslint-legacy/package.json (1)

25-25: Version bump is appropriate and secure.

The upgrade from ^6.3.6 to ^6.4.1 is a straightforward patch-level bump within the actively maintained 6.x series. This version is fully compatible with Vitest v4 and has no known security vulnerabilities.

examples/react/default-query-function/package.json (1)

19-19: The vite 6.4.1 upgrade is valid and safe.

No direct vulnerabilities have been found for vite 6.4.1, it is compatible with Vitest 4.x (which lists vite ^6.0.0 as a compatible dependency), and the caret range aligns with standard monorepo override practices. The change appropriately supports the Vitest v4 upgrade objective.

examples/vue/basic/package.json (1)

18-18: Vite 6.4.1 is compatible with Vitest v4.

The patch version bump (6.3.6 → 6.4.1) aligns with Vitest v4's requirement for Vite >=v6.0.0. Vite 6.4.x is an actively supported version line receiving important fixes and security patches, making this a safe and intentional upgrade.

examples/vue/simple/package.json (1)

18-18: and

eslint.config.js (1)

53-61: LGTM! Configuration aligns with Vitest v4 upgrade best practices.

Spreading vitest.configs.recommended.rules ensures compatibility with the new plugin version, and the explicit override for vitest/no-standalone-expect to include testIf as a recognized test block function is necessary—testIf is actively used throughout test files as a conditional test wrapper.

examples/svelte/ssr/package.json (1)

21-21: Vite version bump to 6.4.1 is appropriate for Vitest v4 upgrade.

The upgrade to ^6.4.1 is compatible with Vitest 4.0.8 (the root version). Vite 6.x is officially supported by Vitest v4, and this minor bump aligns with the PR's upgrade objectives. Note that Vite 6 + Vitest 4 integration has some known issues around resolve.conditions, so running the full test suite locally (which you've already done) is the right verification approach.

examples/react/prefetching/tsconfig.json (1)

18-18: Verify JSX runtime change is compatible with React version and codebase.

Changing from "preserve" to "react-jsx" switches to React's automatic JSX runtime. Confirm:

  • React version is 17.0.0 or higher
  • Explicit import React statements in example files have been removed or are handled correctly
  • The connection to the Vitest v4 upgrade is clarified (no JSX runtime changes are mentioned in Vitest v4 migration guide)
examples/react/infinite-query-with-max-pages/next-env.d.ts (1)

3-3: Remove manual import from auto-generated file.

The import "./.next/types/routes.d.ts" should not be manually added to next-env.d.ts. This file is auto-generated by Next.js and any manual edits will be overwritten on the next build or dev command. Instead, ensure .next/types/**/*.ts is included in your project's tsconfig.json include array, which is the correct way Next.js provides typed route information.

examples/react/nextjs-app-prefetching/tsconfig.json (1)

38-38: LGTM: Standard Next.js type inclusion.

The addition of ".next/dev/types/**/*.ts" is a standard Next.js TypeScript configuration for including generated type definitions during development.

examples/react/nextjs/next-env.d.ts (1)

3-3: LGTM: Standard Next.js route type import.

The import of ./.next/types/routes.d.ts is part of Next.js's typed routing feature, providing type safety for routes. This is a standard pattern for Next.js projects with TypeScript.

examples/react/auto-refetching/tsconfig.json (1)

18-18: Verify JSX runtime change is intentional and compatible.

The jsx option changed from "preserve" to "react-jsx", which enables the new JSX transform introduced in React 17. While this is generally a positive modernization, it's unclear if this change is related to the Vitest v4 upgrade or was an unintended side-effect.

Please confirm:

  1. This change is intentional
  2. The example uses React 17 or later
  3. This doesn't break the example's functionality
#!/bin/bash
# Description: Check React version in this example and verify it supports react-jsx transform

# Find package.json and check React version
fd -t f "^package.json$" examples/react/auto-refetching --exec cat {} \; | jq -r '.dependencies.react // .devDependencies.react // "not found"'

@AlexanderKaran
Copy link
Author

@TkDodo Sorry it took me a while went on holiday. Fixed up all the Knip, ESLint and other issues caused by the conflict with main.

Let me know if I need to do any more work to it.

@nx-cloud
Copy link

nx-cloud bot commented Dec 27, 2025

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

To disable these notifications, a workspace admin can disable them in workspace settings.


View your CI Pipeline Execution ↗ for commit f013619

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ❌ Failed 3m 55s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 1m 27s View ↗

☁️ Nx Cloud last updated this comment at 2026-01-16 10:27:19 UTC

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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

♻️ Duplicate comments (1)
examples/react/infinite-query-with-max-pages/next-env.d.ts (1)

3-3: Same concern as in examples/react/prefetching/next-env.d.ts.

This file has the identical change (importing ./.next/types/routes.d.ts) and raises the same questions about committing auto-generated Next.js build artifacts. Please refer to the review comment on the prefetching example for details.

🧹 Nitpick comments (1)
packages/vue-query/src/__tests__/queryClient.test.ts (1)

347-352: Consider applying the same pattern to prefetchInfiniteQuery test.

The fetchInfiniteQuery tests now use expect.objectContaining to accommodate additional fields, but the prefetchInfiniteQuery test at lines 384-388 still uses an exact match assertion. If Vitest v4's internal changes affect both methods similarly, this inconsistency may cause the prefetchInfiniteQuery test to fail.

🔎 Suggested change for consistency
-      expect(QueryClientOrigin.prototype.prefetchInfiniteQuery).toBeCalledWith({
-        initialPageParam: 0,
-        queryKey: queryKeyUnref,
-        queryFn: fn,
-      })
+      expect(QueryClientOrigin.prototype.prefetchInfiniteQuery).toBeCalledWith(
+        expect.objectContaining({
+          initialPageParam: 0,
+          queryKey: queryKeyUnref,
+          queryFn: fn,
+        }),
+      )
📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ed0ad73 and b748a95.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (20)
  • examples/react/auto-refetching/next-env.d.ts
  • examples/react/auto-refetching/tsconfig.json
  • examples/react/infinite-query-with-max-pages/next-env.d.ts
  • examples/react/infinite-query-with-max-pages/tsconfig.json
  • examples/react/load-more-infinite-scroll/next-env.d.ts
  • examples/react/load-more-infinite-scroll/tsconfig.json
  • examples/react/nextjs-app-prefetching/tsconfig.json
  • examples/react/nextjs-suspense-streaming/tsconfig.json
  • examples/react/nextjs/next-env.d.ts
  • examples/react/nextjs/tsconfig.json
  • examples/react/optimistic-updates-cache/next-env.d.ts
  • examples/react/optimistic-updates-cache/tsconfig.json
  • examples/react/optimistic-updates-ui/next-env.d.ts
  • examples/react/optimistic-updates-ui/tsconfig.json
  • examples/react/pagination/next-env.d.ts
  • examples/react/pagination/tsconfig.json
  • examples/react/prefetching/next-env.d.ts
  • examples/react/prefetching/tsconfig.json
  • packages/react-query/src/__tests__/useQuery.promise.test.tsx
  • packages/vue-query/src/__tests__/queryClient.test.ts
🚧 Files skipped from review as they are similar to previous changes (12)
  • examples/react/nextjs/next-env.d.ts
  • examples/react/pagination/next-env.d.ts
  • examples/react/auto-refetching/next-env.d.ts
  • examples/react/auto-refetching/tsconfig.json
  • examples/react/optimistic-updates-cache/tsconfig.json
  • examples/react/optimistic-updates-cache/next-env.d.ts
  • examples/react/pagination/tsconfig.json
  • examples/react/infinite-query-with-max-pages/tsconfig.json
  • examples/react/load-more-infinite-scroll/next-env.d.ts
  • examples/react/nextjs-app-prefetching/tsconfig.json
  • examples/react/optimistic-updates-ui/next-env.d.ts
  • packages/react-query/src/tests/useQuery.promise.test.tsx
🧰 Additional context used
🧠 Learnings (4)
📚 Learning: 2025-08-19T03:18:18.303Z
Learnt from: oscartbeaumont
Repo: TanStack/query PR: 9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.

Applied to files:

  • examples/react/infinite-query-with-max-pages/next-env.d.ts
  • examples/react/optimistic-updates-ui/tsconfig.json
  • examples/react/prefetching/tsconfig.json
  • examples/react/load-more-infinite-scroll/tsconfig.json
  • examples/react/prefetching/next-env.d.ts
  • examples/react/nextjs/tsconfig.json
📚 Learning: 2025-11-22T09:06:05.219Z
Learnt from: sukvvon
Repo: TanStack/query PR: 9892
File: packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx:331-335
Timestamp: 2025-11-22T09:06:05.219Z
Learning: In TanStack/query test files, when a queryFn contains side effects (e.g., setting flags for test verification), prefer async/await syntax for clarity; when there are no side effects, prefer the .then() pattern for conciseness.

Applied to files:

  • packages/vue-query/src/__tests__/queryClient.test.ts
📚 Learning: 2025-09-02T17:57:33.184Z
Learnt from: TkDodo
Repo: TanStack/query PR: 9612
File: packages/query-async-storage-persister/src/asyncThrottle.ts:0-0
Timestamp: 2025-09-02T17:57:33.184Z
Learning: When importing from tanstack/query-core in other TanStack Query packages like query-async-storage-persister, a workspace dependency "tanstack/query-core": "workspace:*" needs to be added to the package.json.

Applied to files:

  • packages/vue-query/src/__tests__/queryClient.test.ts
📚 Learning: 2025-11-02T22:52:33.071Z
Learnt from: DogPawHat
Repo: TanStack/query PR: 9835
File: packages/query-core/src/__tests__/queryClient.test-d.tsx:242-256
Timestamp: 2025-11-02T22:52:33.071Z
Learning: In the TanStack Query codebase, the new `query` and `infiniteQuery` methods support the `select` option for data transformation, while the legacy `fetchQuery` and `fetchInfiniteQuery` methods do not support `select` and should reject it at the type level.

Applied to files:

  • packages/vue-query/src/__tests__/queryClient.test.ts
🔇 Additional comments (9)
examples/react/load-more-infinite-scroll/tsconfig.json (1)

14-14: Verify this JSX runtime change is intentional.

This change switches from "preserve" to "react-jsx", enabling React 17+'s automatic JSX transform. While this is a valid modernization, it appears unrelated to the Vitest v4 upgrade scope of this PR.

For Next.js projects, "jsx": "preserve" is typically recommended because Next.js handles JSX transformation internally. However, "react-jsx" also works.

Please confirm:

  1. This change is intentional (not a side effect of tooling updates)
  2. The React version in this example is 17+ (required for the automatic JSX runtime)
  3. This aligns with the project's desired configuration
packages/vue-query/src/__tests__/queryClient.test.ts (3)

7-29: Well-designed dynamic mock pattern.

This approach dynamically spies on all QueryClient prototype methods, making the test setup more maintainable and automatically covering new methods added to the class. The pattern of using vi.importActual combined with vi.spyOn on prototype methods is idiomatic for Vitest.


37-40: Good addition of vi.clearAllMocks().

Since spies are attached to the prototype and shared across test instances, clearing mocks before each test is essential to prevent call history from leaking between tests.


365-370: Consistent with the updated assertion pattern.

examples/react/prefetching/tsconfig.json (1)

14-14: JSX runtime update looks good; verify this change is intentional.

The switch from "preserve" to "react-jsx" enables the modern React 17+ automatic JSX transform, which is fully supported by React 19 and eliminates the need for explicit React imports in JSX files. This is technically correct and aligns with current best practices.

However, since this PR focuses on upgrading to Vitest v4, please confirm this JSX configuration change is intentional (either related to the Vitest upgrade or a deliberate configuration cleanup), as opposed to an accidental side effect.

examples/react/optimistic-updates-ui/tsconfig.json (1)

6-6: JSX runtime update looks good; verify this change is intentional.

The switch to "react-jsx" enables the React 17+ automatic JSX transform. This is technically correct and aligns with modern React practices.

However, please confirm this configuration change is intentional and related to the Vitest v4 upgrade scope, as the connection is not immediately clear from the PR objectives.

examples/react/nextjs-suspense-streaming/tsconfig.json (1)

15-15: JSX runtime update looks good; verify this change is intentional.

The switch to "react-jsx" adopts the modern React automatic JSX transform, which is a best practice for React 17+ projects.

Please confirm this change is intentional within the scope of the Vitest v4 upgrade, as it appears to be part of a broader configuration update across multiple React examples.

examples/react/nextjs/tsconfig.json (1)

14-14: JSX runtime update looks good; verify this change is intentional.

The switch to "react-jsx" is well-supported by React 19.2.1 and represents a modern best practice by enabling the automatic JSX transform.

This change appears consistently across multiple React example tsconfigs in this PR. Please confirm this is intentional and either related to the Vitest v4 upgrade requirements or a deliberate configuration modernization effort.

examples/react/prefetching/next-env.d.ts (1)

3-3: Confirm whether this import pattern is required for the Vitest v4 upgrade or if it's a separate Next.js configuration update.

The import of ./.next/types/routes.d.ts in line 3 follows standard Next.js TypeScript configuration. The .next directory is properly ignored in .gitignore, and the referenced type definition file will be auto-generated locally when developers run next dev or next build. This pattern appears consistently across 8 example projects (prefetching, pagination, nextjs, load-more-infinite-scroll, optimistic-updates-cache, optimistic-updates-ui, auto-refetching, and infinite-query-with-max-pages), suggesting it's an intentional configuration rather than an error.

However, verify that this change is intentional for the upgrade objective and not an unrelated configuration update to the example projects.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Dec 27, 2025

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9862

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9862

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9862

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9862

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@9862

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@9862

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9862

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9862

@tanstack/react-query

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

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@9862

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9862

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9862

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@9862

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9862

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9862

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@9862

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9862

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9862

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@9862

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9862

commit: f013619

@AlexanderKaran
Copy link
Author

@TkDodo Do you want to try and re-do this? Happy to re-work it.

@TkDodo
Copy link
Collaborator

TkDodo commented Jan 16, 2026

@AlexanderKaran trying to fix the pipeline ...

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@package.json`:
- Around line 89-93: The pnpm override forcing vite ^6.4.1 conflicts with the
Vue 2 example packages (examples/vue/2.7-basic and examples/vue/2.6-basic) which
require vite ^4.5.14 for vite-plugin-vue2@2.0.3; fix by updating package.json
pnpm.overrides to either (a) add package-specific overrides that pin vite to
^4.5.14 for those two example packages, or (b) exclude those example packages
from the global vite override, or (c) update the example projects to be
compatible with vite ^6.x and replace vite-plugin-vue2 with a compatible plugin;
locate and change the pnpm.overrides entry in package.json and the vite entries
in examples/vue/2.7-basic and examples/vue/2.6-basic to implement one of these
fixes.
📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 71dfd88 and f013619.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (1)
  • package.json
🔇 Additional comments (1)
package.json (1)

56-57: All Vitest v4/Vite v6 versions are compatible and properly aligned.

vitest 4.0.17 supports Vite 5 and 6 (range: ^5.0.0 || ^6.0.0), and the included plugins (@vitest/coverage-istanbul 4.0.6, @vitest/eslint-plugin 1.4.0) are part of the Vitest 4.x ecosystem. The pnpm overrides for vite, esbuild, and @types packages are standard workspace management without conflicts.

✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.

@TkDodo
Copy link
Collaborator

TkDodo commented Jan 16, 2026

the remaining errors are legit I think, can you take another look please?

@AlexanderKaran
Copy link
Author

@TkDodo Digging into it now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants