@shopify/hydrogen 0.13.2 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # 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

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.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';
@@ -109,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);
@@ -204,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;
@@ -272,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
@@ -356,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/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/framework/Hydration/ServerComponentRequest.server.js

@@ -123,8 +123,9 @@ function getInitFromNodeRequest(request) {
             ? request.body
             : undefined,
     };
-    if (!init.headers.has('x-forwarded-for')) {
-        init.headers.set('x-forwarded-for', request.socket.remoteAddress);
+    const remoteAddress = request.socket.remoteAddress;
+    if (!init.headers.has('x-forwarded-for') && remoteAddress) {
+        init.headers.set('x-forwarded-for', remoteAddress);
     }
     return init;
 }

package/dist/esnext/framework/cache.d.ts

@@ -1,13 +1,5 @@
 import type { QueryKey, CachingStrategy } from '../types';
 export declare function generateSubRequestCacheControlHeader(userCacheOptions?: CachingStrategy): string;
-/**
- * Use a preview header during development.
- * TODO: Support an override of this to force the cache
- * header to be present during dev. ENV var maybe?
- */
-export declare function getCacheControlHeader({ dev }: {
-    dev?: boolean;
-}): "cache-control-preview" | "cache-control";
 export declare function hashKey(key: QueryKey): string;
 /**
  * Get an item from the cache. If a match is found, returns a tuple

package/dist/esnext/framework/cache.js

@@ -3,14 +3,6 @@ import { CacheSeconds, generateCacheControlHeader, } from '../framework/CachingS
 export function generateSubRequestCacheControlHeader(userCacheOptions) {
     return generateCacheControlHeader(userCacheOptions || CacheSeconds());
 }
-/**
- * Use a preview header during development.
- * TODO: Support an override of this to force the cache
- * header to be present during dev. ENV var maybe?
- */
-export function getCacheControlHeader({ dev }) {
-    return dev ? 'cache-control-preview' : 'cache-control';
-}
 export function hashKey(key) {
     const rawKey = key instanceof Array ? key : [key];
     /**

package/dist/esnext/hooks/useParsedMetafields/useParsedMetafields.d.ts

@@ -15,7 +15,7 @@ metafields?: PartialDeep<MetafieldConnection>): {
     key?: string | undefined;
     namespace?: string | undefined;
     parentResource?: import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").ProductVariant> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").Product> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").Blog> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").Article> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").Customer> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").Order> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").Collection> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").Page> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").Shop> | undefined;
-    reference?: import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").MediaImage> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").ProductVariant> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").Product> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").Page> | null | undefined;
+    reference?: import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").Video> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").MediaImage> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").ProductVariant> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").Product> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").Page> | import("type-fest/source/partial-deep").PartialObjectDeep<import("../../storefront-api-types").GenericFile> | null | undefined;
     type?: string | undefined;
     updatedAt?: string | undefined;
 }[];

package/dist/esnext/hooks/useShopQuery/hooks.d.ts

@@ -8,7 +8,7 @@ export interface UseShopQueryResponse<T> {
 /**
  * The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. It must be a descendent of a `ShopifyProvider` component.
  */
-export declare function useShopQuery<T>({ query, variables, cache, locale, preload, }: {
+export declare function useShopQuery<T>({ query, variables, cache, preload, }: {
     /** A string of the GraphQL query.
      * If no query is provided, useShopQuery will make no calls to the Storefront API.
      */

package/dist/esnext/hooks/useShopQuery/hooks.js

@@ -8,11 +8,12 @@ import { injectGraphQLTracker } from '../../utilities/graphql-tracker';
 import { sendMessageToClient } from '../../utilities/devtools';
 import { META_ENV_SSR } from '../../foundation/ssr-interop';
 // Check if the response body has GraphQL errors
-const shouldCacheResponse = (body) => { var _a; return !((body === null || body === void 0 ? void 0 : body.error) || ((_a = body === null || body === void 0 ? void 0 : body.data) === null || _a === void 0 ? void 0 : _a.errors)); };
+// https://spec.graphql.org/June2018/#sec-Response-Format
+const shouldCacheResponse = (body) => !(body === null || body === void 0 ? void 0 : body.errors);
 /**
  * The `useShopQuery` hook allows you to make server-only GraphQL queries to the Storefront API. It must be a descendent of a `ShopifyProvider` component.
  */
-export function useShopQuery({ query, variables = {}, cache, locale = '', preload = false, }) {
+export function useShopQuery({ query, variables = {}, cache, preload = false, }) {
     var _a;
     if (!META_ENV_SSR) {
         throw new Error('Shopify Storefront API requests should only be made from the server.');
@@ -20,7 +21,7 @@ export function useShopQuery({ query, variables = {}, cache, locale = '', preloa
     const serverRequest = useServerRequest();
     const log = getLoggerWithContext(serverRequest);
     const body = query ? graphqlRequestBody(query, variables) : '';
-    const { key, url, requestInit } = useCreateShopRequest(body, locale);
+    const { key, url, requestInit } = useCreateShopRequest(body);
     const { data, error: useQueryError } = useQuery(key, query
         ? fetchBuilder(url, requestInit)
         : // If no query, avoid calling SFAPI & return nothing
@@ -93,30 +94,37 @@ export function useShopQuery({ query, variables = {}, cache, locale = '', preloa
     }
     return data;
 }
-function useCreateShopRequest(body, locale) {
-    var _a, _b;
-    const { storeDomain, storefrontToken, storefrontApiVersion, locale: defaultLocale, } = useShop();
+function useCreateShopRequest(body) {
+    var _a;
+    const { storeDomain, storefrontToken, storefrontApiVersion } = useShop();
     const request = useServerRequest();
     const secretToken = typeof Oxygen !== 'undefined'
         ? (_a = Oxygen === null || Oxygen === void 0 ? void 0 : Oxygen.env) === null || _a === void 0 ? void 0 : _a.SHOPIFY_STOREFRONT_API_SECRET_TOKEN
         : null;
     const buyerIp = request.getBuyerIp();
     const extraHeaders = {};
+    /**
+     * Only pass one type of storefront token at a time.
+     */
+    if (secretToken) {
+        extraHeaders['Shopify-Storefront-Private-Token'] = secretToken;
+    }
+    else {
+        extraHeaders['X-Shopify-Storefront-Access-Token'] = storefrontToken;
+    }
     if (buyerIp) {
         extraHeaders['Shopify-Storefront-Buyer-IP'] = buyerIp;
     }
     return {
-        key: [storeDomain, storefrontApiVersion, body, locale],
+        key: [storeDomain, storefrontApiVersion, body],
         url: `https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`,
         requestInit: {
             body,
             method: 'POST',
             headers: {
-                'X-Shopify-Storefront-Access-Token': secretToken !== null && secretToken !== void 0 ? secretToken : storefrontToken,
                 'X-SDK-Variant': 'hydrogen',
                 'X-SDK-Version': storefrontApiVersion,
                 'content-type': 'application/json',
-                'Accept-Language': (_b = locale) !== null && _b !== void 0 ? _b : defaultLocale,
                 ...extraHeaders,
             },
         },