Skip to content

Releases: Shopify/hydrogen-v1

v0.11.0-experimental.1

15 Feb 18:15
@cartogram cartogram
v0.11.0-experimental.1
8ea40b5
Compare
Choose a tag to compare
v0.11.0-experimental.1 Pre-release
Pre-release

This is an important release that brings us closer to release candidate. Please read the migration guide carefully, as there are a number of breaking changes. You can also use this pull request to view the changes between a brand new app in version 0.10.1 and version 0.11.0.

Breaking changes

shopify.config.js

Hydrogen now implements the 2022-01 version of the Storefront API. Update your shopify.config.js file to use the 2022-01 storefrontApiVersion instead of unstable.

<ShopifyProvider>

Our 0.10 release removed <ShopifyProvider>. This was necessary because React Server Components do not currently support Context. That change also meant that you could only have a single Shopify configuration for your app. The config was global. After making this change, we received feedback, internally and externally, that there is value in being able to dynamically define the configuration per request. This is useful to aggregate multiple storefronts with a single Hydrogen app.

Because of these requests, we are bringing <ShopifyProvider> back. The challenge is that context is still not supported in React Server Components. Because of this, the new <ShopifyProvider> is special with a few shortcomings:

  1. You cannot have multiple instances of <ShopifyProvider> within your app. Because it is not using real context, all <ShopifyProvider> instances share the same configuration per request.
  2. You are still able to dynamically define the shopifyConfig prop, and it will remain isolated per request to the server, being thread safe.

Again, you cannot yet use context within your server components. We are working with Meta and hope to have a long term server context solution soon.

Migrate from Hydrogen version 0.10.0

  1. Remove shopifyConfig from both entry-client.jsx and entry-server.jsx.
  2. Add ShopifyProvider and shopifyConfig to App.server.jsx:
  import {DefaultRoutes} from '@shopify/hydrogen';
  import {Suspense} from 'react';

+ import shopifyConfig from '../shopify.config';
  import DefaultSeo from './components/DefaultSeo.server';
  import NotFound from './components/NotFound.server';
  import AppClient from './App.client';
  import LoadingFallback from './components/LoadingFallback';
  import {ShopifyProvider} from '@shopify/hydrogen';

  export default function App({log, pages, ...serverState}) {
    return (
      <Suspense fallback={<LoadingFallback />}>
+      <ShopifyProvider shopifyConfig={shopifyConfig}>
          <AppClient helmetContext={serverState.helmetContext}>
            <DefaultSeo />
            <DefaultRoutes
              pages={pages}
              serverState={serverState}
              log={log}
              fallback={<NotFound />}
            />
          </AppClient>
+      </ShopifyProvider>
      </Suspense>
    );
  }

React Router is completely gone

In version 0.10, we removed React Router on the server. With this release, we have removed React Router on the client as well. In most scenarios this shouldn't be a breaking change, unless you directly use React Router hooks or components within your client components. Simply remove react-router-dom from your package.json dependencies. Hydrogen exposes the following utilities for routing:

  1. <Link> component
  2. useNavigate hook
  3. useUrl hook

In a later release, we'll continue to enhance the routing capabilities in Hydrogen. Read more in the Custom Routes RFC.

Renamed Model3D to ModelViewer

The <Model3D /> component has now been renamed to <ModelViewer />.

Standalone Cart hooks removed

The following Cart hooks were removed because the same functionality can be obtained through the useCart hook:

  • useCartAttributesUpdateCallback
  • useCartBuyerIdentityUpdateCallback
  • useCartCheckoutUrl
  • useCartCreateCallback
  • useCartDiscountCodesUpdateCallback
  • useCartLinesAddCallback
  • useCartLinesRemoveCallback
  • useCartLinesTotalQuantity
  • useCartLinesUpdateCallback
  • useCartNoteUpdateCallback

Example

- import {useCartCheckoutUrl} from '@shopify/hydrogen'
+ import {useCart} from '@shopify/hydrogen'

- const checkoutUrl = useCartCheckoutUrl()
+ const {checkoutUrl} = useCart()

Render props removed

The following components no longer allow the function-as-a-child (also known as "render props") pattern; see #589.

Example

-import {Money} from '@shopify/hydrogen/client';
+import {useMoney} from '@shopify/hydrogen/client';

export default function MoneyCompareAtPrice({money}) {
+ const {amount, currencyNarrowSymbol} = useMoney(money);
  return (
-   <Money money={money}>
-     {({amount, currencyNarrowSymbol}) => (
       <span className="line-through text-lg mr-2.5 text-gray-500">
         {currencyNarrowSymbol}
         {amount}
       </span>
-     )}
-   </Money>
  );
}

Product and Cart component aliases removed

The following aliases have been removed. Use each component's original name:

Example

- import {Product} from '@shopify/hydrogen'
+ import {ProductProvider, ProductImage} from '@shopify/hydrogen'

- <Product>
-   <Product.Image/>
- </Product>
...
Read more

Contributors

slester, tjoyal, and 12 other contributors
Assets 2

v0.10.1

