Hydrogen React

Hydrogen React is an unopinionated and performant library of Shopify-specific commerce components, hooks, and utilities. Bring the best parts of Hydrogen to more React frameworks, like Next.js and Gatsby, and accelerate headless development using Shopify’s pre-built React components including Cart, Shop Pay, and Shopify Analytics.

📚 Overview | 🛠️ Docs | 🛍️ Custom Storefronts at Shopify | 🗣 Discord | 📝 Changelog

IMPORTANT: Refer to how this package is versioned.

This document contains the following topics:

• Getting started with Hydrogen React
• Improving the Developer Experience
• Development and production bundles
• Hydrogen React in the browser
• Troubleshooting
• Contributing

Getting started

• Run one of the following commands:

  npm:

  npm i --save @shopify/hydrogen-react

  Yarn:

  yarn add @shopify/hydrogen-react

Browse our overview and docs to learn more.

Improving the Developer Experience

hydrogen-react includes several tools that improve the developer experience, such as:

• Creating a storefront client to easily make API requests to the Storefront API
• Enabling GraphQL validation and autocompletion for the Storefront API
• Using the pre-built TypeScript types for the Storefront API
• Correctly typing the Storefront API's custom scalars when using GraphQL Codegen and TypeScript

Development and production bundles

Hydrogen React has a development bundle and a production bundle. The development bundle has warnings and messages that the production bundle doesn't.

Depending on the bundler or runtime that you're using, the correct bundle might be automatically chosen following the package.json#exports of Hydrogen React. If not, then you might need to configure your bundler / runtime to use the development and production conditions.

Note: The production bundle is used by default if your bundler / runtime doesn't understand the export conditions.

Hydrogen React in the browser

Hydrogen React has a development umd build and a production umd build. Both are meant to be used directly either by <script src=""></script> tags in HTML or by AMD-compatible loaders.

If you're using Hydrogen React as a global through the <script> tag, then the components can be accessed through the hydrogenreact global variable.

Troubleshooting

The following will help you troubleshoot common problems in this version of Hydrogen React.

GraphQL autocompletion

If you can't get GraphQL autocompletion to work, then try restarting the GraphQL server in your IDE.

For example, in VSCode do the following:

1. Open the command palette.
2. Type graphql.
3. Select VSCode GraphQL: Manual Restart.

Contributing

We love contributions! Contributing works best when you first confirm that something needs to be changed or fixed; please open an issue, start a discussion, or talk to us in Discord!

PRs are welcome! Be sure to read the CONTRIBUTING.md for an overview and guidelines to help your PR succeed.