• Query Shopify APIs
  • Caching loaded data
  • Next steps

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.

Tip

This example demonstrates a simple version of this pattern. However, it can be extended to cover more complex behaviors, including more robust error handling, GraphQL query fragments and directives, deferred loading for non-critical data, server-side caching for non-personalized data, and more.

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.

Note

To avoid storing Personally Identifiable Information (PII) or other sensitive data, the Customer Account API client doesn't cache any requests. Caching this information could lead to unauthorized access or data breaches, compromising user privacy and security.

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:

Next steps

Anchor link to section titled "Next steps"
  • 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

On this page

  • Query Shopify APIs
  • Caching loaded data
  • Next steps