[email protected]

Patch Changes

• Updates links to https://shopify.dev/custom-storefronts/hydrogen in favor of a new information architecture. We've split out conceptual material from procedural material and organized the content by area of work. (#2326) by @rennyG

@shopify/[email protected]

Patch Changes

• Updates links to https://shopify.dev/custom-storefronts/hydrogen in favor of a new information architecture. We've split out conceptual material from procedural material and organized the content by area of work. (#2326) by @rennyG

@shopify/[email protected]

Patch Changes

• Add a helper method to get headers to proxy the online store. These headers are necessary to prevent the online store from throttling proxied requests: (#2300) by @blittle

  import {getOnlineStorefrontHeaders} from '@shopify/hydrogen';
  
  async function handleEvent(event) {
    const response = fetch(`https://hydrogen.shop/products/hydrogen`, {
      headers: getOnlineStorefrontHeaders(event.request),
    });
  
    return response;
  }

• Remove automatic origin support from fetchSync on the server. (#2276) by @jplhomer

  Important: Please test that your Hydrogen app is using fetchSync correctly before shipping this version of Hydrogen to production.

  Developers should never be making fetch requests on the server against their own Hydrogen app. This is because some production runtimes prohibit invoking fetch requests to servers in the same region. Other runtimes will fail to resolve DNS when invoked from within the same process.

  This change makes it required to pass a fully-qualified URL (including origin) to fetchSync when it's being used on the server:

  // MyComponent.server.jsx
  
  // ❌ You should not use this pattern, and it will now fail:
  fetchSync('/api/path').json();

  Instead, you should query the data directly, or extract the data query to a function and call it inside your server component:

  // MyComponent.server.jsx
  import {sharedQuery} from './shared-location.server';
  
  // ✅ Do this instead:
  useQuery('shared-query', sharedQuery);

  This is not considered a breaking change because the intention of the server-side fetchSync API was never to enable calling a Hydrogen app from itself, but rather to call third-party APIs from the server.

• Fix issue with preload cache which would cause problems when scaled to large amounts of traffic in production. (#2316) by @jplhomer

• Add more UAs to the bot detection list to improve parity with SEO tools (#2297) by @davecyen

• Fix RSC responses in some situations where the pathname contains double quotes. (#2320) by @frandiox

• Fix unhandled errors when parsing invalid RSC states from URL. (#2315) by @frandiox

[email protected]

[email protected]

@shopify/[email protected]

Hydrogen UI React

We’re excited to announce an experimental version of Hydrogen UI React is now available! We’ve decoupled key components, hooks, and utilities from the Hydrogen framework and moved them into a new package called @shopify/hydrogen-react.

You can now bring Hydrogen functionality to your React framework of choice!

The components, hooks, and utilities will continue to be supported in @shopify/hydrogen until Hydrogen UI React is made generally available, but all new features will only go into @shopify/hydrogen-react going forward.

Check out the documentation and the repository to learn more!

Patch Changes

• Fix RSC response caching (#2260) by @wizardlyhel

• Fix the types for <Seo type="defaultSeo" /> (#2268) by @jplhomer

• Allow basePath to be passed to Route to support path-based internationalization inside custom route (#2252) by @jplhomer

[email protected]

[email protected]

@shopify/[email protected]

Minor Changes

• Add Shopify analytics instrumentation for customer events. (#2238) by @wizardlyhel

  See the updated doc on <ShopifyAnalytics />.

• Updates CartProvider to use the new CartProviderV2. No code changes are necessary. Docs for CartProvider can be found here. (#2182) by @lordofthecactus

  Also adds the following onComplete props callbacks:

  Name	Type	Description
  onCreateComplete?	() => void	Invoked when the process to create a cart completes successfully
  onLineAddComplete?	() => void	Invoked when the process to add a line item to the cart completes successfully
  onLineRemoveComplete?	() => void	Invoked when the process to remove a line item to the cart completes successfully
  onLineUpdateComplete?	() => void	Invoked when the process to update a line item in the cart completes successfully
  onNoteUpdateComplete?	() => void	Invoked when the process to add or update a note in the cart completes successfully
  onBuyerIdentityUpdateComplete?	() => void	Invoked when the process to update the buyer identity completes successfully
  onAttributesUpdateComplete?	() => void	Invoked when the process to update the cart attributes completes successfully
  onDiscountCodesUpdateComplete?	() => void	Invoked when the process to update the cart discount codes completes successfully

• Added missing dependancy for faker to hydrogen package (#2234) by @Drew-Garratt

Patch Changes

• Add more error catches on shopify analytics (#2256) by @wizardlyhel

• Requests to SF API will now provide a Custom-Storefront-Group-ID header. (#2215) by @uri

[email protected]

[email protected]

@shopify/[email protected]

Minor Changes

• Special thank you to @kcarra for adding new mocked Providers for making testing easier! (#2224) by @blittle

  1. Add ServerRequestProvider mock for testing server components:

  import useServerHook from './useServerHook.server'; // Server hook to test
  import {test, vi} from 'vitest';
  import {renderHook} from '@testing-library/react-hooks';
  import {ShopifyProvider} from '@shopify/hydrogen';
  import {MockedServerRequestProvider} from '@shopify/hydrogen/testing';
  
  describe('useServerHook', () => {
    test('mocked ServerRequest Context', () => {
      const wrapper = ({children}: {children: React.ReactElement}) => (
        <MockedServerRequestProvider>
          <ShopifyProvider shopifyConfig={mockShopifyConfig}>
            {children}
          </ShopifyProvider>
        </MockedServerRequestProvider>
      );
      const {result} = renderHook(() => useServerHook(), {wrapper});
      expect(result.current).toEqual({status: 'active'});
    });
  });

  2. Add ShopifyTestProviders mock for easier testing client components and using client components in other contexts, like Storybook:

  import {ComponentMeta, ComponentStory} from '@storybook/react';
  import React from 'react';
  import BoxCardUI from './BoxCard.ui';
  import {ShopifyTestProviders} from '@shopify/hydrogen/testing';
  
  export default {
    title: 'Components/BoxCard',
    component: BoxCardUI,
    decorators: [],
  } as ComponentMeta<typeof BoxCardUI>;
  
  const Template: ComponentStory<typeof BoxCardUI> = (args) => {
    return (
      <ShopifyTestProviders>
        <BoxCardUI {...args} /> // This component imports import{' '}
        {(Image, Link, Money)} from '@shopify/hydrogen'
      </ShopifyTestProviders>
    );
  };
  
  export const BoxCard = Template.bind({});
  BoxCard.args = mockShopifyProduct;

• Updated the Storefront API version of Hydrogen to the 2022-10 release. (#2208) by @frehner

  This is a backwards-compatible change; if you are still on the 2022-07 version, you may stay on that version without any issues. However, it is still recommended that you upgrade to 2022-10 as soon as possible.

  For more information about the Storefront API, refer to:

  • The versioning documentation
  • The 2022-10 release notes. Take note that Hydrogen never used the Money fields internally, so the breaking change listed there does not affect Hydrogen.

Patch Changes

• Experimental version of a new cart provider is ready for beta testing. (#2219) by @lordofthecactus

  CartProviderV2 fixes race conditions with our current cart provider. After beta, CartProviderV2 will become CartProvider requiring no code changes.

  To try this new cart provider:

  import {CartProviderV2} from '@shopify/hydrogen/experimental';
  

[email protected]

[email protected]