@shopify/hydrogen 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # Changelog
 
+## 0.14.0
+
+### Minor Changes
+
+- [#1028](https://github.com/Shopify/hydrogen/pull/1028) [`ba174588`](https://github.com/Shopify/hydrogen/commit/ba174588d8f4a9f1054779a9bf32a92e8d2c921c) Thanks [@michenly](https://github.com/michenly)! - Starting from SF API version `2022-04`, the preferred way to request translatable resources is using the `@inContext` directive. See the [API docs](https://shopify.dev/api/examples/multiple-languages#retrieve-translations-with-the-storefront-api) on how to do this and which resources have translatable properties.
+
+  This causes a breaking change to the `useShopQuery` hook. The `locale` property has been removed from the argument object; `Accept-Language` is no longer being send with every request, and we are no longer using locale as part of the cache key.
+
+  The `useShop` hook will now return the `languageCode` key, which is the first two characters of the existing `locale` key.
+
+  Both `locale` & `languageCode` values are also now capitalized to make it easier to pass into a GraphQL `@inContext` directive.
+
+* [#1020](https://github.com/Shopify/hydrogen/pull/1020) [`e9529bc8`](https://github.com/Shopify/hydrogen/commit/e9529bc81410e0d99f9d3dbdb138ae61d00f876b) Thanks [@jplhomer](https://github.com/jplhomer)! - Preload `Link` URLs by default when a user signals intent to visit the URL. This includes hovering or focusing on the URL. To disable preloading, pass `<Link preload={false} />` to the component.
+
+### Patch Changes
+
+- [#1017](https://github.com/Shopify/hydrogen/pull/1017) [`4c87fb63`](https://github.com/Shopify/hydrogen/commit/4c87fb639a79da883f99c58acde0d17c713c7620) Thanks [@frandiox](https://github.com/frandiox)! - Do not cache Storefront API responses that contain GraphQL errors (amend previous fix).
+
+* [#1039](https://github.com/Shopify/hydrogen/pull/1039) [`3a297862`](https://github.com/Shopify/hydrogen/commit/3a29786202947fab0bfe876042b37a91923ed637) Thanks [@frandiox](https://github.com/frandiox)! - Update to Vite 2.9
+
+- [#1026](https://github.com/Shopify/hydrogen/pull/1026) [`836b064d`](https://github.com/Shopify/hydrogen/commit/836b064d1648fb1a9f209a08a82ee5c20f7dfba9) Thanks [@frehner](https://github.com/frehner)! - Updated the Typescript types and GraphQL schema to the newest updates from Storefront API 2022-04. Of note in this update is the ability to skip `edges` and go directly to `node`, for example: `product.nodes[0]` instead of `product.edges[0].node`
+
+* [#1032](https://github.com/Shopify/hydrogen/pull/1032) [`03488083`](https://github.com/Shopify/hydrogen/commit/034880833dc500f66f9b67417c00099c283dfa67) Thanks [@jplhomer](https://github.com/jplhomer)! - Catch hydration errors related to experimental server components bugs and prevent them from being logged in production.
+
+- [#1037](https://github.com/Shopify/hydrogen/pull/1037) [`13376efb`](https://github.com/Shopify/hydrogen/commit/13376efbe4db93efd705b6900a6198708bc37e69) Thanks [@jplhomer](https://github.com/jplhomer)! - Use new header for private Storefront token
+
+## 0.13.2
+
+### Patch Changes
+
+- [#1013](https://github.com/Shopify/hydrogen/pull/1013) [`94dc94ae`](https://github.com/Shopify/hydrogen/commit/94dc94aeb9dfd5e0120cab610203fdb4f0c61d3c) Thanks [@jplhomer](https://github.com/jplhomer)! - Fix CORS issue in StackBlitz
+
+## 0.13.1
+
+### Patch Changes
+
+- [#1008](https://github.com/Shopify/hydrogen/pull/1008) [`ca1de82b`](https://github.com/Shopify/hydrogen/commit/ca1de82bc38c1c02caa451fb52065da499555e6f) Thanks [@frandiox](https://github.com/frandiox)! - Allow passing `cache` parameter to `createServer` in Node entry.
+
+* [#997](https://github.com/Shopify/hydrogen/pull/997) [`fffdc08f`](https://github.com/Shopify/hydrogen/commit/fffdc08f87f71592352a2eb67a63e80704054db2) Thanks [@frandiox](https://github.com/frandiox)! - Allow empty array values in flattenConnection utility.
+
+- [#1007](https://github.com/Shopify/hydrogen/pull/1007) [`7cfca7b0`](https://github.com/Shopify/hydrogen/commit/7cfca7b09289e028a463ababb51e69b4e3943d94) Thanks [@scottdixon](https://github.com/scottdixon)! - Fix API index routes https://github.com/Shopify/hydrogen/issues/562
+
+* [#1000](https://github.com/Shopify/hydrogen/pull/1000) [`6d0d5068`](https://github.com/Shopify/hydrogen/commit/6d0d50686029c3d66d9dc0ceb0b5f71456c7b19e) Thanks [@frandiox](https://github.com/frandiox)! - Do not cache Storefront API responses that contain GraphQL errors.
+
+- [#1003](https://github.com/Shopify/hydrogen/pull/1003) [`d8a9c929`](https://github.com/Shopify/hydrogen/commit/d8a9c9290aaf7c9d058b2c08567294822bea5396) Thanks [@jplhomer](https://github.com/jplhomer)! - Update useShopQuery to accept a custom Storefront API secret token, and forward the Buyer IP.
+
 ## 0.13.0
 
 ### Minor Changes
@@ -29,7 +75,7 @@
 
   These fragments have been removed to reduce the chances of over-fetching (in other words, querying for fields you don't use) in your GraphQL queries. Please refer to the [Storefront API documentation](https://shopify.dev/api/storefront) for information and guides.
 
-* [#912](https://github.com/Shopify/hydrogen/pull/912) [`de0e0d6a`](https://github.com/Shopify/hydrogen/commit/de0e0d6a6652463243ee09013cd30830ce2a246a) Thanks [@blittle](https://github.com/blittle)! - Change the country selector to lazy load available countries. The motivation to do so is that a _lot_ of countries come with the starter template. The problem is 1) the graphql query to fetch them all is relatively slow and 2) all of them get serialized to the browser in each RSC response.
+* [#912](https://github.com/Shopify/hydrogen/pull/912) [`de0e0d6a`](https://github.com/Shopify/hydrogen/commit/de0e0d6a6652463243ee09013cd30830ce2a246a) Thanks [@blittle](https://github.com/blittle)! - Change the country selector to lazy load available countries. The motivation to do so is that a _lot_ of countries come with the Demo Store template. The problem is 1) the graphql query to fetch them all is relatively slow and 2) all of them get serialized to the browser in each RSC response.
 
   This change removes `availableCountries` from the `LocalizationProvider`. As a result, the `useAvailableCountries` hook is also gone. Instead, the available countries are loaded on demand from an API route.
 
@@ -79,7 +125,7 @@
   }, []);
   ```
 
-  See an example on how this could be done inside the Hydrogen Example Template [country selector](https://github.com/Shopify/hydrogen/blob/v1.x-2022-07/examples/template-hydrogen-default/src/components/CountrySelector.client.jsx)
+  See an example on how this could be done inside the Demo Store template [country selector](https://github.com/Shopify/hydrogen/blob/v1.x-2022-07/examples/template-hydrogen-default/src/components/CountrySelector.client.jsx)
 
 - [#698](https://github.com/Shopify/hydrogen/pull/698) [`6f30b9a1`](https://github.com/Shopify/hydrogen/commit/6f30b9a1327f06d648a01dd94d539c7dcb3061e0) Thanks [@jplhomer](https://github.com/jplhomer)! - Basic end-to-end tests have been added to the default Hydrogen template. You can run tests in development:
 
@@ -239,7 +285,7 @@
 
 - [#981](https://github.com/Shopify/hydrogen/pull/981) [`8dda8a86`](https://github.com/Shopify/hydrogen/commit/8dda8a860bc1cf58511756b6fff999fb7caa6081) Thanks [@michenly](https://github.com/michenly)! - Fix useUrl() when it is in RSC mode
 
-* [#965](https://github.com/Shopify/hydrogen/pull/965) [`cdad13ed`](https://github.com/Shopify/hydrogen/commit/cdad13ed85ff17b84981367f39c7d2fe45e72dcf) Thanks [@blittle](https://github.com/blittle)! - Fix server redirects to work properly with RSC responses. For example, the redirect component within the starter template needs to change:
+* [#965](https://github.com/Shopify/hydrogen/pull/965) [`cdad13ed`](https://github.com/Shopify/hydrogen/commit/cdad13ed85ff17b84981367f39c7d2fe45e72dcf) Thanks [@blittle](https://github.com/blittle)! - Fix server redirects to work properly with RSC responses. For example, the redirect component within the Demo Store template needs to change:
 
   ```diff
   export default function Redirect({response}) {
@@ -289,7 +335,7 @@
 
 ### Minor Changes
 
-- [`8271be8`](https://github.com/Shopify/hydrogen/commit/8271be83331c99f27a258e6532983da4fe4f0b5b) Thanks [@michenly](https://github.com/michenly)! - Export Seo components Fragement and use them in the starter template.
+- [`8271be8`](https://github.com/Shopify/hydrogen/commit/8271be83331c99f27a258e6532983da4fe4f0b5b) Thanks [@michenly](https://github.com/michenly)! - Export Seo components Fragement and use them in the Demo Store template.
 
 * [#827](https://github.com/Shopify/hydrogen/pull/827) [`745e8c0`](https://github.com/Shopify/hydrogen/commit/745e8c0a87a7c41803934565e5a756295ff629c2) Thanks [@michenly](https://github.com/michenly)! - Move any static `Fragment` properties on components to the entry point `@shopify/hydrogen/fragments`.
   The migration diff are as follows:
@@ -925,7 +971,7 @@ function SomeComponent() {
 
 ### Fixed
 
-- Starter template GalleryPreview unique key warning
+- Demo Store template GalleryPreview unique key warning
 - Mitigation for upcoming breaking minor Vite update
 
 ## 0.2.0 - 2021-10-08

package/dist/esnext/components/Link/Link.client.d.ts

@@ -8,6 +8,8 @@ export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEle
     clientState?: any;
     /** Whether to reload the whole document on navigation. */
     reloadDocument?: boolean;
+    /** Whether to prefetch the link source when the user signals intent. Defaults to `true`. For more information, refer to [Prefetching a link source](/custom-storefronts/hydrogen/framework/routes#prefetching-a-link-source). */
+    prefetch?: boolean;
 }
 /**
  * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all
@@ -15,3 +17,7 @@ export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEle
  * For more information, refer to the [`<a>` element documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes).
  */
 export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Credit: Remix's <Link> component.
+ */
+export declare function composeEventHandlers<EventType extends React.SyntheticEvent | Event>(theirHandler: ((event: EventType) => any) | undefined, ourHandler: (event: EventType) => any): (event: EventType) => any;

package/dist/esnext/components/Link/Link.client.js

@@ -1,7 +1,9 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useRouter } from '../../foundation/Router/BrowserRouter.client';
 import { createPath } from 'history';
 import { useNavigate } from '../../foundation/useNavigate/useNavigate';
+import { useServerState } from '../../foundation/useServerState';
+import { RSC_PATHNAME } from '../../constants';
 /**
  * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all
  * properties available to the `<a>` element are also available to the `Link` component.
@@ -10,7 +12,13 @@ import { useNavigate } from '../../foundation/useNavigate/useNavigate';
 export const Link = React.forwardRef(function Link(props, ref) {
     const navigate = useNavigate();
     const { location } = useRouter();
-    const { reloadDocument, target, replace: _replace, to, onClick, clientState, } = props;
+    const [_, startTransition] = React.useTransition();
+    /**
+     * Inspired by Remix's Link component
+     */
+    const [shouldPrefetch, setShouldPrefetch] = useState(false);
+    const [maybePrefetch, setMaybePrefetch] = useState(false);
+    const { reloadDocument, target, replace: _replace, to, onClick, clientState, prefetch = true, } = props;
     const internalClick = useCallback((e) => {
         if (onClick)
             onClick(e);
@@ -28,8 +36,82 @@ export const Link = React.forwardRef(function Link(props, ref) {
             });
         }
     }, [reloadDocument, target, _replace, to, clientState, onClick, location]);
-    return (React.createElement("a", { ...without(props, ['to', 'replace', 'clientState', 'reloadDocument']), ref: ref, onClick: internalClick, href: props.to }, props.children));
+    const signalPrefetchIntent = () => {
+        /**
+         * startTransition to yield to more important updates
+         */
+        startTransition(() => {
+            if (prefetch) {
+                setMaybePrefetch(true);
+            }
+        });
+    };
+    const cancelPrefetchIntent = () => {
+        /**
+         * startTransition to yield to more important updates
+         */
+        startTransition(() => {
+            if (prefetch) {
+                setMaybePrefetch(false);
+            }
+        });
+    };
+    /**
+     * Wrapping `maybePrefetch` inside useEffect allows the user to quickly graze over
+     * a link without triggering a prefetch.
+     */
+    useEffect(() => {
+        if (maybePrefetch) {
+            const id = setTimeout(() => {
+                setShouldPrefetch(true);
+            }, 100);
+            return () => {
+                clearTimeout(id);
+            };
+        }
+    }, [maybePrefetch]);
+    const onMouseEnter = composeEventHandlers(props.onMouseEnter, signalPrefetchIntent);
+    const onMouseLeave = composeEventHandlers(props.onMouseLeave, cancelPrefetchIntent);
+    const onFocus = composeEventHandlers(props.onFocus, signalPrefetchIntent);
+    const onBlur = composeEventHandlers(props.onBlur, cancelPrefetchIntent);
+    const onTouchStart = composeEventHandlers(props.onTouchStart, signalPrefetchIntent);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("a", { ...without(props, [
+                'to',
+                'replace',
+                'clientState',
+                'reloadDocument',
+                'prefetch',
+            ]), ref: ref, onClick: internalClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, href: props.to }, props.children),
+        shouldPrefetch && React.createElement(Prefetch, { pathname: to })));
 });
+function Prefetch({ pathname }) {
+    const { getProposedServerState } = useServerState();
+    const { location } = useRouter();
+    const newPath = createPath({ pathname });
+    if (pathname.startsWith('http') || newPath === createPath(location)) {
+        return null;
+    }
+    const newLocation = new URL(newPath, window.location.href);
+    const proposedServerState = getProposedServerState({
+        pathname: newLocation.pathname,
+        search: newLocation.search || undefined,
+    });
+    const href = `${RSC_PATHNAME}?state=` +
+        encodeURIComponent(JSON.stringify(proposedServerState));
+    return React.createElement("link", { rel: "prefetch", as: "fetch", href: href });
+}
+/**
+ * Credit: Remix's <Link> component.
+ */
+export function composeEventHandlers(theirHandler, ourHandler) {
+    return (event) => {
+        theirHandler === null || theirHandler === void 0 ? void 0 : theirHandler(event);
+        if (!event.defaultPrevented) {
+            ourHandler(event);
+        }
+    };
+}
 function isModifiedEvent(event) {
     return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
 }

package/dist/esnext/components/LocalizationProvider/LocalizationContext.client.d.ts

@@ -1,4 +1,4 @@
-import { LocalizationQuery } from './LocalizationQuery';
+import type { LocalizationQuery } from './LocalizationProvider.server';
 export declare type Localization = LocalizationQuery['localization'];
 export interface LocalizationContextValue {
     country?: Localization['country'];

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { PreloadOptions } from '../../types';
+import { Country, Currency } from '../../storefront-api-types';
 export interface LocalizationProviderProps {
     /** A `ReactNode` element. */
     children: ReactNode;
@@ -19,3 +20,18 @@ export interface LocalizationProviderProps {
  * `@inContext` directive as the `country` value.
  */
 export declare function LocalizationProvider(props: LocalizationProviderProps): JSX.Element;
+export declare type LocalizationQuery = {
+    __typename?: 'QueryRoot';
+} & {
+    localization: {
+        __typename?: 'Localization';
+    } & {
+        country: {
+            __typename?: 'Country';
+        } & Pick<Country, 'isoCode' | 'name'> & {
+            currency: {
+                __typename?: 'Currency';
+            } & Pick<Currency, 'isoCode'>;
+        };
+    };
+};

package/dist/esnext/components/LocalizationProvider/LocalizationProvider.server.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import LocalizationClientProvider from './LocalizationClientProvider.client';
+import { useShop } from '../../foundation/useShop';
 import { useShopQuery } from '../../hooks/useShopQuery';
 import { CacheDays } from '../../framework/CachingStrategy';
 /**
@@ -12,15 +13,19 @@ import { CacheDays } from '../../framework/CachingStrategy';
  * `@inContext` directive as the `country` value.
  */
 export function LocalizationProvider(props) {
+    const { languageCode } = useShop();
     const { data: { localization }, } = useShopQuery({
         query: query,
+        variables: { language: languageCode },
         cache: CacheDays(),
         preload: props.preload,
     });
     return (React.createElement(LocalizationClientProvider, { localization: localization }, props.children));
 }
-const query = `query Localization {
-  localization {
+const query = `
+query Localization($language: LanguageCode) 
+@inContext(language: $language) {
+   localization {
     country {
       isoCode
       name

package/dist/esnext/components/Seo/DefaultPageSeo.client.js

@@ -5,8 +5,7 @@ import { TitleSeo } from './TitleSeo.client';
 import { DescriptionSeo } from './DescriptionSeo.client';
 import { TwitterSeo } from './TwitterSeo.client';
 export function DefaultPageSeo({ title, description, url, titleTemplate, lang, }) {
-    const { locale } = useShop();
-    const fallBacklang = locale.split(/[-_]/)[0];
+    const { languageCode: fallBacklang } = useShop();
     return (React.createElement(React.Fragment, null,
         React.createElement(Head, { defaultTitle: title !== null && title !== void 0 ? title : '', titleTemplate: titleTemplate !== null && titleTemplate !== void 0 ? titleTemplate : `%s - ${title}` },
             React.createElement("html", { lang: lang !== null && lang !== void 0 ? lang : fallBacklang }),

package/dist/esnext/entry-client.js

@@ -19,10 +19,23 @@ const renderHydrogen = async (ClientWrapper, config) => {
     }
     // default to StrictMode on, unless explicitly turned off
     const RootComponent = (config === null || config === void 0 ? void 0 : config.strictMode) !== false ? StrictMode : Fragment;
+    let hasCaughtError = false;
     hydrateRoot(root, React.createElement(RootComponent, null,
         React.createElement(ErrorBoundary, { FallbackComponent: Error },
             React.createElement(Suspense, { fallback: null },
-                React.createElement(Content, { clientWrapper: ClientWrapper })))));
+                React.createElement(Content, { clientWrapper: ClientWrapper })))), {
+        onRecoverableError(e) {
+            if (__DEV__ && !hasCaughtError) {
+                hasCaughtError = true;
+                console.log(`React encountered an error while attempting to hydrate the application. ` +
+                    `This is likely due to a bug in React's Suspense behavior related to experimental server components, ` +
+                    `and it is safe to ignore this error.\n` +
+                    `Visit this issue to learn more: https://github.com/Shopify/hydrogen/issues/920.\n\n` +
+                    `The original error is printed below:`);
+                console.log(e);
+            }
+        },
+    });
 };
 export default renderHydrogen;
 function Content({ clientWrapper: ClientWrapper = ({ children }) => children, }) {

package/dist/esnext/entry-server.d.ts

@@ -14,6 +14,7 @@ interface RequestHandlerOptions {
     dev?: boolean;
     context?: RuntimeContext;
     nonce?: string;
+    buyerIpHeader?: string;
 }
 export interface RequestHandler {
     (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;

package/dist/esnext/entry-server.js

@@ -5,7 +5,6 @@ import { defer } from './utilities/defer';
 import { Html, applyHtmlHead } from './framework/Hydration/Html';
 import { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
 import { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
-import { getCacheControlHeader } from './framework/cache';
 import { preloadRequestCacheData, ServerRequestProvider, } from './foundation/ServerRequestProvider';
 import { getApiRouteFromURL, renderApiRoute, getApiRoutes, } from './utilities/apiRoutes';
 import { ServerStateProvider } from './foundation/ServerStateProvider';
@@ -19,8 +18,9 @@ const DOCTYPE = '<!DOCTYPE html>';
 const CONTENT_TYPE = 'Content-Type';
 const HTML_CONTENT_TYPE = 'text/html; charset=UTF-8';
 export const renderHydrogen = (App, { shopifyConfig, routes }) => {
-    const handleRequest = async function (rawRequest, { indexTemplate, streamableResponse, dev, cache, context, nonce }) {
+    const handleRequest = async function (rawRequest, { indexTemplate, streamableResponse, dev, cache, context, nonce, buyerIpHeader, }) {
         const request = new ServerComponentRequest(rawRequest);
+        request.ctx.buyerIpHeader = buyerIpHeader;
         const url = new URL(request.url);
         const log = getLoggerWithContext(request);
         const componentResponse = new ServerComponentResponse();
@@ -108,7 +108,7 @@ async function render(url, { App, routes, request, componentResponse, log, templ
      * TODO: Also add `Vary` headers for `accept-language` and any other keys
      * we want to shard our full-page cache for all Hydrogen storefronts.
      */
-    headers[getCacheControlHeader({ dev })] = componentResponse.cacheControlHeader;
+    headers['cache-control'] = componentResponse.cacheControlHeader;
     if (componentResponse.customBody) {
         // This can be used to return sitemap.xml or any other custom response.
         postRequestTasks('ssr', status, request, componentResponse);
@@ -203,7 +203,7 @@ async function stream(url, { App, routes, request, response, componentResponse,
              * queries which might be caught behind Suspense. Clarify this or add
              * additional checks downstream?
              */
-            responseOptions.headers[getCacheControlHeader({ dev })] =
+            responseOptions.headers['cache-control'] =
                 componentResponse.cacheControlHeader;
             if (isRedirect(responseOptions)) {
                 return false;
@@ -271,7 +271,7 @@ async function stream(url, { App, routes, request, response, componentResponse,
                  * queries which might be caught behind Suspense. Clarify this or add
                  * additional checks downstream?
                  */
-                response.setHeader(getCacheControlHeader({ dev }), componentResponse.cacheControlHeader);
+                response.setHeader('cache-control', componentResponse.cacheControlHeader);
                 writeHeadToServerResponse(response, componentResponse, log, didError);
                 if (isRedirect(response)) {
                     // Return redirects early without further rendering/streaming
@@ -355,15 +355,21 @@ async function hydrate(url, { App, routes, request, response, componentResponse,
         // Note: CFW does not support reader.piteTo nor iterable syntax
         const bufferedBody = await bufferReadableStream(rscReadable.getReader());
         postRequestTasks('rsc', 200, request, componentResponse);
-        return new Response(bufferedBody);
+        return new Response(bufferedBody, {
+            headers: {
+                'cache-control': componentResponse.cacheControlHeader,
+            },
+        });
     }
     else if (response) {
         const rscWriter = await import(
         // @ts-ignore
         '@shopify/hydrogen/vendor/react-server-dom-vite/writer.node.server');
-        const stream = rscWriter
-            .renderToPipeableStream(AppRSC)
-            .pipe(response);
+        const streamer = rscWriter.renderToPipeableStream(AppRSC);
+        response.writeHead(200, 'ok', {
+            'cache-control': componentResponse.cacheControlHeader,
+        });
+        const stream = streamer.pipe(response);
         stream.on('finish', function () {
             postRequestTasks('rsc', response.statusCode, request, componentResponse);
         });

package/dist/esnext/foundation/ServerRequestProvider/ServerRequestProvider.js

@@ -30,7 +30,7 @@ export function useServerRequest() {
         const cache = React.unstable_getCacheForType(requestCacheRSC);
         request = cache ? cache.get(requestCacheRSC.key) : null;
     }
-    catch (error) {
+    catch (_a) {
         // If RSC cache failed it means this is not an RSC request.
         // Try getting SSR context instead:
         request = useContext(RequestContextSSR);

package/dist/esnext/foundation/ServerStateProvider/ServerStateProvider.d.ts

@@ -7,13 +7,18 @@ export interface ServerState {
     search: string;
     [key: string]: any;
 }
+declare type ServerStateSetterInput = ((prev: ServerState) => Partial<ServerState>) | Partial<ServerState> | string;
 export interface ServerStateSetter {
-    (input: ((prev: ServerState) => Partial<ServerState>) | Partial<ServerState> | string, propValue?: any): void;
+    (input: ServerStateSetterInput, propValue?: any): void;
+}
+interface ProposedServerStateSetter {
+    (input: ServerStateSetterInput, propValue?: any): ServerState;
 }
 export interface ServerStateContextValue {
     pending: boolean;
     serverState: ServerState;
     setServerState: ServerStateSetter;
+    getProposedServerState: ProposedServerStateSetter;
 }
 export declare const ServerStateContext: React.Context<ServerStateContextValue>;
 interface ServerStateProviderProps {

package/dist/esnext/foundation/ServerStateProvider/ServerStateProvider.js

@@ -14,34 +14,39 @@ export function ServerStateProvider({ serverState, setServerState, children, })
          * the `pending` flag also provided by the hook to display in the UI.
          */
         startTransition(() => {
-            return setServerState((prev) => {
-                let newValue;
-                if (typeof input === 'function') {
-                    newValue = input(prev);
-                }
-                else if (typeof input === 'string') {
-                    newValue = { [input]: propValue };
-                }
-                else {
-                    newValue = input;
-                }
-                if (__DEV__) {
-                    const privateProp = PRIVATE_PROPS.find((prop) => prop in newValue);
-                    if (privateProp) {
-                        console.warn(`Custom "${privateProp}" property in server state is ignored. Use a different name.`);
-                    }
-                }
-                return {
-                    ...prev,
-                    ...newValue,
-                };
-            });
+            return setServerState((prev) => getNewServerState(prev, input, propValue));
         });
     }, [setServerState, startTransition]);
+    const getProposedServerStateCallback = useCallback((input, propValue) => {
+        return getNewServerState(serverState, input, propValue);
+    }, [serverState]);
+    function getNewServerState(prev, input, propValue) {
+        let newValue;
+        if (typeof input === 'function') {
+            newValue = input(prev);
+        }
+        else if (typeof input === 'string') {
+            newValue = { [input]: propValue };
+        }
+        else {
+            newValue = input;
+        }
+        if (__DEV__) {
+            const privateProp = PRIVATE_PROPS.find((prop) => prop in newValue);
+            if (privateProp) {
+                console.warn(`Custom "${privateProp}" property in server state is ignored. Use a different name.`);
+            }
+        }
+        return {
+            ...prev,
+            ...newValue,
+        };
+    }
     const value = useMemo(() => ({
         pending,
         serverState,
         setServerState: setServerStateCallback,
+        getProposedServerState: getProposedServerStateCallback,
     }), [serverState, setServerStateCallback, pending]);
     return (React.createElement(ServerStateContext.Provider, { value: value }, children));
 }

package/dist/esnext/foundation/ShopifyProvider/ShopifyProvider.server.js

@@ -4,8 +4,11 @@ import { DEFAULT_LOCALE } from '../constants';
 import { useServerRequest } from '../ServerRequestProvider';
 function makeShopifyContext(shopifyConfig) {
     var _a, _b;
+    const locale = (_a = shopifyConfig.defaultLocale) !== null && _a !== void 0 ? _a : DEFAULT_LOCALE;
+    const languageCode = locale.split(/[-_]/)[0];
     return {
-        locale: (_a = shopifyConfig.defaultLocale) !== null && _a !== void 0 ? _a : DEFAULT_LOCALE,
+        locale: locale.toUpperCase(),
+        languageCode: languageCode.toUpperCase(),
         storeDomain: (_b = shopifyConfig === null || shopifyConfig === void 0 ? void 0 : shopifyConfig.storeDomain) === null || _b === void 0 ? void 0 : _b.replace(/^https?:\/\//, ''),
         storefrontToken: shopifyConfig.storefrontToken,
         storefrontApiVersion: shopifyConfig.storefrontApiVersion,

package/dist/esnext/foundation/ShopifyProvider/types.d.ts

@@ -1,7 +1,9 @@
+import type { CountryCode, LanguageCode } from '../../storefront-api-types';
 import type { ReactNode } from 'react';
 import type { ShopifyConfig } from '../../types';
 export declare type ShopifyContextValue = {
-    locale: string;
+    locale: `${LanguageCode}-${CountryCode}`;
+    languageCode: `${LanguageCode}`;
     storeDomain: ShopifyConfig['storeDomain'];
     storefrontToken: ShopifyConfig['storefrontToken'];
     storefrontApiVersion: string;

package/dist/esnext/foundation/constants.d.ts

@@ -1 +1 @@
-export declare const DEFAULT_LOCALE = "en-us";
+export declare const DEFAULT_LOCALE = "EN-US";

package/dist/esnext/foundation/constants.js

@@ -1,3 +1,3 @@
 // Note: do not mix this export with other app-only logic
 // to avoid importing unnecessary code in the plugins.
-export const DEFAULT_LOCALE = 'en-us';
+export const DEFAULT_LOCALE = 'EN-US';

package/dist/esnext/foundation/useQuery/hooks.d.ts

@@ -9,6 +9,9 @@ export interface HydrogenUseQueryOptions {
      * to preload the query for all requests.
      */
     preload?: PreloadOptions;
+    /** A function that inspects the response body to determine if it should be cached.
+     */
+    shouldCacheResponse?: (body: any) => boolean;
 }
 /**
  * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that

package/dist/esnext/foundation/useQuery/hooks.js

@@ -32,9 +32,11 @@ queryOptions) {
     return useRequestCacheData(withCacheIdKey, fetcher);
 }
 function cachedQueryFnBuilder(key, queryFn, queryOptions) {
+    var _a;
     const resolvedQueryOptions = {
         ...(queryOptions !== null && queryOptions !== void 0 ? queryOptions : {}),
     };
+    const shouldCacheResponse = (_a = queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.shouldCacheResponse) !== null && _a !== void 0 ? _a : (() => true);
     /**
      * Attempt to read the query from cache. If it doesn't exist or if it's stale, regenerate it.
      */
@@ -64,7 +66,9 @@ function cachedQueryFnBuilder(key, queryFn, queryOptions) {
                     await setItemInCache(lockKey, true);
                     try {
                         const output = await generateNewOutput();
-                        await setItemInCache(key, output, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache);
+                        if (shouldCacheResponse(output)) {
+                            await setItemInCache(key, output, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache);
+                        }
                     }
                     catch (e) {
                         log.error(`Error generating async response: ${e.message}`);
@@ -80,7 +84,9 @@ function cachedQueryFnBuilder(key, queryFn, queryOptions) {
         /**
          * Important: Do this async
          */
-        runDelayedFunction(async () => await setItemInCache(key, newOutput, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache));
+        if (shouldCacheResponse(newOutput)) {
+            runDelayedFunction(() => setItemInCache(key, newOutput, resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache));
+        }
         collectQueryCacheControlHeaders(request, key, generateSubRequestCacheControlHeader(resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache));
         return newOutput;
     }

package/dist/esnext/framework/Hydration/ServerComponentRequest.server.d.ts

@@ -35,6 +35,7 @@ export declare class ServerComponentRequest extends Request {
         queryTimings: Array<QueryTiming>;
         preloadQueries: PreloadQueriesByURL;
         router: RouterContextData;
+        buyerIpHeader?: string;
         [key: string]: any;
     };
     constructor(input: any);
@@ -44,4 +45,10 @@ export declare class ServerComponentRequest extends Request {
     savePreloadQuery(query: PreloadQueryEntry): void;
     getPreloadQueries(): PreloadQueriesByURL | undefined;
     savePreloadQueries(): void;
+    /**
+     * Buyer IP varies by hosting provider and runtime. The developer should provide this
+     * as an argument to the `handleRequest` function for their runtime.
+     * Defaults to `x-forwarded-for` header value.
+     */
+    getBuyerIp(): string | null;
 }