Add protocol automatically to storeDomain (#985)

* Auto add protocol if missing * Stop adding protocol manually to storeDomain parameter * Changesets * Refactor
Shopify · Jun 8, 2023 · 7b4afea · 7b4afea
1 parent 5124d61
commit 7b4afea
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 17 deletions.
diff --git a/.changeset/clean-experts-relax.md b/.changeset/clean-experts-relax.md
@@ -0,0 +1,7 @@
+---
+'@shopify/hydrogen-react': patch
+'@shopify/hydrogen': patch
+'demo-store': patch
+---
+
+A default `https://` protocol is now added automatically to `storeDomain` if missing.
diff --git a/examples/express/server.js b/examples/express/server.js
@@ -87,7 +87,7 @@ async function getContext(req) {
     i18n: {language: 'EN', country: 'US'},
     publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
     privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
-    storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
+    storeDomain: env.PUBLIC_STORE_DOMAIN,
     storefrontId: env.PUBLIC_STOREFRONT_ID,
     storefrontHeaders: {
       requestGroupId: req.get('request-id'),

diff --git a/packages/hydrogen-react/src/storefront-client.test.ts b/packages/hydrogen-react/src/storefront-client.test.ts
@@ -64,6 +64,14 @@ describe(`createStorefrontClient`, () => {
         }),
       ).toBe(`https://newdomain.myshopify.com`);
     });
+
+    it(`automatically adds protocol if missing`, () => {
+      const client = createStorefrontClient(
+        generateConfig({storeDomain: 'newdomain.myshopify.com'}),
+      );
+
+      expect(client.getShopifyDomain()).toBe(`https://newdomain.myshopify.com`);
+    });
   });
 
   describe(`getStorefrontApiUrl`, () => {
@@ -97,6 +105,16 @@ describe(`createStorefrontClient`, () => {
         `https://testing.myshopify.com/api/${SFAPI_VERSION}/graphql.json`,
       );
     });
+
+    it(`automatically adds protocol if missing`, () => {
+      const client = createStorefrontClient(
+        generateConfig({storeDomain: 'newdomain.myshopify.com'}),
+      );
+
+      expect(client.getStorefrontApiUrl()).toBe(
+        `https://newdomain.myshopify.com/api/${SFAPI_VERSION}/graphql.json`,
+      );
+    });
   });
 
   describe(`getPrivateTokenHeaders`, () => {
@@ -178,7 +196,6 @@ function generateConfig(
   props?: Partial<StorefrontClientProps>,
 ): StorefrontClientProps {
   return {
-    storefrontApiVersion: SFAPI_VERSION,
     storeDomain: 'https://testing.myshopify.com',
     ...props,
   };

diff --git a/packages/hydrogen-react/src/storefront-client.ts b/packages/hydrogen-react/src/storefront-client.ts
@@ -53,13 +53,20 @@ export function createStorefrontClient(
     );
   }
 
+  const getShopifyDomain: StorefrontClientReturn['getShopifyDomain'] = (
+    overrideProps,
+  ) => {
+    const domain = overrideProps?.storeDomain ?? storeDomain;
+    return domain.includes('://') ? domain : `https://${domain}`;
+  };
+
   return {
-    getShopifyDomain(overrideProps): string {
-      return overrideProps?.storeDomain ?? storeDomain;
-    },
+    getShopifyDomain,
     getStorefrontApiUrl(overrideProps): string {
-      const finalDomainUrl = overrideProps?.storeDomain ?? storeDomain;
-      return `${finalDomainUrl}${finalDomainUrl.endsWith('/') ? '' : '/'}api/${
+      const domain = getShopifyDomain(overrideProps);
+      const apiUrl = domain + (domain.endsWith('/') ? 'api' : '/api');
+
+      return `${apiUrl}/${
         overrideProps?.storefrontApiVersion ?? storefrontApiVersion
       }/graphql.json`;
     },

diff --git a/packages/hydrogen/docs/staticPages/authenticate.server.js b/packages/hydrogen/docs/staticPages/authenticate.server.js
@@ -15,7 +15,7 @@ const {storefront} = createStorefrontClient({
   // `env` provides access to runtime data, including environment variables
   publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
   privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
-  storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
+  storeDomain: env.PUBLIC_STORE_DOMAIN,
   storefrontId: env.PUBLIC_STOREFRONT_ID,
   storefrontHeaders: getStorefrontHeaders(request),
 });
diff --git a/packages/hydrogen/src/routing/storefrontRedirect.example.js b/packages/hydrogen/src/routing/storefrontRedirect.example.js
@@ -12,7 +12,7 @@ export default {
       waitUntil: (p) => executionContext.waitUntil(p),
       privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
       publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
-      storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
+      storeDomain: env.PUBLIC_STORE_DOMAIN,
       storefrontHeaders: getStorefrontHeaders(request),
     });
 

diff --git a/packages/hydrogen/src/routing/storefrontRedirect.example.ts b/packages/hydrogen/src/routing/storefrontRedirect.example.ts
@@ -12,7 +12,7 @@ export default {
       waitUntil: (p: Promise<unknown>) => executionContext.waitUntil(p),
       privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
       publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
-      storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
+      storeDomain: env.PUBLIC_STORE_DOMAIN,
       storefrontHeaders: getStorefrontHeaders(request),
     });
 

diff --git a/packages/hydrogen/src/storefrontClient.example.js b/packages/hydrogen/src/storefrontClient.example.js
@@ -15,8 +15,8 @@ export default {
       privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
       /* Public Storefront API token for your store */
       publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
-      /* Your store domain: "https://{shop}.myshopify.com" */
-      storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
+      /* Your store domain: "{shop}.myshopify.com" */
+      storeDomain: env.PUBLIC_STORE_DOMAIN,
       /**
        * Storefront API headers containing:
        * - buyerIp: The IP address of the customer.

diff --git a/packages/hydrogen/src/storefrontClient.example.ts b/packages/hydrogen/src/storefrontClient.example.ts
@@ -21,8 +21,8 @@ export default {
       privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
       /* Public Storefront API token for your store */
       publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
-      /* Your store domain: "https://{shop}.myshopify.com" */
-      storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
+      /* Your store domain: "{shop}.myshopify.com" */
+      storeDomain: env.PUBLIC_STORE_DOMAIN,
       /**
        * Storefront API headers containing:
        * - buyerIp: The IP address of the customer.

diff --git a/templates/demo-store/server.ts b/templates/demo-store/server.ts
@@ -41,7 +41,7 @@ export default {
         i18n: getLocaleFromRequest(request),
         publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
         privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
-        storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
+        storeDomain: env.PUBLIC_STORE_DOMAIN,
         storefrontId: env.PUBLIC_STOREFRONT_ID,
         storefrontHeaders: getStorefrontHeaders(request),
       });

diff --git a/templates/hello-world/server.ts b/templates/hello-world/server.ts
@@ -41,7 +41,7 @@ export default {
         i18n: {language: 'EN', country: 'US'},
         publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
         privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
-        storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
+        storeDomain: env.PUBLIC_STORE_DOMAIN,
         storefrontId: env.PUBLIC_STOREFRONT_ID,
         storefrontHeaders: getStorefrontHeaders(request),
       });

diff --git a/templates/skeleton/server.ts b/templates/skeleton/server.ts
@@ -41,7 +41,7 @@ export default {
         i18n: {language: 'EN', country: 'US'},
         publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
         privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
-        storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
+        storeDomain: env.PUBLIC_STORE_DOMAIN,
         storefrontId: env.PUBLIC_STOREFRONT_ID,
         storefrontHeaders: getStorefrontHeaders(request),
       });