zoom_in Click to enlarge

React Query (TanStack Query)

star

9.06

Excellent

▲ ▼

star Add Saving

language

description React Query (TanStack Query) Overview

TanStack Query, formerly known as React Query, manages server data in React applications through hooks and a shared query cache. Within a Hydrogen storefront, it can support client-side requests that continue after the initial page loads. Cached results remain available while stale data refreshes in the background, and configurable refetching helps keep changing information current. This makes it useful for interactive components that need more frequent updates than page navigation alone provides.

It complements Remix loaders rather than directly replacing their role in server rendering and routing. Server-fetched data can populate the client cache through hydration, connecting the initial response with later updates. Developers still need to choose query keys and freshness settings carefully to avoid duplicate requests. Its defining contribution is coordinated server-state management, rather than a Shopify-specific API client or a guaranteed performance improvement.

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