26 Jan 17:24
@blittle blittle
v0.10.1
5a46e93
This commit was signed with the committer’s verified signature.
blittle Bret Little
GPG key ID: E31408C812AE535C
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.10.1

This is a follow-up to our v0.10.0 release with a few high priority bug fixes. A few new features made it in as well!

What's Changed

Full Changelog: Shopify/hydrogen@v0.10.0...v0.10.1

Contributors

cartogram, jplhomer, and 3 other contributors
Assets 2

v0.10.0

25 Jan 19:16
@blittle blittle
v0.10.0
8491fb5
This commit was signed with the committer’s verified signature.
blittle Bret Little
GPG key ID: E31408C812AE535C
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.10.0

Hydrogen v0.10 includes a new server components strategy, a new local preview command, and several important breaking changes. Please read the changes carefully to learn how to upgrade. Thank you for helping us improve Hydrogen during the developer preview!

What's Changed

✨ New Hydrogen apps will includes a yarn preview command! This runs a local version of a sandboxed v8 runtime that mimics production runtimes like Oxygen and Cloudflare Workers. To test it in a new project, run yarn build && yarn preview. For existing apps, run yarn build && npx @shopify/hydrogen-cli preview. This requires Node >= v16.

Breaking Changes:

  1. Hydrogen now uses Meta's experimental version of React Server Components. Make sure to upgrade react and react-dom to the latest experimental version: yarn add @shopify/hydrogen react@0.0.0-experimental-529dc3ce8-20220124 react-dom@0.0.0-experimental-529dc3ce8-20220124
  2. We've removed react-router on the server. Instead of relying on useParams() to get URL parameters, params are passed directly to page server components:
export default function Product() {
    const { handle } = useParams();
    ...
}

// changes to

export default function Product({ params }) {
    const { handle } = params;
    ...
}
  1. Shopify configuration should no longer be imported and passed inside App.server.jsx, but instead in entry-client.jsx and entry-server.jsx:
// /App.server.jsx
import {DefaultRoutes} from '@shopify/hydrogen';
import {Suspense} from 'react';

import DefaultSeo from './components/DefaultSeo.server';
import NotFound from './components/NotFound.server';
import AppClient from './App.client';
import LoadingFallback from './components/LoadingFallback';

export default function App({log, pages, ...serverState}) {
  return (
    <Suspense fallback={<LoadingFallback />}>
      <AppClient helmetContext={serverState.helmetContext}>
        <DefaultSeo />
        <DefaultRoutes
          pages={pages}
          serverState={serverState}
          log={log}
          fallback={<NotFound />}
        />
      </AppClient>
    </Suspense>
  );
}
// /entry-server.jsx
import renderHydrogen from '@shopify/hydrogen/entry-server';
import shopifyConfig from '../shopify.config';

import App from './App.server';

const pages = import.meta.globEager('./pages/**/*.server.[jt](s|sx)');

export default renderHydrogen(App, {shopifyConfig, pages});
// /entry-client.jsx
import renderHydrogen from '@shopify/hydrogen/entry-client';
import shopifyConfig from '../shopify.config';

function ClientApp({children}) {
  return children;
}

export default renderHydrogen(ClientApp, {shopifyConfig});
  1. There's a new App.client.jsx component:
// /App.client.jsx
import {HelmetProvider} from '@shopify/hydrogen/client';
import CartProvider from './components/CartProvider.client';

/**
 *  Setup client context, though the children are most likely server components
 */
export default function ClientApp({helmetContext, children}) {
  return (
    <HelmetProvider context={helmetContext}>
      <CartProvider>{children}</CartProvider>
    </HelmetProvider>
  );
}
  1. locale is now defaultLocale in shopify.config.js
  2. graqhqlApiVersion is now storefrontApiVersion in shopify.config.js
  3. If you’re using the starter template layout component, remove the useCartUI hook:
// /src/components/Layout.server.jsx
import {
  Image,
  useShopQuery,
  flattenConnection,
  LocalizationProvider,
} from '@shopify/hydrogen';
import gql from 'graphql-tag';

import Header from './Header.client';
import Footer from './Footer.server';
import Cart from './Cart.client';
import {Suspense} from 'react';

/**
 * A server component that defines a structure and organization of a page that can be used in different parts of the Hydrogen app
 */
export default function Layout({children, hero}) {
  const {data} = useShopQuery({
    query: QUERY,
    variables: {
      numCollections: 3,
    },
    cache: {
      maxAge: 60,
      staleWhileRevalidate: 60 * 10,
    },
  });
  const collections = data ? flattenConnection(data.collections) : null;
  const products = data ? flattenConnection(data.products) : null;
  const storeName = data ? data.shop.name : '';

  return (
    <LocalizationProvider>
      <div className="absolute top-0 left-0">
        <a
          href="#mainContent"
          className="p-4 focus:block sr-only focus:not-sr-only"
        >
          Skip to content
        </a>
      </div>
      <div className="min-h-screen max-w-screen text-gray-700 font-sans">
        {/* TODO: Find out why Suspense needs to be here to prevent hydration errors. */}
        <Suspense fallback={null}>
          <Header collections={collections} storeName={storeName} />
          <Cart />
        </Suspense>
        <main role="main" id="mainContent" className="relative bg-gray-50">
          {hero}
          <div className="mx-auto max-w-7xl p-4 md:py-5 md:px-8">
            {children}
          </div>
        </main>
        <Footer collection={collections[0]} product={products[0]} />
      </div>
    </LocalizationProvider>
  );
}

