[pbk95120]

What I did

Fixed both TanStack React Query setup snippets to import QueryClient as a runtime value. The snippets instantiate new QueryClient(...), but the type-only import caused TS1361 and a runtime failure.

AI assistance: Codex assisted with investigation and validation.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

No permanent test suite changes were needed. Both CSF 3 and CSF Next snippets pass TypeScript and runtime validation. Docs check, oxfmt, and git diff --check pass. The full repository test suite was not run because this is a two-line documentation fix.

Manual testing

1. Copy each snippet from docs/_snippets/tanstack-react-query-setup.md into a TypeScript Storybook project.
2. Run the project's typecheck and start Storybook.
3. Confirm there is no TS1361 or undefined QueryClient error.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Declare whether manual QA will be needed for this PR during the next release, through qa:needed or qa:skip

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary Release - 🚫 Not run

This PR does not have a canary release associated.

In-repo PRs: add the ci:canary label. Later pushes republish while the label remains.

Fork PRs: the label does nothing (a later push must not auto-publish). A maintainer publishes from this repository with Run workflow and the pr input. branch and sha are optional; if more than one is set, they must be the same commit. The fork author does not need to do anything.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 95e82c01-58bc-4373-8854-a478bb27546a

📥 Commits

Reviewing files that changed from the base of the PR and between 1e8b436 and f835fb9.

📒 Files selected for processing (1)

• docs/_snippets/tanstack-react-query-setup.md

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

Walkthrough

Changes

React Query documentation

Layer / File(s)	Summary
Runtime QueryClient imports docs/_snippets/tanstack-react-query-setup.md	The CSF 3 and CSF Next snippets change QueryClient from a type-only import to a runtime import. QueryClientProvider remains a value import.人人操

Merge Risk: ⚪ Minimal · up to f835f

The React Query setup snippets now correctly provide QueryClient at runtime, preventing the documented TypeScript and runtime failures. The change is ready to merge.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

---

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

[storybook-contribution-review]

🤖 I am the Storybook contribution review bot; a human maintainer approved this message before it was posted.
Review phase: Final verdict - runtime verification complete (architecture and code quality stages skipped for a trivial diff)

We are trying out something new: a three-stage automated review - architecture, then code quality, then runtime verification - that runs on a PR before a human maintainer looks at it closely. A maintainer still reads this and still makes the call; the aim is that by the time they do, the reachability and evidence work is already done. Tell us how it lands for you, that feedback is genuinely useful to us right now.

Hi @pbk95120,

Thank you for correcting both TanStack React setup snippets. Runtime verification reproduced the defect on the base SHA: TypeScript reported TS1361, removed QueryClient from the emitted imports, and both generated modules then failed with ReferenceError: QueryClient is not defined.

At head f835fb9cb0b129d7c93c1210ba7c1330a15e89c0, both snippets compile, keep QueryClient and QueryClientProvider as value imports, and evaluate successfully. The focused verifier passed 3 tests, formatting passed, and yarn docs:check completed with no errors. This evidence covers the pre-render failure; no screenshot is applicable.

Final automated verdict: verified. Architecture and code-quality stages were skipped because this is a small documentation-only diff. A human maintainer still makes the merge decision.

[kylegach]

Thanks for the catch, @pbk95120! And congratulations on your first contribution! 🎉