TanStack Query
Patterns from three production Next.js builds that use TanStack Query v5, from server rendering to CMS dashboards to a storefront.
I've used TanStack Query v5 on three Next.js projects at Plex Bit Infosystems. Each one pushed it in a different direction, so these notes are grouped by problem, not by project. Every page says which project it comes from.
| Project | My part | What it taught me |
|---|---|---|
| Resort website (Jun–Aug 2026) | The public website for a resort and the admin dashboard that manages it | Server prefetching and hydration for a public site, per-section loading and error states, and retry rules |
| Company website and CMS (Aug–Sep 2026) | The new company website with a teammate, and all of the CMS dashboard behind it | Mutations and data tables at scale across dozens of CMS sections, fetchQuery on the server, and one bulk query for the home page |
| Multi-vendor e-commerce platform (Apr–Jun 2026) | Account and order pages, product search, blog, brand and sale pages, as one of several developers | What the user sees while they wait: search, pagination, infinite lists and optimistic updates |
The idea that ties them together
Every pattern here is a decision about where data lives and what the user sees while it loads. TanStack Query already has an option for each case; the work is picking the right one per screen and keeping each piece of data in one place.
Setting it up
Query client
One client per request on the server, one per tab in the browser, and retry rules that don't retry a 404.
Query keys and options
A key factory with shared prefixes, and query options defined once.
Server-rendered sites
Server prefetching
Prefetch on the server, hydrate on the client, and make sure both build the same key.
Loading and error boundaries
One failed section shows a retry button instead of breaking the page.
Dashboards and forms
Data tables
One section component for every list table, server-side pagination, and filters kept in the URL.
Mutations
One hook shape for every CMS save, and when to write the response into the cache instead of refetching.
Storefront UX
Search and pagination
Debounced search with cached results, and page changes that don't flash.
Infinite lists
useInfiniteQuery, its own key, a reusable scroll trigger, and page sizes
that fill the grid.
Optimistic updates
The four-step recipe, and when not to use it.
The e-commerce patterns also have longer write-ups on my blog: Making an e-commerce site feel fast with TanStack Query and Three things React Query taught me on a team e-commerce build.
Last updated on