[email protected]

Minor Changes

• #858 eae3490 Thanks @michenly! - Upgrade default Storefront API to version '2022-04'. Some components have been updated to use the 2022-04 features and types as well.

  One important change is that the 2022-04 Storefront API no longer encodes object IDs: see more details here. Because of this, Hydrogen will no longer decode IDs, either, which will cause issues if you are using a previous version of the Storefront API with Hydrogen components.

• #858 eae3490 Thanks @michenly! - Adds queryShop helper to API routes. This makes it easy to query the Storefront API, similar to how useShopQuery is available in server components:

  // my-api.server.js
  
  export default function api(request, {queryShop}) {
    return await queryShop({
      query: `query ShopName { shop { name } }`,
    });
  }

  queryShop accepts a single argument object with the following properties:

  Property	Type	Required
  query	string | ASTNode	Yes
  variables	Record<string, any>	No
  locale	string (defaults to defaultLocale)	No

  Important: In order to use queryShop, you should pass shopifyConfig to renderHydrogen inside App.server.jsx:

  -export default renderHydrogen(App, {routes});
  +export default renderHydrogen(App, {shopifyConfig, routes});

• #858 eae3490 Thanks @michenly! - Routing in Hydrogen has been updated according to Custom Routes proposal. Specifically, a new Router component has been added, and DefaultRoutes has been renamed to FileRoutes, along with other minor changes. Custom route components are not implemented yet.

  Follow these steps to upgrade your App.server.jsx file:

  1. Rename the parameter pages to routes when calling renderHydrogen.
  2. Rename the DefaultRoutes component to FileRoutes.
  3. Add the new Router component as a parent of FileRoutes and pass fallback and serverProps props (previously in DefaultRoutes).
  4. Rename src/pages directory to src/routes and update the glob import in App.server.jsx to import.meta.globEager('./routes/**/*.server.[jt](s|sx)').

  Full example of App.server.jsx

  import renderHydrogen from '@shopify/hydrogen/entry-server';
  import {Router, FileRoutes, ShopifyProvider} 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 LoadingFallback from './components/LoadingFallback';
  import CartProvider from './components/CartProvider.client';
  
  function App({routes, ...serverProps}) {
    return (
      <Suspense fallback={<LoadingFallback />}>
        <ShopifyProvider shopifyConfig={shopifyConfig}>
          <CartProvider>
            <DefaultSeo />
            <Router fallback={<NotFound />} serverProps={serverProps}>
              <FileRoutes routes={routes} />
            </Router>
          </CartProvider>
        </ShopifyProvider>
      </Suspense>
    );
  }
  
  const routes = import.meta.globEager('./routes/**/*.server.[jt](s|sx)');
  export default renderHydrogen(App, {shopifyConfig, routes});

Patch Changes

• #858 eae3490 Thanks @michenly! - Export Seo components Fragement and use them in the starter template.

• #852 6015edf Thanks @frandiox! - Update @headlessui/react version to fix Cart dialog not opening.