@shopify/hydrogen

2024.4.2

Patch Changes

Add JSdoc to getSelectedProductOptions utility and cleanup the skeleton implementation (#2089) by @juanpprieto
Adding support for B2B to the customer account client and cart handler to store and manage buyer context. Currently Unstable. (#1886) by @dustinfirman
When extending the content security policy, if the default directive is 'none' then the default won't be merged into the final directive. (#2076) by @nkgentile
Update content-security-policy-builder subdependency to ESM version to avoid preprocessing in Vite. (#2057) by @frandiox
Fix Analytics. Provider for error checking and working without privacy banner. (#2025) by @wizardlyhel
Updated dependencies [081e1498]:
- @shopify/hydrogen-react@2024.4.2

2024.4.1

Patch Changes

Warn when using the deprecated Seo component (#1983) by @blittle
Fix names and URLs shown for HIT/STALE items in the Subrequest Profiler. (#2021) by @frandiox
Updated dependencies [0f5cab00]:
- @shopify/hydrogen-react@2024.4.1

2024.4.0

Minor Changes

Change storefrontRedirect to ignore query parameters when matching redirects. For example, a redirect in the admin from /snowboards to /collections/snowboards will now match on the URL /snowboards?utm_campaign=buffer and redirect the user to /collections/snowboards?utm_campaign=buffer. (#1900) by @blittle

This is a breaking change. If you want to retain the legacy functionality that is query parameter sensitive, pass matchQueryParams to storefrontRedirect():
```
storefrontRedirect({
  request,
  response,
  storefront,
  matchQueryParams: true,
});
```

Patch Changes

Make StorefrontRedirect case insensitive when querying redirect URLs from the Storefront API. (#1941) by @blittle
Fix bug where storefrontRedirect would return an error on soft page navigations. (#1880) by @blittle

Fix a bug where cart could be null, even though a new cart was created by adding a line item. (#1865) by @blittle

This allows calling the cart .get() method right after creating a new cart with one of the mutation methods: create(), addLines(), updateDiscountCodes(), updateBuyerIdentity(), updateNote(), updateAttributes(), setMetafields().

import {
  createCartHandler,
  cartGetIdDefault,
  cartSetIdDefault,
} from '@shopify/hydrogen';

const cartHandler = createCartHandler({
  storefront,
  getCartId: cartGetIdDefault(request.headers),
  setCartId: cartSetIdDefault(),
  cartQueryFragment: CART_QUERY_FRAGMENT,
  cartMutateFragment: CART_MUTATE_FRAGMENT,
});

await cartHandler.addLines([{merchandiseId: '...'}]);
// .get() now returns the cart as expected
const cart = await cartHandler.get();

Add postLogoutRedirectUri option to the Customer Account API client's logout method. (#1871) by @michenly
Introducing <UNSTABLE_Analytics.Provider> that also includes Shopify analytics, Customer Privacy API and Privacy banner (#1789) by @wizardlyhel
Export new Hydrogen Vite plugin from @shopify/hydrogen/vite. (#1935) by @frandiox
Add the customer-account push command to the Hydrogen CLI. This allows you to push the current --dev-origin URL to the Shopify admin to enable secure connection to the Customer Account API for local development. (#1804) by @michenly
Fix default content security policy directive for frameAncestors. (#1883) by @blittle
Fall back to "mock.shop" when no value is passed in storeDomain to createStorefrontClient in development. (#1971) by @frandiox
Allow ui_locale to be passed to the customer account login page. (#1842) by @wizardlyhel

Deprecate the <Seo /> component in favor of directly using Remix meta route exports. Add the getSeoMeta to make migration easier. (#1875) by @blittle

Migration steps:

1. Remove the <Seo /> component from root.jsx:

 export default function App() {
   const nonce = useNonce();
   const data = useLoaderData<typeof loader>();

   return (
     <html lang="en">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <Seo />
         <Meta />
         <Links />
       </head>
       <body>
         <Layout {...data}>
           <Outlet />
         </Layout>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
         <LiveReload nonce={nonce} />
       </body>
     </html>
   );
 }

2. Add a Remix meta export to each route that returns an seo property from a loader or handle:

+import {getSeoMeta} from '@shopify/hydrogen';

 export async function loader({context}) {
   const {shop} = await context.storefront.query(`
     query layout {
       shop {
         name
         description
       }
     }
   `);

   return {
     seo: {
       title: shop.title,
       description: shop.description,
     },
   };
 }

+export const meta = ({data}) => {
+   return getSeoMeta(data.seo);
+};

3. Merge root route meta data

If your root route loader also returns an seo property, make sure to merge that data:

export const meta = ({data, matches}) => {
  return getSeoMeta(
    matches[0].data.seo,
    // the current route seo data overrides the root route data
    data.seo,
  );
};

Or more simply:

export const meta = ({data, matches}) => {
  return getSeoMeta(...matches.map((match) => match.data.seo));
};

4. Override meta

Sometimes getSeoMeta might produce a property in a way you'd like to change. Map over the resulting array to change it. For example, Hydrogen removes query parameters from canonical URLs, add them back:

export const meta = ({data, location}) => {
  return getSeoMeta(data.seo).map((meta) => {
    if (meta.rel === 'canonical') {
      return {
        ...meta,
        href: meta.href + location.search,
      };
    }

    return meta;
  });
};

Updated dependencies [f4d6e5b0, a209019f, e50f4349]:
- @shopify/hydrogen-react@2024.4.0

2024.1.4

Patch Changes

add optional fetcher key to CartForm (#1792) by @rmiller61
Fix XSS vulnerability in the SEO component (#1839) by @blittle

2024.1.3

Patch Changes

Fix PreviousLink and NextLink types in the Pagination component. (#1774) by @lorenzo-del-rosario

2024.1.2

Patch Changes

🐛 Fix issue where customer login does not persist to checkout (#1719) by @michenly

✨ Add customerAccount option to createCartHandler. Where a ?logged_in=true will be added to the checkoutUrl for cart query if a customer is logged in.
Customer Account API client's query & mutate method now returns errors as an array of GraphQLError(s) that is better formatted. (#1765) by @michenly

Log GraphQL errors automatically in Customer Account API client, with a new logErrors: boolean option to disable it.
Updated dependencies [409e1bca]:
- @shopify/hydrogen-react@2024.1.1

2024.1.1

Patch Changes

Add support for multiple schemas in GraphiQL. Fix links in Subrequest Profiler. (#1693) by @frandiox
♻️ CustomerClient type is deprecated and replaced by CustomerAccount (#1692) by @michenly
Log GraphQL errors automatically in Storefront client, with a new logErrors: boolean option to disable it. Add back a link to GraphiQL in the error message. (#1690) by @frandiox

2024.1.0

Major Changes

Better Hydrogen error handling (#1645) by @wizardlyhel
- Fix storefront client throwing on partial successful errors
- Fix subrequest profiler to better display network errors with URL information for Storefront API requests
Breaking change

This update changes the shape of the error objects returned by the createCartHandler method.

Previously, mutations could return an errors array that contained a userErrors array.

With this change, these arrays are no longer nested. The response can contain both an errors array and a userErrors array. errors contains GraphQL execution errors. userErrors contains errors caused by the cart mutation itself (such as adding a product that has zero inventory).

storefront.isApiError is deprecated.

Updated return types for createCartHandler methods
- cart.get() used to return a Cart type. Now it returns CartReturn type to accommodate the errors object.
- All other cart methods (ie. cart.addLines) used to return a CartQueryData type. Now it returns CartQueryDataReturn type to accommodate the errors object.
Custom rules passed to createContentSecurityPolicy now extend the default Shopify and development domains, instead of overriding them (#1593) by @michenly
Upgrade to Storefront API v2024-01 (#1642) by @wizardlyhel

Minor Changes

Add Subrequest Profiler developer tool to enable better observability of server-side network requests and caching behaviors (#1511) by @wizardlyhel
Introduce the new createCustomerAccountClient for interacting with the Customer Account API (#1606) by @michenly

Patch Changes

Fix a bug that allowed undesired redirect to external domains (#1629) by @wizardlyhel
Fix content security policy to recognize localhost asset server as a valid source when running the dev command (#1591) by @michenly
Fix the <Seo /> component to render canonical URLs without trailing slashes. Thanks to @joshuafredrickson for reporting (#1622) by @blittle

Make default HydrogenSession type extensible. (#1590) by @michenly

Update implementation of HydrogenSession using type:

import {
+ type HydrogenSession,
} from '@shopify/hydrogen';
- class HydrogenSession {
+ class AppSession implements HydrogenSession {
    ...
}

Fix error stack traces thrown by API clients if promises are not awaited (#1656) by @frandiox
Updated dependencies [0629bc77, dc8f90de, ca1161b2]:
- @shopify/hydrogen-react@2024.1.0

2023.10.3

Patch Changes

Fix the Pagination component to always restore scroll correctly on back/forth navigation. (#1508) by @blittle
Serve assets from a separate domain when running the dev server, to better simulate cross-domain behaviors. This makes it more realistic to work with CORS requests, content security policies, and CDN paths in development. (#1503) by @frandiox
Export caching types to make creating custom clients easier in TypeScript. (#1507) by @juanpprieto
Update the return types of the Customer Account API query and mutation methods. Also update Customer Account API default version to 2024-01. (#1537) by @blittle
Fix how peer dependencies are resolved. (#1489) by @frandiox
Add default channel value of hydrogen to Hydrogen’s ShopPayButton component. (#1447) by @QuintonC
Updated dependencies [848c6260, 62f67873, e8cc49fe]:
- @shopify/hydrogen-react@2023.10.1

2023.10.2

Patch Changes

Change @remix-run/server-runtime to properly be a peer dependency by @blittle

2023.10.1

Patch Changes

SEO component: remove URL params from canonical tags (#1478) by @scottdixon

2023.10.0

Major and Breaking Changes

Remix v2 (#1289) by @frandiox

Hydrogen 2023-10 has upgraded to Remix v2 and is now a peer dependency.

Please check the Remix v2 release notes to see what needs to be changed in your app code. Common changes include:
- Renaming types prefixed with V2_. For example, V2_MetaFunction is now MetaFunction.
- Renaming other types like LoaderArgs and ActionArgs, which are now LoaderFunctionArgs and ActionFunctionArgs respectively.
If you were not already using v2 flags, follow the official Remix migration guide before upgrading to v2.
Update to Remix v2. Remix is now a peer dependency and its version is no longer pinned. This means that you can upgrade to newer Remix 2.x versions without upgrading Hydrogen. (#1289) by @frandiox

Other breaking changes

The default caching strategy has been updated. The new default caching strategy provides a max-age value of 1 second, and a stale-while-revalidate value of 1 day. If you would keep the old caching values, update your queries to use CacheShort: (#1336) by @benjaminsehl

 const {product} = await storefront.query(
   `#graphql
     query Product($handle: String!) {
       product(handle: $handle) { id title }
     }
   `,
   {
     variables: {handle: params.productHandle},
+    /**
+     * Override the default caching strategy with the old caching values
+     */
+    cache: storefront.CacheShort(),
   },
 );

The Storefront API types included are now generated using @graphql-codegen/typescript@4 (changelog). This results in a breaking change if you were importing Scalars directly from @shopify/hydrogen-react or @shopify/hydrogen: (#1108) by @frandiox
```
 import type {Scalars} from '@shopify/hydrogen/storefront-api-types';

 type Props = {
-  id: Scalars['ID']; // This was a string
+  id: Scalars['ID']['input']; // Need to access 'input' or 'output' to get the string
 };
```

Patch Changes

Add a client to query the Customer Account API (#1430) by @blittle
Update Storefront API version to 2023-10 (#1431) by @wizardlyhel

Custom cart methods are now stable: (#1440) by @wizardlyhel

 const cart = createCartHandler({
   storefront,
   getCartId,
   setCartId: cartSetIdDefault(),
-  customMethods__unstable: {
+  customMethods: {
     addLines: async (lines, optionalParams) => {
      // ...
     },
   },
 });

Remove deprecated parameters and props (#1455 and #1435): (#1435) by @wizardlyhel
- createStorefrontClient parameters buyerIp and requestGroupId
- <Image> props loaderOptions and widths
Add query explorer plugin to GraphiQL. Start your dev server and load http://localhost:3000/graphiql to use GraphiQL. (#1470) by @frandiox
Updated dependencies [0ae7cbe2, ad45656c]:
- @shopify/hydrogen-react@2023.10.0

2023.7.13

Patch Changes

Fix template dist package due to CI error (#1451) by @wizardlyhel
Updated dependencies [3eb376fe]:
- @shopify/hydrogen-react@2023.7.6

2023.7.12

Patch Changes

Move react to peer dependencies. It had been added as a direct dependency by mistake in a previous version. (#1439) by @frandiox
Integrate the debug-network tooling with the new --worker-unstable runtime CLI flag. (#1387) by @frandiox

Calls to withCache can now be shown in the /debug-network tool when using the Worker runtime. For this to work, use the new request parameter in createWithCache: (#1438) by @frandiox

export default {
  fetch(request, env, executionContext) {
    // ...
    const withCache = createWithCache({
      cache,
      waitUntil,
+     request,
    });
    // ...
  },
}

Updated dependencies [d30e2651, 1b45311d, 2627faa7]:
- @shopify/hydrogen-react@2023.7.5

2023.7.11

Patch Changes

Fix subrequest performance in development. (#1411) by @frandiox

2023.7.10

Patch Changes

Ensure storefrontRedirect fallback only redirects to relative URLs. (#1399) by @frandiox

2023.7.9

Patch Changes

Allow generic inference in standalone usage of WithCache type - Contributed by @chinanderm (#1363) by @wizardlyhel
Cart Optimistic UI helpers (#1366) by @wizardlyhel
Fix storefront sub request cache key (#1375) by @wizardlyhel
Fix the Pagination component to use forwardRefs for the NextLink and PreviousLink render props (#1362) by @blittle

2023.7.8

Patch Changes

The error.cause property throw from the Storefront client is now stringified. (#1184) by @frandiox
Fix Hydrogen's Storefront API client to not throw unhandled promise exceptions. This is because Remix is guaranteed to handle exceptions from the loader and fixing it prevents Hydrogen from crashing when deployed to some runtimes on unhandled promise exceptions. (#1318) by @blittle
Relax prop validation on the getSelectedProductOptions and getSelectedProductOptions utilities to look for member props instead of checking with instanceof. (#1327) by @blittle

2023.7.7

Patch Changes

Supress the hydration warning in the new <Script> component when nonce values differ between the server and client, which is expected. (#1312) by @frandiox
(Unstable) server-side network request debug virtual route (#1284) by @wizardlyhel
1. Update your server.ts so that it also passes in the waitUntil and env.
```
  const handleRequest = createRequestHandler({
    build: remixBuild,
    mode: process.env.NODE_ENV,
+    getLoadContext: () => ({session, storefront, env, waitUntil}),
  });
```
  If you are using typescript, make sure to update remix.env.d.ts
```
  declare module '@shopify/remix-oxygen' {
    export interface AppLoadContext {
+     env: Env;
      cart: HydrogenCart;
      storefront: Storefront;
      session: HydrogenSession;
+      waitUntil: ExecutionContext['waitUntil'];
    }
  }
```
2. Run npm run dev and you should see terminal log information about a new virtual route that you can view server-side network requests at http://localhost:3000/debug-network
3. Open http://localhost:3000/debug-network in a tab and your app another tab. When you navigate around your app, you should see server network requests being logged in the debug-network tab

2023.7.6

Patch Changes

Updated dependencies [345f06a2]:
- @shopify/hydrogen-react@2023.7.4

2023.7.5

Patch Changes

Fix the Pagination component to reset internal state when the URL changes (not including Pagination params). (#1291) by @blittle

We also now validate the connection prop to include a pageInfo object with the following properties:
1. hasNextPage
2. hasPreviousPage
3. endCursor
4. startCursor
Previously our templates had a bug where startCursor was not included. Upgrading means the app will error until you update your query to include it:
```
 query CollectionDetails {
   collection(handle: $handle) {
     ...
     pageInfo {
       hasPreviousPage
       hasNextPage
       hasNextPage
       endCursor
+      startCursor
     }
   }
 }
```

2023.7.4

Patch Changes

Fix hydration errors and stale data within the Pagination component (#1283) by @blittle

Add custom product paths to the VariantSelector component: (#1271) by @blittle

<VariantSelector handle="snowboard" productPath="shop" options={options}>
  {/* ... */}
</VariantSelector>

Add functionality for creating a Content Security Policy. See the guide on Content Security Policies for more details. (#1235) by @blittle
Updated dependencies [06516ee9, 423acee2]:
- @shopify/hydrogen-react@2023.7.3

2023.7.3

Patch Changes

Exported the type CookieOptions from cartSetIdDefault (#1153) by @remcolakens
Updated dependencies [e9e1736a, 1a0e858d]:
- @shopify/hydrogen-react@2023.7.2

2023.7.2

Patch Changes

Surface storefront api response errors (#1205) by @wizardlyhel
Updated dependencies [d80c4ada]:
- @shopify/hydrogen-react@2023.7.1

2023.7.1

Patch Changes

Update to Remix v1.19.1. (#1172) by @frandiox

See changes for 1.18 and 1.19.

2023.7.0

What’s new

⭐️ Check out our blog post with all the latest updates on Hydrogen, and what’s coming on the roadmap.

The latest version of Hydrogen comes with new and updated components and utilities that can help you speed up your build:

An updated server-side Cart component with built-in abstractions to handle most common cart operations, including adding, updating, or deleting line items, applying discounts, and more.
A drop-in <Pagination/> component to make it easier to handle large product collections.
A new <VariantSelector/> component that makes it faster to build progressively enhanced product forms.
Improved support for predictive search and local pickup options through Storefront API version 2023-07.

Breaking Changes

createWithCache is now stable. All imports need to be updated: (#1151) by @blittle

- import {createWithCache_unstable} from '@shopify/hydrogen';
+ import {createWithCache} from '@shopify/hydrogen';

Pagination and getPaginationVariables are now stable. (#1129) by @blittle

All imports to each should be updated:

- import {Pagiatinon__unstable, getPaginationVariables__unstable} from '@shopify/hydrogen';
+ import {Pagiatinon, getPaginationVariables} from '@shopify/hydrogen';

Patch Changes

Function and component for cart management: (#786) by @wizardlyhel
- createCartHandler - Creates an object instance that simplifies cart operations such as add/update/remove from cart.
- CartForm - A form component that helps you sets up form inputs for cart handler.
Documentation:
- Updated how-to guides
- createCartHandler
- CartForm
Export useLoadScript (#1080) by @wizardlyhel
Throw error when storeDomain is not passed to createStorefrontClient. (#1128) by @frandiox
Improve warning and error format for known Hydrogen messages in development. (#1093) by @frandiox
Add an example using the new Customer Account API (#1126) by @blittle
Corrected the $attributes type in CART_ATTRIBUTES_UPDATE_MUTATION to match the expected one (#1117) by @remcolakens
Fix cache key by url encode the sub request keys (#1105) by @wizardlyhel

Add a <VariantSelector> component to make building product forms easier. Also added the getSelectedProductOptions helper function. See the guide on using the VariantSelector. (#1027) by @blittle

Updated dependencies [c39411e0, 0d2e5ffb, 4bee03df, 11ab64a8, 7a7456a5]:
- @shopify/hydrogen-react@2023.4.6

2023.4.6

Patch Changes

Updated dependencies [b8f41ad7]:
- @shopify/hydrogen-react@2023.4.5

2023.4.5

Patch Changes

Update Remix to the latest version (1.17.1). (#852) by @frandiox

When updating your app, remember to also update your Remix dependencies to 1.17.1 in your package.json file:

-"@remix-run/react": "1.15.0",
+"@remix-run/react": "1.17.1",

-"@remix-run/dev": "1.15.0",
-"@remix-run/eslint-config": "1.15.0",
+"@remix-run/dev": "1.17.1",
+"@remix-run/eslint-config": "1.17.1",

2023.4.4

Patch Changes

Fix redirects to respond with a 301 (#946) by @blittle
A default https:// protocol is now added automatically to storeDomain if missing. (#985) by @frandiox
Fix flattenConnection()'s TypeScript types when working with edges.node (#945) by @frehner
Make storefrontApiVersion parameter optional. By default, it will use the current version of Hydrogen as the Storefront API version. (#984) by @frandiox
Skip reading and writing cache in sub-requests when the strategy is CacheNone. (#964) by @frandiox
Fix <ModelViewer> to properly set className (#966) by @blittle
Add a /admin route that redirects to the Shopify admin. This redirect can be disabled by passing noAdminRedirect: true to storefrontRedirect: (#989) by @blittle
```
storefrontRedirect({
  redirect,
  response,
  storefront,
  noAdminRedirect: true,
});
```
Updated dependencies [7b4afea2, 32515232, 7d6a1a7c, 442f602a, b9ab8eb7, 93a7c3c6]:
- @shopify/hydrogen-react@2023.4.4

2023.4.3

Patch Changes

Fix release (#926) by @blittle
Updated dependencies [7aaa4e86]:
- @shopify/hydrogen-react@2023.4.3

2023.4.2

Patch Changes

Add support for generated types from the new unstable codegen feature in the CLI. (#707) by @frandiox
Add a <Pagination__unstable> component and getPaginationVariables__unstable helper to make rendering large lists from the Storefront API easy. This is an initial unstable release and we expect to finalize the API by the 2023-07 release. See the <Pagination> component documentation. (#755) by @cartogram
Updated dependencies [2e1e4590]:
- @shopify/hydrogen-react@2023.4.2

2023.4.1

Patch Changes

Adds parseGid() which is a helper function that takes in a Shopify GID and returns the resource and id from it. For example: (#845) by @frehner

import {parseGid} from '@shopify/hydrogen-react';

const {id, resource} = parseGid('gid://shopify/Order/123');

console.log(id); // 123
console.log(resource); // Order

Avoid warning about missing buyerIp when using private access tokens in development. (#836) by @frandiox
Updated dependencies [0a009a3b]:
- @shopify/hydrogen-react@2023.4.1

2023.4.0

Major Changes

Releases 2023-04 (#754) by @lordofthecactus
Updates Hydrogen to Storefront 2023-04 API release.
Updates types from CartLineConnection to BaseCartLineConnection.

Deprecates CartLinePrice from @shopify/hydrogen-react use Money instead:

- import {CartLinePrice} from '@shopify/hydrogen-react';
+ import {Money} from '@shopify/hydrogen-react';

- <CartLinePrice line={line} />
+ <Money data={line.priceV2} />

Check the docs for using Money 💵.

Adds a new Image component, replacing the existing one. While your existing implementation won't break, props widths and loaderOptions are now deprecated disregarded, with a new aspectRatio prop added. (#787) by @benjaminsehl

Migrating to the new Image

The new Image component is responsive by default, and requires less configuration to ensure the right image size is being rendered on all screen sizes.

Before
```
<Image
  data={image}
  widths={[400, 800, 1200]}
  width="100px"
  sizes="90vw"
  loaderOptions={{
    scale: 2,
    crop: 'left',
  }}
/>
```
After
```
<Image data={image} sizes="90vw" crop="left" aspectRatio="3/2" />
```
Note that widths and loaderOptions have now been deprecated, declaring width is no longer necessary, and we’ve added an aspectRatio prop:
- widths is now calculated automatically based on a new srcSetOptions prop (see below for details).
- loaderOptions has been removed in favour of declaring crop and src as props. width and height should only be set as props if rendering a fixed image size, with width otherwise defaulting to 100%, and the loader calculating each dynamically.
- aspectRatio is calculated automatically using data.width and data.height (if available) — but if you want to present an image with an aspect ratio other than what was uploaded, you can set using the format Int/Int (e.g. 3/2, see MDN docs for more info, note that you must use the fraction style of declaring aspect ratio, decimals are not supported); if you've set an aspectRatio, we will default the crop to be crop: center (in the example above we've specified this to use left instead).
Examples

Basic Usage
```
<Image data={data} />
```
This would use all default props, which if exhaustively declared would be the same as typing:
```
<Image
  data={data}
  crop="center"
  decoding="async"
  loading="lazy"
  width="100%"
  sizes="100vw"
  srcSetOptions={{
    interval: 15,
    startingWidth: 200,
    incrementSize: 200,
    placeholderWidth: 100,
  }}
/>
```
An alternative way to write this without using data would be to use the src, alt, and aspectRatio props. For example:
```
<Image
  src={data.url}
  alt={data.altText}
  aspectRatio={`${data.width}/${data.height}`}
/>
```
Assuming data had the following shape:
```
{
  "url": "https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg",
  "altText": "alt text",
  "width": "4000",
  "height": "4000"
}
```
All three above examples would result in the following HTML:
```
<img
  srcset="https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=300&height=300&crop=center 300w, … *13 additional sizes* … https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=3000&height=3000&crop=center 3000w"
  src="https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=100&height=100&crop=center"
  alt="alt text"
  sizes="100vw"
  loading="lazy"
  decoding="async"
  width="100px"
  height="100px"
  style="aspect-ratio: 4000 / 4000;"
/>
```
Fixed-size Images

When using images that are meant to be a fixed size, like showing a preview image of a product in the cart, instead of using aspectRatio, you'll instead declare width and height manually with fixed values. For example:
```
<Image data={data} width={80} height={80} />
```
Instead of generating 15 images for a broad range of screen sizes, Image will instead only generate 3, for various screen pixel densities (1x, 2x, and 3x). The above example would result in the following HTML:
```
<img
  srcset="
    https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=80&height=80&crop=center   1x,
    https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=160&height=160&crop=center 2x,
    https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=240&height=240&crop=center 3x
  "
  src="https://cdn.shopify.com/s/files/1/0551/4566/0472/products/Main.jpg?width=80&height=80"
  alt="alt text"
  loading="lazy"
  width="80px"
  height="80px"
  style="aspect-ratio: 80 / 80;"
/>
```
If you don't want to have a fixed aspect ratio, and instead respect whatever is returned from your query, the following syntax can also be used:
```
<Image data={data} width="5rem" />
```
Which would result in the same HTML as above, however the generated URLs inside the src and srcset attributes would not have height or crop parameters appended to them, and the generated aspect-ratio in style would be 4000 / 4000 (if using the same data values as our original example).

Custom Loaders

If your image isn't coming from the Storefront API, but you still want to take advantage of the Image component, you can pass a custom loader prop, provided the CDN you're working with supports URL-based transformations.

The loader is a function which expects a params argument of the following type:
```
type LoaderParams = {
  /** The base URL of the image */
  src?: ImageType['url'];
  /** The URL param that controls width */
  width?: number;
  /** The URL param that controls height */
  height?: number;
  /** The URL param that controls the cropping region */
  crop?: Crop;
};
```
Here is an example of using Image with a custom loader function:
```
const customLoader = ({src, width, height, crop}) => {
  return `${src}?w=${width}&h=${height}&gravity=${crop}`;
};

export default function CustomImage(props) {
  <Image loader={customLoader} {...props} />;
}

// In Use:

<CustomImage data={customCDNImageData} />;
```
If your CDN happens to support the same semantics as Shopify (URL params of width, height, and crop) — the default loader will work a non-Shopify src attribute.

An example output might look like: https://mycdn.com/image.jpeg?width=100&height=100&crop=center

Additional changes
- Added the srcSetOptions prop used to create the image URLs used in srcset. It’s an object with the following keys and defaults:
```
srcSetOptions = {
  intervals: 15, // The number of sizes to generate
  startingWidth: 200, // The smalles image size
  incrementSize: 200, // The increment by to increase for each size, in pixesl
  placeholderWidth: 100, // The size used for placeholder fallback images
};
```
- Added an export for IMAGE_FRAGMENT, which can be imported from Hydrogen and used in any Storefront API query, which will fetch the required fields needed by the component.
- Added an export for shopifyLoader for using Storefront API responses in conjunction with alternative frameworks that already have their own Image component, like Next.js

Patch Changes

Updated dependencies [82b6af7, 361879e]:
- @shopify/hydrogen-react@2023.4.0

2023.1.7

Patch Changes

Bump internal Remix dependencies to 1.15.0. (#728) by @wizardlyhel

Recommendations to follow:
- Upgrade all the Remix packages in your app to 1.15.0.
- Enable Remix v2 future flags at your earliest convenience following the official guide.

Add an experimental createWithCache_unstable utility, which creates a function similar to useQuery from Hydrogen v1. Use this utility to query third-party APIs and apply custom cache options. (#600) by @frandiox

To setup the utility, update your server.ts:

import {
  createStorefrontClient,
  createWithCache_unstable,
  CacheLong,
} from '@shopify/hydrogen';

// ...

  const cache = await caches.open('hydrogen');
  const withCache = createWithCache_unstable({cache, waitUntil});

  // Create custom utilities to query third-party APIs:
  const fetchMyCMS = (query) => {
    // Prefix the cache key and make it unique based on arguments.
    return withCache(['my-cms', query], CacheLong(), () => {
      const cmsData = await (await fetch('my-cms.com/api', {
        method: 'POST',
        body: query
      })).json();

      const nextPage = (await fetch('my-cms.com/api', {
        method: 'POST',
        body: cmsData1.nextPageQuery,
      })).json();

      return {...cmsData, nextPage}
    });
  };

  const handleRequest = createRequestHandler({
    build: remixBuild,
    mode: process.env.NODE_ENV,
    getLoadContext: () => ({
      session,
      waitUntil,
      storefront,
      env,
      fetchMyCMS,
    }),
  });

Note: The utility is unstable and subject to change before stabalizing in the 2023.04 release.

Updated dependencies [85ae63a, 5e26503]:
- @shopify/hydrogen-react@2023.1.8

2023.1.6

Patch Changes

Add new loader API for setting seo tags within route module (#591) by @cartogram
ShopPayButton component now can receive a storeDomain. The component now does not require ShopifyProvider. (#645) by @lordofthecactus
1. Update Remix to 1.14.0 (#599) by @blittle
2. Add Cache-Control defaults to all the demo store routes
Added robots option to SEO config that allows users granular control over the robots meta tag. This can be set on both a global and per-page basis using the handle.seo property. (#572) by @cartogram

Example:
```
export handle = {
  seo: {
    robots: {
      noIndex: false,
      noFollow: false,
    }
  }
}
```

Fix active cart session event in Live View (#614) by @wizardlyhel

Introducing getStorefrontHeaders that collects the required Shopify headers for making a Storefront API call.

Make cart constants available as exports from @shopify/hydrogen-react
Deprecating buyerIp and requestGroupId props from createStorefrontClient from @shopify/hydrogen
Deprecating getBuyerIp function from @shopify/remix-oxygen

+ import {getStorefrontHeaders} from '@shopify/remix-oxygen';
import {createStorefrontClient, storefrontRedirect} from '@shopify/hydrogen';

export default {
  async fetch(
    request: Request,
    env: Env,
    executionContext: ExecutionContext,
  ): Promise<Response> {

    const {storefront} = createStorefrontClient({
      cache,
      waitUntil,
-     buyerIp: getBuyerIp(request),
      i18n: {language: 'EN', country: 'US'},
      publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
      privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
      storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
      storefrontApiVersion: env.PUBLIC_STOREFRONT_API_VERSION || '2023-01',
      storefrontId: env.PUBLIC_STOREFRONT_ID,
-     requestGroupId: request.headers.get('request-id'),
+     storefrontHeaders: getStorefrontHeaders(request),
    });

Updated dependencies [c78f441, 7fca5d5]:
- @shopify/hydrogen-react@2023.1.7

2023.1.5

Patch Changes

Fix the latest tag (#562) by @blittle

2023.1.4

Patch Changes

Fix template imports to only reference @shopify/hydrogen, not @shopify/hydrogen-react (#523) by @blittle

Files

CHANGELOG.md

Latest commit

History

CHANGELOG.md

File metadata and controls

@shopify/hydrogen

2024.4.2

Patch Changes

2024.4.1

Patch Changes

2024.4.0

Minor Changes

Patch Changes

Migration steps:

2024.1.4

Patch Changes

2024.1.3

Patch Changes

2024.1.2

Patch Changes

2024.1.1

Patch Changes

2024.1.0

Major Changes

Breaking change

Updated return types for createCartHandler methods

Minor Changes

Patch Changes

2023.10.3

Patch Changes

2023.10.2

Patch Changes

2023.10.1

Patch Changes

2023.10.0

Major and Breaking Changes

Remix v2 (#1289) by @frandiox

Other breaking changes

Patch Changes

2023.7.13

Patch Changes

2023.7.12

Patch Changes

2023.7.11

Patch Changes

2023.7.10

Patch Changes

2023.7.9

Patch Changes

2023.7.8

Patch Changes

2023.7.7

Patch Changes

2023.7.6

Patch Changes

2023.7.5

Patch Changes

2023.7.4

Patch Changes

2023.7.3

Patch Changes

2023.7.2

Patch Changes

2023.7.1

Patch Changes

2023.7.0

What’s new

Breaking Changes

Patch Changes

2023.4.6

Patch Changes

2023.4.5

Patch Changes

2023.4.4

Patch Changes

2023.4.3

Patch Changes

2023.4.2

Patch Changes

Updated return types for `createCartHandler` methods

Migrating to the new `Image`