fix(examples): use webpack in Next.js examples for StackBlitz compatibility

[MaNaN1803]

Fixes #11063. StackBlitz WebContainers currently do not support the native bindings required for Turbopack (the default in Next.js 15+). This updates all Next.js examples to use the --webpack flag in their dev scripts so the interactive sandboxes in the docs run without crashing.

Summary by CodeRabbit

• New Features

  • Vue Query methods now accept reactive getter functions for query invalidation and data fetching options, improving compatibility with reactive values.

• Developer Experience

  • Updated Next.js example and integration development commands to use the Webpack-based development server explicitly, providing a consistent local development setup across projects.

[coderabbitai]

📝 Walkthrough

Walkthrough

Next.js development scripts explicitly select Webpack. Vue Query’s invalidateQueries and fetchQuery methods now accept function-based reactive inputs, unwrap their results, and pass cloned values to query-core.

Changes

Next.js Webpack development scripts

Layer / File(s)	Summary
Enable Webpack development mode examples/react/*/package.json, integrations/react-next-*/package.json	Next.js dev scripts now run next dev --webpack instead of next or next dev.

Vue Query reactive query inputs

Layer / File(s)	Summary
Unwrap reactive query client inputs packages/vue-query/src/queryClient.ts	invalidateQueries and fetchQuery accept getter functions returning MaybeRefDeep values, unwrap those values, and pass the cloned results to query-core.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Caller
  participant QueryClient
  participant cloneDeepUnref
  participant QueryCore
  Caller->>QueryClient: provide filters or options
  QueryClient->>QueryClient: evaluate function-based input
  QueryClient->>cloneDeepUnref: unwrap reactive value
  cloneDeepUnref-->>QueryClient: plain query input
  QueryClient->>QueryCore: invalidate or fetch with unwrapped input

Loading

Possibly related PRs

• TanStack/query#11064: Updates the same Next.js example development scripts to use next dev --webpack.
• TanStack/query#11103: Updates Vue Query query client handling for getter-function options and reactive values.
• TanStack/query#11051: Related Vue Query changes involving function-based reactive query inputs and refetch behavior.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is on-topic but missing the required Changes, Checklist, and Release Impact sections from the template.	Add the template sections with a brief change summary, the checklist items, and whether a changeset is needed.
Out of Scope Changes check	⚠️ Warning	The vue-query QueryClient typing changes are unrelated to the StackBlitz/Next.js example fix.	Remove the vue-query changes or split them into a separate PR focused on that API typing work.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: switching Next.js example dev scripts to webpack for StackBlitz compatibility.
Linked Issues check	✅ Passed	The Next.js example script updates match issue #11063 and cover the affected examples listed in the report.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Checkov (3.3.8)

examples/react/auto-refetching/package.json

Traceback (most recent call last):
File "/usr/local/bin/checkov", line 2, in
from checkov.main import Checkov
ModuleNotFoundError: No module named 'checkov'

examples/react/infinite-query-with-max-pages/package.json

Traceback (most recent call last):
File "/usr/local/bin/checkov", line 2, in
from checkov.main import Checkov
ModuleNotFoundError: No module named 'checkov'

examples/react/load-more-infinite-scroll/package.json

Traceback (most recent call last):
File "/usr/local/bin/checkov", line 2, in
from checkov.main import Checkov
ModuleNotFoundError: No module named 'checkov'

• 8 others

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/vue-query/src/queryClient.ts (1)

197-226: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add regression coverage for callable reactive inputs.

Please add runtime and type-level tests in packages/vue-query/src/__tests__/queryClient.test.ts covering function-based filters, options, nested refs, queryKey getters, and refetchType behavior. These overloads introduce both a new public type contract and a new normalization path.

Also applies to: 296-330

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/vue-query/src/queryClient.ts` around lines 197 - 226, Add regression
coverage in queryClient.test.ts for invalidateQueries, exercising callable
filters and options with nested refs, queryKey getters, and refetchType behavior
at runtime. Add type-level assertions confirming these function-based inputs
satisfy the new invalidateQueries overloads and preserve the public contract.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/vue-query/src/queryClient.ts`:
- Around line 197-226: Add regression coverage in queryClient.test.ts for
invalidateQueries, exercising callable filters and options with nested refs,
queryKey getters, and refetchType behavior at runtime. Add type-level assertions
confirming these function-based inputs satisfy the new invalidateQueries
overloads and preserve the public contract.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6c914438-e201-4b86-928a-5af200a3336a

📥 Commits

Reviewing files that changed from the base of the PR and between 86bb8a6 and 15aefa9.

📒 Files selected for processing (12)

• examples/react/auto-refetching/package.json
• examples/react/infinite-query-with-max-pages/package.json
• examples/react/load-more-infinite-scroll/package.json
• examples/react/nextjs-app-prefetching/package.json
• examples/react/nextjs/package.json
• examples/react/optimistic-updates-cache/package.json
• examples/react/optimistic-updates-ui/package.json
• examples/react/pagination/package.json
• examples/react/prefetching/package.json
• integrations/react-next-15/package.json
• integrations/react-next-16/package.json
• packages/vue-query/src/queryClient.ts