@shopify/hydrogen 2023.7.7 → 2023.7.9

package/dist/development/index.cjs

@@ -322,7 +322,8 @@ async function runWithCache(cacheKey, actionFn, {
   strategy = CacheShort(),
   cacheInstance,
   shouldCacheResult = () => true,
-  waitUntil
+  waitUntil,
+  debugInfo
 }) {
   const startTime = Date.now();
   const key = hashKey([
@@ -335,7 +336,8 @@ async function runWithCache(cacheKey, actionFn, {
       url: getKeyUrl(key),
       startTime: overrideStartTime || startTime,
       cacheStatus,
-      waitUntil
+      waitUntil,
+      ...debugInfo
     });
   } ;
   if (!cacheInstance || !strategy || strategy.mode === NO_STORE) {
@@ -389,7 +391,8 @@ async function fetchWithServerCache(url, requestInit, {
   cacheKey = [url, requestInit],
   shouldCacheResponse = () => true,
   waitUntil,
-  returnType = "json"
+  returnType = "json",
+  debugInfo
 } = {}) {
   if (!cacheOptions && (!requestInit.method || requestInit.method === "GET")) {
     cacheOptions = CacheShort();
@@ -416,10 +419,16 @@ async function fetchWithServerCache(url, requestInit, {
       cacheInstance,
       waitUntil,
       strategy: cacheOptions ?? null,
+      debugInfo,
       shouldCacheResult: (result) => shouldCacheResponse(...fromSerializableResponse(result))
     }
   ).then(fromSerializableResponse);
 }
+var getCallerStackLine = () => {
+  const stackInfo = { stack: "" };
+  Error.captureStackTrace(stackInfo);
+  return stackInfo.stack.split("\n").slice(3, 4).join("\n") || "";
+} ;
 
 // src/constants.ts
 var STOREFRONT_REQUEST_GROUP_ID_HEADER = "Custom-Storefront-Request-Group-ID";
@@ -443,7 +452,7 @@ var warnOnce = (string) => {
 };
 
 // src/version.ts
-var LIB_VERSION = "2023.7.7";
+var LIB_VERSION = "2023.7.9";
 
 // src/storefront.ts
 var StorefrontApiError = class extends Error {
@@ -505,7 +514,8 @@ function createStorefrontClient(options) {
     variables,
     cache: cacheOptions,
     headers = [],
-    storefrontApiVersion
+    storefrontApiVersion,
+    stackLine
   }) {
     const userHeaders = headers instanceof Headers ? Object.fromEntries(headers.entries()) : Array.isArray(headers) ? Object.fromEntries(headers) : headers;
     query = query ?? mutation;
@@ -519,19 +529,34 @@ function createStorefrontClient(options) {
       }
     }
     const url = getStorefrontApiUrl({ storefrontApiVersion });
+    const graphqlData = JSON.stringify({ query, variables: queryVariables });
     const requestInit = {
       method: "POST",
       headers: { ...defaultHeaders, ...userHeaders },
-      body: JSON.stringify({
-        query,
-        variables: queryVariables
-      })
+      body: graphqlData
     };
+    const cacheKey = [
+      url,
+      {
+        method: requestInit.method,
+        headers: {
+          "content-type": defaultHeaders["content-type"],
+          "X-SDK-Variant": defaultHeaders["X-SDK-Variant"],
+          "X-SDK-Variant-Source": defaultHeaders["X-SDK-Variant-Source"],
+          "X-SDK-Version": defaultHeaders["X-SDK-Version"],
+          "X-Shopify-Storefront-Access-Token": defaultHeaders["X-Shopify-Storefront-Access-Token"],
+          "user-agent": defaultHeaders["user-agent"]
+        },
+        body: requestInit.body
+      }
+    ];
     const [body, response] = await fetchWithServerCache(url, requestInit, {
       cacheInstance: mutation ? void 0 : cache,
       cache: cacheOptions || CacheShort(),
+      cacheKey,
       shouldCacheResponse: checkGraphQLErrors,
-      waitUntil
+      waitUntil,
+      debugInfo: { stackLine, graphql: graphqlData }
     });
     const errorOptions = {
       response,
@@ -582,7 +607,14 @@ function createStorefrontClient(options) {
             "[h2:error:storefront.query] Cannot execute mutations"
           );
         }
-        return fetchStorefrontApi({ ...payload, query });
+        const result = fetchStorefrontApi({
+          ...payload,
+          query,
+          stackLine: getCallerStackLine?.()
+        });
+        result.catch(() => {
+        });
+        return result;
       },
       /**
        * Sends a GraphQL mutation to the Storefront API.
@@ -604,7 +636,14 @@ function createStorefrontClient(options) {
             "[h2:error:storefront.mutate] Cannot execute queries"
           );
         }
-        return fetchStorefrontApi({ ...payload, mutation });
+        const result = fetchStorefrontApi({
+          ...payload,
+          mutation,
+          stackLine: getCallerStackLine?.()
+        });
+        result.catch(() => {
+        });
+        return result;
       },
       cache,
       CacheNone,
@@ -653,7 +692,7 @@ function throwError({
   throw new ErrorConstructor(
     `[h2:error:storefront.${type}] ` + errorMessage + (requestId ? ` - Request ID: ${requestId}` : ""),
     {
-      cause: {
+      cause: JSON.stringify({
         errors,
         requestId,
         ...{
@@ -662,7 +701,7 @@ function throwError({
             variables: JSON.stringify(queryVariables)
           }
         }
-      }
+      })
     }
   );
 }
@@ -674,7 +713,10 @@ function createWithCache(options) {
     return runWithCache(cacheKey, actionFn, {
       strategy,
       cacheInstance: cache,
-      waitUntil
+      waitUntil,
+      debugInfo: {
+        stackLine: getCallerStackLine?.()
+      }
     });
   };
 }
@@ -1349,27 +1391,29 @@ function Pagination({
     [endCursor, hasPreviousPage, startCursor, nodes]
   );
   const NextLink = react.useMemo(
-    () => function NextLink2(props) {
+    () => react.forwardRef(function NextLink2(props, ref) {
       return hasNextPage ? react.createElement(react$1.Link, {
         preventScrollReset: true,
         ...props,
         to: nextPageUrl,
         state,
-        replace: true
+        replace: true,
+        ref
       }) : null;
-    },
+    }),
     [hasNextPage, nextPageUrl, state]
   );
   const PreviousLink = react.useMemo(
-    () => function PrevLink(props) {
+    () => react.forwardRef(function PrevLink(props, ref) {
       return hasPreviousPage ? react.createElement(react$1.Link, {
         preventScrollReset: true,
         ...props,
         to: previousPageUrl,
         state,
-        replace: true
+        replace: true,
+        ref
       }) : null;
-    },
+    }),
     [hasPreviousPage, previousPageUrl, state]
   );
   return children({
@@ -1490,7 +1534,7 @@ function usePagination(connection) {
   return { ...currentPageInfo, previousPageUrl, nextPageUrl, nodes };
 }
 function getPaginationVariables(request, options = { pageBy: 20 }) {
-  if (!(request instanceof Request)) {
+  if (typeof request?.url === "undefined") {
     throw new Error(
       "getPaginationVariables must be called with the Request object passed to your loader function"
     );
@@ -2277,7 +2321,7 @@ function VariantSelector({
   );
 }
 var getSelectedProductOptions = (request) => {
-  if (!(request instanceof Request))
+  if (typeof request?.url === "undefined")
     throw new TypeError(`Expected a Request instance, got ${typeof request}`);
   const searchParams = new URL(request.url).searchParams;
   const selectedOptions = [];
@@ -2372,6 +2416,38 @@ var Script = react.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx("script", { suppressHydrationWarning: true, ...props, nonce, ref });
   }
 );
+function useOptimisticData(identifier) {
+  const fetchers = react$1.useFetchers();
+  const data = {};
+  for (const fetcher of fetchers) {
+    const formData = fetcher.submission?.formData;
+    if (formData && formData.get("optimistic-identifier") === identifier) {
+      try {
+        if (formData.has("optimistic-data")) {
+          const dataInForm = JSON.parse(
+            String(formData.get("optimistic-data"))
+          );
+          Object.assign(data, dataInForm);
+        }
+      } catch {
+      }
+    }
+  }
+  return data;
+}
+function OptimisticInput({ id, data }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: "optimistic-identifier", value: id }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "hidden",
+        name: "optimistic-data",
+        value: JSON.stringify(data)
+      }
+    )
+  ] });
+}
 //! @see: https://shopify.dev/docs/api/storefront/latest/mutations/cartCreate
 //! @see https://shopify.dev/docs/api/storefront/latest/queries/cart
 //! @see: https://shopify.dev/docs/api/storefront/latest/mutations/cartLinesAdd
@@ -2474,6 +2550,7 @@ exports.CacheNone = CacheNone;
 exports.CacheShort = CacheShort;
 exports.CartForm = CartForm;
 exports.InMemoryCache = InMemoryCache;
+exports.OptimisticInput = OptimisticInput;
 exports.Pagination = Pagination;
 exports.Script = Script;
 exports.Seo = Seo;
@@ -2503,5 +2580,6 @@ exports.graphiqlLoader = graphiqlLoader;
 exports.isStorefrontApiError = isStorefrontApiError;
 exports.storefrontRedirect = storefrontRedirect;
 exports.useNonce = useNonce;
+exports.useOptimisticData = useOptimisticData;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.cjs.map