Fetch Shopify API data in Hydrogen
Hydrogen uses Remix loader functions to handle all queries to the Storefront API, Customer Account API, and third-party data sources.
Loading data efficiently is important to keeping your Hydrogen app fast and performant. Follow these examples and best practices to ensure your Hydrogen storefront is delivering the fastest experience for customers.
Query Shopify APIs
Anchor link to section titled "Query Shopify APIs"Hydrogen provides built-in API clients for the Storefront API and the Customer Account API.
Query the Storefront API
Anchor link to section titled "Query the Storefront API"The following is an example of how the /products/:handle route can query the Storefront API and then render that product data in a component.
Query the Customer Account API
Anchor link to section titled "Query the Customer Account API"The following is an example of how the /account/order/:id route can query the Customer Account API to display information about a single order. This example assumes that a customer is logged in.
Caching loaded data
Anchor link to section titled "Caching loaded data"Hydrogen caches Storefront API data by default. It also includes a set of utilities to customize caching rules for individual API queries. Consult the Hydrogen caching docs for more details about configuring server-side cache rules, including creating your own custom caching rules.
The following simplified example shows how to cache data for longer when querying for the product title, which is an API resource that typically doesn't change frequently:
- Learn more about caching Shopify API data with Hydrogen
- Paginate your Hydrogen data queries to work with large product collections
- Explore the Storefront API with Hydrogen’s built-in GraphiQL client