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
Anchor link to section titled "How it works"Hydrogen supports data coming from Shopify and third-parties:
Shopify data source
Anchor link to section titled "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
Anchor link to section titled "Third-party data source"Hydrogen can also support data from third-party sources. If you want to use Hydrogen components with a third-party data source, then data from the third-party source 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.
Using Hydrogen components with a third-party data source
Anchor link to section titled "Using Hydrogen components with a third-party data source"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:
Fetching supplementary data
Anchor link to section titled "Fetching supplementary data"If you want to fetch data that goes alongside your Shopify product data and shopping experience, like CMS content from another provider, then you can render your own component by implementing the fetchSync or useQuery hooks.
For example, inside the useQuery hook, you can use the fetch() method on server components, or an HTTP client like Axios, which can be used on both the client and the server.
- Get familiar with the Shopify-specific commerce components, hooks, and utilities included in Hydrogen.
- Learn about Hydrogen's architecture and framework.