@shopify/hydrogen 1.6.1 → 1.6.2

package/dist/esnext/entry-server.js

@@ -14,7 +14,7 @@ import { getTemplate } from './utilities/template.js';
 import { Analytics } from './foundation/Analytics/Analytics.server.js';
 import { DevTools } from './foundation/DevTools/DevTools.server.js';
 import { getSyncSessionApi } from './foundation/session/session.js';
-import { parseJSON } from './utilities/parse.js';
+import { parseState } from './utilities/parse.js';
 import { htmlEncode } from './utilities/index.js';
 import { generateUUID } from './utilities/random.js';
 import { splitCookiesString } from 'set-cookie-parser';
@@ -153,12 +153,11 @@ async function processRequest(handleRequest, App, url, request, sessionApi, opti
             })
             : apiResponse;
     }
-    const state = isRSCRequest
-        ? parseJSON(decodeURIComponent(url.searchParams.get('state') || '{}'))
-        : {
-            pathname: decodeURIComponent(url.pathname),
-            search: decodeURIComponent(url.search),
-        };
+    const state = parseState(url);
+    if (!state) {
+        postRequestTasks(isRSCRequest ? 'rsc' : 'ssr', 400, request, response, true);
+        return new Response(`Invalid RSC state`, { status: 400 });
+    }
     const rsc = runRSC({ App, state, log, request, response });
     if (isRSCRequest) {
         const buffered = await bufferReadableStream(rsc.readable.getReader());

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

@@ -2,7 +2,7 @@ import { getTime } from '../../utilities/timing.js';
 import { hashKey } from '../../utilities/hash.js';
 import { HelmetData as HeadData } from 'react-helmet-async';
 import { RSC_PATHNAME } from '../../constants.js';
-import { parseJSON } from '../../utilities/parse.js';
+import { parseState } from '../../utilities/parse.js';
 import { generateUUID } from '../../utilities/random.js';
 // Stores queries by url or '*'
 const preloadCache = new Map();
@@ -197,7 +197,9 @@ function getInitFromNodeRequest(request) {
 }
 function normalizeUrl(rawUrl) {
     const url = new URL(rawUrl);
-    const state = parseJSON(url.searchParams.get('state') ?? '');
+    const state = parseState(url);
+    if (!state)
+        return '';
     const normalizedUrl = new URL(state?.pathname ?? '', url.origin);
     normalizedUrl.search = state?.search;
     return normalizedUrl.toString();

package/dist/esnext/foundation/fetchSync/server/fetchSync.d.ts

@@ -5,4 +5,4 @@ import { ResponseSync } from '../ResponseSync.js';
  * It's designed similar to the [Web API's `fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch), only in a way
  * that supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html).
  */
-export declare function fetchSync(url: string, options?: Omit<RequestInit, 'cache'> & HydrogenUseQueryOptions): ResponseSync;
+export declare function fetchSync(originalUrl: string, options?: Omit<RequestInit, 'cache'> & HydrogenUseQueryOptions): ResponseSync;

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

@@ -1,18 +1,31 @@
 import { useQuery } from '../../useQuery/index.js';
-import { useUrl } from '../../useUrl/index.js';
 import { ResponseSync } from '../ResponseSync.js';
 /**
  * The `fetchSync` hook makes API requests and is the recommended way to make simple fetch calls on the server and the client.
  * It's designed similar to the [Web API's `fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch), only in a way
  * that supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html).
  */
