Preloaded queries

Preloaded queries allow your Hydrogen app to discover and preload nested queries within a page.

In the following diagram, none of the queries (shopInfo, CollectionDetails, layoutContent, or Localization) have been preloaded:

However, if you set the layoutContent and Localization queries to preload, then the Hydrogen app discovers these queries and loads them faster:

Preloaded queries work by storing the query fetcher for the next time the same URL is requested. For example, on the / URL, Shopify fetches queries for the following:

• shopInfo
• layoutContent
• localization
• homeShopInfo
• welcomeContent
• indexContent

If you don't set any of these queries with preload: true, then no queries will be preloaded:

If you set a some queries to preload, then on the first time / is requested, no queries will be preloaded. However, all requests to / afterwards will preload homeShopInfo, welcomeContent and indexContent queries:

• shopInfo
• layoutContent
• localization
• homeShopInfo - preload: true
• welcomeContent - preload: true
• indexContent - preload: true

Preloaded queries work similarly for wildcard routes like Product and Collection, except that each URL has its own preload queries.

You've set CollectionDetails to preload queries:

• shopInfo
• layoutContent
• localization
• CollectionDetails - preload: true

The first time a user visits /collections/freestyle-collection, no queries will be preloaded. Similarly, the first time a user visits /collections/backcountry-collection, no queries will be preloaded. However, the second time that a user visits /collections/freestyle-collection, CollectionDetails will be preloaded.

You can add an option to preload a query anywhere in your Hydrogen app.

The preload property takes a Boolean value or a string:

• preload: true: Preloads a query for a specific URL.
• preload: '*': Preloads a query for every request. This option can be helpful for menu links in your navigation, allowing you to preload a query on button click or while you animate a transition to another page.

To test a preloaded query, enable the showQueryTiming property in App.server.js. The showQueryTiming property logs the timeline of when queries are being requested, resolved, and rendered.

If a query is preloaded, but isn't being used, then a warning displays in the server log:

If a query is being double loaded, then a warning displays in the server log. This error typically happens when the preloaded query isn't the same query as the one requested:

• localizationProvider
• fetchSync
• useShopQuery
• useQuery

• Learn about the analytics support built into Hydrogen apps.