Chapter 2: Installation
Core Idea
Install @tanstack/react-query via any standard package manager (or an ESM CDN for script-tag usage); pair it with the ESLint plugin from day one to catch cache-key and hook-usage mistakes early.
Key Concepts
- Package:
@tanstack/react-query, installable via npm/pnpm/yarn/bun/deno.
- Compatibility: requires React 18+, works with ReactDOM and React Native.
- CDN path: usable without a bundler via an ESM-compatible CDN (e.g. esm.sh) and a
<script type="module"> tag — useful for quick prototypes or non-bundled pages.
- Browser support: targets modern evergreen browsers (recent Chrome/Firefox/Edge/Safari/iOS/Opera); older targets need transpilation from
node_modules yourself.
- Companion tool:
@tanstack/eslint-plugin-query is recommended alongside the library, not optional tooling — see the ESLint Plugin Query chapter.
Code Examples
npm i @tanstack/react-query
npm i -D @tanstack/eslint-plugin-query
- What it demonstrates: the two packages installed together — the runtime library and its companion lint plugin.
Reference Tables
| Install method | When to use |
|---|
| npm/pnpm/yarn/bun/deno | Standard bundler-based app (default choice) |
ESM CDN (<script type="module">) | No bundler / quick prototype / static HTML page |
Key Takeaways
- Install the ESLint plugin alongside the core package, not as an afterthought — it catches stale-closure and query-key bugs that are easy to miss in review.
- React Query targets modern browsers by default; plan for polyfills/transpilation explicitly if you must support older ones.
- The CDN install path exists for no-bundler use cases but is the exception, not the common path.
Connects To
- ESLint Plugin Query: the companion tool recommended here.
- Quick Start: the next step after installing.