-export function fetchSync(url, options) {
+export function fetchSync(originalUrl, options) {
+    let requestUrl;
+    try {
+        requestUrl = new URL(originalUrl);
+    }
+    catch (error) {
+        // The URL is not valid, and the user likely tried to call a relative path in the same app.
+        if (error instanceof TypeError && originalUrl.startsWith('/')) {
+            throw new TypeError(`fetchSync() was called with a relative URL (${originalUrl}). Please use an absolute URL instead.\n` +
+                `- If you're trying to fetch a relative path in the same app, query the data source directly from the server instead.\n` +
+                `- If you're calling fetchSync() within a client component, use a conditional state like useEffect() to ` +
+                `prevent it from being called on the server during pre-render.`);
+        }
+        // The URL is not valid for some other reason.
+        throw error;
+    }
+    const url = requestUrl.toString();
     const { cache, preload, shouldCacheResponse, ...requestInit } = options ?? {};
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const { origin } = useUrl();
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { data, error } = useQuery([url, requestInit], async () => {
-        const response = await globalThis.fetch(new URL(url, origin), requestInit);
+        const response = await globalThis.fetch(url, requestInit);
         return ResponseSync.toSerializable(response);
     }, {
         cache,

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

@@ -1,4 +1,5 @@
 import type { CachingStrategy, PreloadOptions, QueryKey } from '../../types.js';
+import type { HydrogenRequest } from '../HydrogenRequest/HydrogenRequest.server.js';
 export interface HydrogenUseQueryOptions {
     /** The [caching strategy](https://shopify.dev/custom-storefronts/hydrogen/framework/cache#caching-strategies) to help you
      * determine which cache control header to set.
@@ -28,7 +29,7 @@ export declare function useQuery<T>(
 /** A string or array to uniquely identify the current query. */
 key: QueryKey, 
 /** An asynchronous query function like `fetch` which returns data. */
-queryFn: () => Promise<T>, 
+queryFn: (request: HydrogenRequest) => Promise<T>, 
 /** The options to manage the cache behavior of the sub-request. */
 queryOptions?: HydrogenUseQueryOptions): {
     data?: undefined;

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

@@ -73,7 +73,7 @@ function cachedQueryFnBuilder(key, generateNewOutput, queryOptions) {
                         maxAge: 10,
                     }));
                     try {
-                        const output = await generateNewOutput();
+                        const output = await generateNewOutput(request);
                         if (shouldCacheResponse(output)) {
                             await setItemInCache(key, output, resolvedQueryOptions?.cache);
                         }
@@ -90,7 +90,7 @@ function cachedQueryFnBuilder(key, generateNewOutput, queryOptions) {
             }
             return output;
         }
-        const newOutput = await generateNewOutput();
+        const newOutput = await generateNewOutput(request);
         /**
          * Important: Do this async
          */

package/dist/esnext/foundation/useUrl/useUrl.js

@@ -1,6 +1,6 @@
 import { useContext, useMemo } from 'react';
 import { RSC_PATHNAME } from '../../constants.js';
-import { parseJSON } from '../../utilities/parse.js';
+import { parseState } from '../../utilities/parse.js';
 import { RouterContext } from '../Router/BrowserRouter.client.js';
 import { useEnvContext, META_ENV_SSR } from '../ssr-interop.js';
 /**
@@ -11,8 +11,8 @@ export function useUrl() {
         const serverUrl = new URL(useEnvContext((req) => req.url) // eslint-disable-line react-hooks/rules-of-hooks
         );
         if (serverUrl.pathname === RSC_PATHNAME) {
-            const state = parseJSON(serverUrl.searchParams.get('state') || '{}');
-            const parsedUrl = `${serverUrl.origin}${state.pathname ?? ''}${state.search ?? ''}`;
+            const state = parseState(serverUrl);
+            const parsedUrl = `${serverUrl.origin}${state?.pathname ?? ''}${state?.search ?? ''}`;
             return new URL(parsedUrl);
         }
         return new URL(serverUrl);

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-config.js

@@ -64,10 +64,7 @@ export default (pluginOptions) => {
                 // Reload when updating local Hydrogen lib
                 server: process.env.LOCAL_DEV && {
                     watch: {
-                        ignored: [
-                            '!**/node_modules/@shopify/hydrogen/**',
-                            '!**/node_modules/@shopify/hydrogen-ui/**',
-                        ],
+                        ignored: ['!**/node_modules/@shopify/hydrogen/**'],
                     },
                 },
                 optimizeDeps: {
@@ -75,7 +72,6 @@ export default (pluginOptions) => {
                         '@shopify/hydrogen',
                         '@shopify/hydrogen/client',
                         '@shopify/hydrogen/entry-client',
-                        '@shopify/hydrogen-ui',
                     ],
                     include: [
                         /**

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

@@ -1,24 +1,18 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import { useShop } from '../../foundation/useShop/index.js';
 import { getLoggerWithContext } from '../../utilities/log/index.js';
 import { graphqlRequestBody } from '../../utilities/index.js';
 import { useServerRequest } from '../../foundation/ServerRequestProvider/index.js';
 import { injectGraphQLTracker } from '../../utilities/graphql-tracker.js';
 import { sendMessageToClient } from '../../utilities/devtools.js';
-import { fetchSync } from '../../foundation/fetchSync/server/fetchSync.js';
 import { META_ENV_SSR } from '../../foundation/ssr-interop.js';
 import { getStorefrontApiRequestHeaders } from '../../utilities/storefrontApi.js';
 import { parseJSON } from '../../utilities/parse.js';
+import { useQuery } from '../../foundation/useQuery/hooks.js';
 // Check if the response body has GraphQL errors
 // https://spec.graphql.org/June2018/#sec-Response-Format
-const shouldCacheResponse = ([body]) => {
-    try {
-        return !parseJSON(body)?.errors;
-    }
-    catch {
-        // If we can't parse the response, then assume
-        // an error and don't cache the response
-        return false;
-    }
+const shouldCacheResponse = (body) => {
+    return !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.
@@ -33,48 +27,61 @@ export function useShopQuery({ query, variables = {}, cache, preload = false, })
     if (!META_ENV_SSR) {
         throw new Error('Shopify Storefront API requests should only be made from the server.');
     }
-    const serverRequest = useServerRequest(); // eslint-disable-line react-hooks/rules-of-hooks
+    const serverRequest = useServerRequest();
     const log = getLoggerWithContext(serverRequest);
+    const { storeDomain, storefrontApiVersion, storefrontToken, storefrontId, privateStorefrontToken, } = useShop();
     const body = query ? graphqlRequestBody(query, variables) : '';
-    const { url, requestInit } = useCreateShopRequest(body); // eslint-disable-line react-hooks/rules-of-hooks
-    let text;
-    let data;
-    let useQueryError;
-    let response = null;
-    try {
-        response = fetchSync(url, {
-            ...requestInit,
-            cache,
-            preload,
-            shouldCacheResponse,
+    const { data, error } = useQuery([storeDomain, storefrontApiVersion, body], async (request) => {
+        const { url, requestInit } = useCreateShopRequest({
+            body,
+            request,
+            storeDomain,
+            storefrontToken,
+            storefrontApiVersion,
+            storefrontId,
+            privateStorefrontToken,
         });
-        text = response.text();
+        const response = await fetch(url, requestInit);
+        const text = await response.text();
         try {
-            data = response.json();
+            const data = parseJSON(text);
+            /**
+             * GraphQL errors get printed to the console but ultimately
+             * get returned to the consumer.
+             */
+            if (data?.errors) {
+                const errors = Array.isArray(data.errors)
+                    ? data.errors
+                    : [data.errors];
+                const requestId = response?.headers?.get('x-request-id') ?? '';
+                for (const error of errors) {
+                    if (__HYDROGEN_DEV__ && !__HYDROGEN_TEST__) {
+                        throw new Error(`Storefront API GraphQL Error: ${error.message}.\nRequest id: ${requestId}`);
+                    }
+                    else {
+                        log.error('Storefront API GraphQL Error', error, 'Storefront API GraphQL request id', requestId);
+                    }
+                }
+                log.error(`Storefront API GraphQL error count: ${errors.length}`);
+            }
+            return data;
         }
         catch (error) {
             if (response.headers.get('content-length')) {
-                useQueryError = new Error(`Unable to parse response (x-request-id: ${response.headers.get('x-request-id')}):\n${text}`);
+                throw new Error(`Unable to parse response (x-request-id: ${response.headers.get('x-request-id')}):\n${text}`);
             }
             else {
-                useQueryError = new Error(`${response.status} ${response.statusText} (x-request-id: ${response.headers.get('x-request-id')})`);
+                throw new Error(`${response.status} ${response.statusText} (x-request-id: ${response.headers.get('x-request-id')})`);
             }
         }
-    }
-    catch (error) {
-        // Pass-through thrown promise for Suspense functionality
-        if (error?.then) {
-            throw error;
-        }
-        useQueryError = error;
-    }
+    }, { cache, preload, shouldCacheResponse });
     /**
      * The fetch request itself failed, so we handle that differently than a GraphQL error
      */
