Hydrogen data sources

Hydrogen contains a set of Shopify-specific commerce components, hooks, and utilities that help accelerate your development process. This guide describes how Hydrogen consumes data from different sources.

How it works

Hydrogen supports data coming from Shopify and third-parties:

A diagram that shows how Hydrogen consumes data

Shopify data source

Hydrogen is built and optimized to use data coming from Shopify's Storefront API. The shape of the data passed to components, hooks, and utilities corresponds and conforms to the structure based on the GraphQL types from the Storefront API.

You can pass data from the Storefront API directly into components, hooks, and utilities.

For example, the ProductProvider component expects product data to have the following structure, which corresponds to the Product object type returned from the Storefront API:

Third-party data source

Hydrogen can also support data from third-party sources. However, data from third-party sources must first be transformed into the types expected by the Hydrogen components, hooks, and utilities, and then passed on to the components, hooks, and utilities.

To support third-party data, the third party needs to build an adapter that transforms the data into the types expected by Hydrogen. If you choose to use a third-party data source, then you can query it in your custom storefront code.

For example, a third-party data source might return product data with a different structure:

For the ProductProvider component to use the product data coming from the third-party data source, the data needs to be translated into the format that the ProductProvider component expects.

For example, the following function converts a third-party data source into the type returned by the Storefront API:

Next steps

On this page