Preloaded queries
This guide provides information on how preloaded queries work and how to configure them in your Hydrogen app.
How preloaded queries work
Anchor link to section titled "How preloaded queries work"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:
No preloaded queries
Anchor link to section titled "No preloaded queries"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:
Some preloaded queries
Anchor link to section titled "Some preloaded queries"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
Wildcard routes
Anchor link to section titled "Wildcard routes"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.
Preload a query
Anchor link to section titled "Preload a query"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.
Test a preloaded query
Anchor link to section titled "Test a preloaded query"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:
Related components and hooks
Anchor link to section titled "Related components and hooks"- Learn about the analytics support built into Hydrogen apps.