const QUERY = gql`
  query indexContent($numCollections: Int!) {
    shop {
      name
    }
    collections(first: $numCollections) {
      edges {
        node {
          description
          handle
          id
          title
          image {
            ...ImageFragment
          }
        }
      }
    }
    products(first: 1) {
      edges {
        node {
          handle
        }
      }
    }
  }
  ${Image.Fragment}
`;

All changes:

New Contributors

Full Changelog: Shopify/hydrogen@v0.9.1...v0.10.0

Contributors

cartogram, rafaelstz, and 6 other contributors
Assets 2

v0.9.1

20 Jan 19:19
@blittle blittle
v0.9.1
b500ea2
This commit was signed with the committer’s verified signature.
blittle Bret Little
GPG key ID: E31408C812AE535C
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.9.1

What's Changed

Once stackblitz offers Node 16 in their hosted container, we will again move to support node 16.5.0 or higher.

Full Changelog: Shopify/hydrogen@v0.9.0...v0.9.1

Contributors

blittle
Assets 2

v0.9.0

20 Jan 15:53
@blittle blittle
v0.9.0
f51d131
This commit was signed with the committer’s verified signature.
blittle Bret Little
GPG key ID: E31408C812AE535C
Learn about vigilant mode.
Compare
Choose a tag to compare
v0.9.0

Breaking Changes

Hydrogen now requires Node 16.5.0 or later. This is because Hydrogen relies on ReadableStreams.

What's Changed

New Contributors

Full Changelog: Shopify/hydrogen@v0.8.3...v0.9.0

Contributors

cartogram, Francismori7, and 5 other contributors
Assets 2

v0.8.3

13 Jan 22:37
@jplhomer jplhomer
v0.8.3
9c591cf
Compare
Choose a tag to compare
v0.8.3

What's Changed

New Contributors

Full Changelog: Shopify/hydrogen@v0.8.2...v0.8.3

Contributors

cartogram, blittle, and 4 other contributors
Assets 2

v0.8.2

07 Jan 15:34
@jplhomer jplhomer
v0.8.2
587f117
Compare
Choose a tag to compare
v0.8.2

This version of Hydrogen fixes an issue with how Object IDs are decoded in the unstable version of the Storefront API.

The Storefront API recently began using unencoded Object IDs in the unstable version.

Existing Hydrogen apps should update to this version of Hydrogen to ensure their components continue to work against unstable branch of Hydrogen.

yarn add @shopify/hydrogen

What's Changed

New Contributors

Full Changelog: Shopify/hydrogen@v0.8.1...v0.8.2

Contributors

cartogram, jplhomer, and 3 other contributors
Assets 2

v0.8.1

04 Jan 21:54
@jplhomer jplhomer
v0.8.1
e16175b
Compare
Choose a tag to compare
v0.8.1

Upgrade Guide

Hydrogen v0.8.1 switches to the React experimental build 2021-11-25. You will need to update your version of react and react-dom in order to use Hydrogen v0.8.1:

yarn add @shopify/hydrogen react@0.0.0-experimental-0cc724c77-20211125 react-dom@0.0.0-experimental-0cc724c77-20211125

The Hydrogen starter template also switched to Tailwind v3. You can update your own apps by following the Tailwind upgrade guide.

Features

  • Logging: A new logging tool is available! View PR. Documentation coming soon.

What's Changed

New Contributors

Full Changelog: Shopify/hydrogen@v0.8.0...v0.8.1

Contributors

cartogram, gfscott, and 7 other contributors
Assets 2

v0.8.0

07 Dec 22:49
@jplhomer jplhomer
v0.8.0
c07762e
Compare
Choose a tag to compare
v0.8.0

Hydrogen v0.8.0 makes some minor updates and adds compatibility for Vite v2.7.

Upgrade instructions

  • yarn add @shopify/hydrogen (or npm install @shopify/hydrogen) to update to the latest version
  • yarn add -D vite
  • yarn dev --force during your next development server to clear cache

Removal of react-query

Hydrogen no longer uses react-query to power Suspense data fetching on the server. However, there should be no breaking changes as useQuery and useShopQuery are still offered.

If you previously depended upon react-query in the server or the client of your app, you will need to install react-query manually.

What's Changed

New Contributors

Full Changelog: Shopify/hydrogen@v0.7.1...v0.8.0

Contributors

cartogram, jplhomer, and 2 other contributors
Assets 2

v0.7.1

02 Dec 16:42
@cartogram cartogram
v0.7.1
34baaba
Compare
Choose a tag to compare
v0.7.1

What's Changed

New Contributors

Full Changelog: Shopify/hydrogen@v0.7.0...v0.7.1

Contributors

cartogram, rafaelstz, and 4 other contributors
Assets 2