-    if (useQueryError) {
-        const errorMessage = createErrorMessage(useQueryError);
+    if (error) {
+        const errorMessage = createErrorMessage(error);
         log.error(errorMessage);
-        log.error(useQueryError);
+        log.error(error);
         if (__HYDROGEN_DEV__ && !__HYDROGEN_TEST__) {
             throw new Error(errorMessage);
         }
@@ -83,23 +90,6 @@ export function useShopQuery({ query, variables = {}, cache, preload = false, })
             throw new Error(`The fetch attempt failed; there was an issue connecting to the data source.`);
         }
     }
-    /**
-     * GraphQL errors get printed to the console but ultimately
-     * get returned to the consumer.
-     */
-    if (data?.errors) {
-        const errors = Array.isArray(data.errors) ? data.errors : [data.errors];
-        const requestId = response?.headers?.get('x-request-id') ?? '';
-        for (const error of errors) {
-            if (__HYDROGEN_DEV__ && !__HYDROGEN_TEST__) {
-                throw new Error(`Storefront API GraphQL Error: ${error.message}.\nRequest id: ${requestId}`);
-            }
-            else {
-                log.error('Storefront API GraphQL Error', error, 'Storefront API GraphQL request id', requestId);
-            }
-        }
-        log.error(`Storefront API GraphQL error count: ${errors.length}`);
-    }
     if (__HYDROGEN_DEV__ &&
         (log.options().showUnusedQueryProperties ||
             serverRequest.ctx.hydrogenConfig?.__EXPERIMENTAL__devTools) &&
@@ -144,9 +134,7 @@ export function useShopQuery({ query, variables = {}, cache, preload = false, })
     }
     return data;
 }
