Comparing
Hooks for managing, caching and syncing asynchronous and remote data in React
End-to-end type-safe APIs — share TypeScript types between server and client without code generation.
| Metric | react-query | @trpc/server |
|---|---|---|
| Ecosystem | npm | npm |
| Difficulty | Beginner ✓ | Advanced |
| Weekly downloads | 1.6M↑ | 1.2M |
| Latest version | v3.39.3 | v11.0.0 |
| Recipes | 1 | 2↑ |
react-query only
Shared
@trpc/server only
Use React Query for any React app that fetches server data: REST APIs, GraphQL, or any async function. It replaces 95% of the useEffect+useState patterns for data fetching and adds caching, background refetching, and optimistic updates for free.
Full-stack TypeScript monorepos, Next.js apps where frontend and backend share a codebase, projects where you want type safety without REST/GraphQL ceremony.
React Query is for server state (data that lives on a server). For UI state (modals, form values, local toggles), use useState or Zustand. If you're already using a full data layer like Apollo Client for GraphQL, React Query is redundant.
Public APIs consumed by third parties (use REST or GraphQL). Polyglot teams where some consumers aren't TypeScript. Microservices with many separate repos.
react-query
@trpc/server