zoom_in Click to enlarge

React Query (TanStack Query)

▲ ▼

language

description React Query (TanStack Query) Overview

While not strictly a Remix loader replacement, React Query is invaluable for client-side data fetching within Hydrogen components. It excels at managing server state, providing automatic background refetching, stale-while-revalidate patterns, and robust caching. Integrating it with Remix's server data ensures a perfect blend of server-side initial load and dynamic client-side updates, significantly improving perceived performance.

help React Query (TanStack Query) FAQ

Is React Query the same library as TanStack Query?

Yes, React Query was rebranded to TanStack Query starting with version 4 to reflect that it was expanded to support frameworks beyond React, including Vue, Solid, and Svelte. The React-specific package is now published as @tanstack/react-query, and the core is framework-agnostic.

Does React Query replace Remix loaders in a Shopify Hydrogen storefront?

No, React Query does not replace Remix loaders for server-side data fetching in Hydrogen — Remix loaders still handle the initial server-side render and route-level data. React Query complements loaders by managing client-side data fetching, background refetching, and optimistic updates for interactive components within the Hydrogen app.

What version of TanStack Query should I use with React 18?

TanStack Query v5 is the current major version and is fully compatible with React 18 and React 19. If you are on an older @tanstack/react-query v4 installation, the v5 upgrade introduced breaking API changes including the removal of the v4 syntax for isLoading and error states in favor of a unified status approach.

How does React Query handle caching and stale-while-revalidate in a Hydrogen app?

React Query caches query results with configurable staleTime and gcTime (formerly cacheTime) settings, returning cached data immediately while refetching in the background when data is marked stale. In a Hydrogen context, this means product or collection data fetched client-side stays fresh per your staleTime configuration, reducing redundant Shopify Storefront API calls during navigation.

swap_horiz

Looking for React Query (TanStack Query) alternatives? Compare top competitors ranked & scored

arrow_forward