Improve error message when storefront API is not JSON (#1444)

* Propagate a better error message when the response from the storefront API is not JSON parseable
Shopify · Jun 7, 2022 · 0b4ee48 · 0b4ee48
1 parent c7dc644
commit 0b4ee48
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/.changeset/polite-years-rhyme.md b/.changeset/polite-years-rhyme.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Propagate a better error message when the response from the storefront API is not JSON parseable
diff --git a/packages/hydrogen/src/hooks/useShopQuery/hooks.ts b/packages/hydrogen/src/hooks/useShopQuery/hooks.ts
@@ -74,16 +74,23 @@ export function useShopQuery<T>({
   const body = query ? graphqlRequestBody(query, variables) : '';
   const {url, requestInit} = useCreateShopRequest(body); // eslint-disable-line react-hooks/rules-of-hooks
 
+  let text: string;
   let data: any;
   let useQueryError: any;
 
   try {
-    data = fetchSync(url, {
+    text = fetchSync(url, {
       ...requestInit,
       cache,
       preload,
       shouldCacheResponse,
-    }).json();
+    }).text();
+
+    try {
+      data = JSON.parse(text);
+    } catch (error: any) {
+      useQueryError = new Error('Unable to parse response:\n' + text);
+    }
   } catch (error: any) {
     // Pass-through thrown promise for Suspense functionality
     if (error?.then) {