-function useCreateShopRequest(body) {
-    const { storeDomain, storefrontToken, storefrontApiVersion, storefrontId, privateStorefrontToken, } = useShop();
-    const request = useServerRequest();
+function useCreateShopRequest({ body, request, storeDomain, storefrontToken, storefrontApiVersion, storefrontId, privateStorefrontToken, }) {
     const buyerIp = request.getBuyerIp();
     let headers = {
         'X-SDK-Variant': 'hydrogen',
@@ -185,3 +173,4 @@ function createErrorMessage(fetchError) {
         return `Failed to connect to the Storefront API: ${fetchError.message}`;
     }
 }
+/* eslint-enable react-hooks/rules-of-hooks */

package/dist/esnext/index.d.ts

@@ -42,3 +42,4 @@ export { type HydrogenRequest } from './foundation/HydrogenRequest/HydrogenReque
 export { type HydrogenResponse } from './foundation/HydrogenResponse/HydrogenResponse.server.js';
 export { type HydrogenRouteProps, type CachingStrategy } from './types.js';
 export { type ResourceGetter as HydrogenApiRoute, RequestOptions as HydrogenApiRouteOptions, } from './utilities/apiRoutes.js';
+export { getOnlineStorefrontHeaders } from './utilities/storefrontApi.js';

package/dist/esnext/index.js

@@ -38,3 +38,4 @@ export { CartQuery } from './components/CartProvider/cart-queries.js';
  * Override the client version of `fetchSync` with the server version.
  */
 export { fetchSync } from './foundation/fetchSync/server/fetchSync.js';
+export { getOnlineStorefrontHeaders } from './utilities/storefrontApi.js';

package/dist/esnext/utilities/bot-ua.js

@@ -5,6 +5,7 @@
  */
 const botUserAgents = [
     'AdsBot-Google',
+    'AdsBot-Google-Mobile',
     'applebot',
     'Baiduspider',
     'baiduspider',
@@ -23,6 +24,9 @@ const botUserAgents = [
     'facebookexternalhit',
     'Google-PageRenderer',
     'Googlebot',
+    'Googlebot-Image',
+    'Googlebot-News',
+    'Googlebot-Video',
     'googleweblight',
     'ia_archive',
     'LinkedInBot',

package/dist/esnext/utilities/hash.js

@@ -1,4 +1,3 @@
-import { STOREFRONT_API_BUYER_IP_HEADER } from '../constants.js';
 export function hashKey(queryKey) {
     const rawKeys = Array.isArray(queryKey) ? queryKey : [queryKey];
     let hash = '';
@@ -13,9 +12,6 @@ export function hashKey(queryKey) {
                 // fallback to a safer (but slower) stringify.
                 if (!!key.body && typeof key.body === 'string') {
                     hash += key.body;
-                    if (!!key.headers && key.headers[STOREFRONT_API_BUYER_IP_HEADER]) {
-                        hash += key.headers[STOREFRONT_API_BUYER_IP_HEADER];
-                    }
                 }
                 else {
                     hash += JSON.stringify(key);

package/dist/esnext/utilities/parse.d.ts

@@ -1 +1,4 @@
 export declare function parseJSON(json: any): any;
+export declare function parseState(url: URL): {
+    [k: string]: string;
+} | undefined;

package/dist/esnext/utilities/parse.js

@@ -1,3 +1,4 @@
+import { RSC_PATHNAME } from '../constants.js';
 export function parseJSON(json) {
     if (String(json).includes('__proto__'))
         return JSON.parse(json, noproto);
@@ -7,3 +8,18 @@ function noproto(k, v) {
     if (k !== '__proto__')
         return v;
 }
+export function parseState(url) {
+    try {
+        const { pathname, search } = url;
+        const state = pathname === RSC_PATHNAME
+            ? parseJSON(url.searchParams.get('state') ?? '{}')
+            : { pathname, search };
+        return Object.fromEntries(Object.entries(state).map(([key, value]) => [
+            decodeURIComponent(key ?? ''),
+            decodeURIComponent(value ?? ''),
+        ]));
+    }
+    catch {
+        // Do not throw to prevent unhandled errors
+    }
+}

package/dist/esnext/utilities/storefrontApi.d.ts

@@ -5,3 +5,4 @@ export declare function getStorefrontApiRequestHeaders({ buyerIp, publicStorefro
     storefrontId: string | undefined;
 }): Record<string, any>;
 export declare function getOxygenVariable(key: string): any;
+export declare function getOnlineStorefrontHeaders(request: Request, origin: string): Headers;

package/dist/esnext/utilities/storefrontApi.js

@@ -46,3 +46,18 @@ export function getStorefrontApiRequestHeaders({ buyerIp, publicStorefrontToken,
 export function getOxygenVariable(key) {
     return typeof Oxygen !== 'undefined' ? Oxygen?.env?.[key] : null;
 }
+export function getOnlineStorefrontHeaders(request, origin) {
+    const clientIP = request.headers.get('X-Shopify-Client-IP');
+    const clientIPSig = request.headers.get('X-Shopify-Client-IP-Sig');
+    const headers = new Headers();
+    for (const [key, value] of request.headers.entries()) {
+        headers.append(key, swapHostname(value, { hostname: new URL(request.url).host, origin }));
+    }
+    if (!__HYDROGEN_DEV__ && (!clientIP || !clientIPSig)) {
+        log.warn('Proxying the online store is only available in Oxygen. This request is likely to be throttled.');
+    }
+    return headers;
+}
+function swapHostname(str, { hostname, origin }) {
+    return str.replaceAll(hostname, origin);
+}

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.6.1";
+export declare const LIB_VERSION = "1.6.2";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '1.6.1';
+export const LIB_VERSION = '1.6.2';

package/dist/node/framework/plugins/vite-plugin-hydrogen-config.js

@@ -69,10 +69,7 @@ exports.default = (pluginOptions) => {
                 // Reload when updating local Hydrogen lib
                 server: process.env.LOCAL_DEV && {
                     watch: {
-                        ignored: [
-                            '!**/node_modules/@shopify/hydrogen/**',
-                            '!**/node_modules/@shopify/hydrogen-ui/**',
-                        ],
+                        ignored: ['!**/node_modules/@shopify/hydrogen/**'],
                     },
                 },
                 optimizeDeps: {
@@ -80,7 +77,6 @@ exports.default = (pluginOptions) => {
                         '@shopify/hydrogen',
                         '@shopify/hydrogen/client',
                         '@shopify/hydrogen/entry-client',
-                        '@shopify/hydrogen-ui',
                     ],
                     include: [
                         /**

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",
@@ -100,6 +100,7 @@
     "@types/set-cookie-parser": "^2.4.2",
     "@types/uuid": "^8.3.4",
     "@types/ws": "^8.2.0",
+    "@vitest/coverage-c8": "^0.24.3",
     "babel-loader": "^8.2.2",
     "cpy-cli": "^3.1.0",
     "eslint-plugin-import": "^2.26.0",