From 2dc6ac4ecd4882a8e14b3054396fbdef5321ffc2 Mon Sep 17 00:00:00 2001
From: Bret Little <bret.little@shopify.com>
Date: Wed, 16 Nov 2022 15:12:43 -0500
Subject: [PATCH] Add a new utility helper for getting the myshopify domain for
 the site (#70)

---
 .changeset/witty-maps-ring.md                | 10 ++++++++
 packages/react/README.md                     | 26 ++++++++++++++++++++
 packages/react/src/storefront-client.test.ts | 18 ++++++++++++++
 packages/react/src/storefront-client.ts      | 15 +++++++++++
 4 files changed, 69 insertions(+)
 create mode 100644 .changeset/witty-maps-ring.md

diff --git a/.changeset/witty-maps-ring.md b/.changeset/witty-maps-ring.md
new file mode 100644
index 00000000..ced261f0
--- /dev/null
+++ b/.changeset/witty-maps-ring.md
@@ -0,0 +1,10 @@
+---
+'@shopify/hydrogen-react': patch
+---
+
+Add a new utility helper for getting the myshopify domain for the site:
+
+```ts
+const client = createStorefrontClient(...);
+client.getShopifyDomain() === `https://testing.myshopify.com`;
+```
diff --git a/packages/react/README.md b/packages/react/README.md
index f55b055c..b02e3de0 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -59,6 +59,7 @@ const client = createStorefrontClient({
 
 export const getStorefrontApiUrl = client.getStorefrontApiUrl;
 export const getPrivateTokenHeaders = client.getPrivateTokenHeaders;
+export const getShopifyDomain = client.getShopifyDomain;
 ```
 
 You can then use this in your server-side queries. Here's an example of using it for [NextJS's `getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props):
@@ -84,6 +85,31 @@ export async function getServerSideProps() {
 }
 ```
 
+You can also use this to proxy the liquid online store:
+
+```ts
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import {getShopifyDomain} from '../shopify-client.js';
+
+export default function handler(req, res) {
+  fetch(getShopifyDomain() + '/products', {
+    headers: {
+      /** forward some of the headers from the original request **/
+    },
+  })
+    .then((resp) => resp.text())
+    .then((text) => res.status(200).send(text))
+    .catch((error) => {
+      console.error(
+        `Error proxying the online store: ${
+          error instanceof Error ? error.stack : error
+        }`
+      );
+      res.status(500).send('Server error occurred');
+    });
+}
+```
+
 ### (Optional) Set the content type for the Storefront client
 
 By default, the Storefront client sends the `"content-type": "application/json"` header. Use the `json` content type when you have GraphQL variables and when the body is an object with the following shape:
diff --git a/packages/react/src/storefront-client.test.ts b/packages/react/src/storefront-client.test.ts
index 3f089146..105b0bb3 100644
--- a/packages/react/src/storefront-client.test.ts
+++ b/packages/react/src/storefront-client.test.ts
@@ -47,6 +47,24 @@ describe(`createStorefrontClient`, () => {
     });
   });
 
+  describe(`getShopifyDomain`, () => {
+    it(`generates a URL`, () => {
+      const client = createStorefrontClient(generateConfig());
+
+      expect(client.getShopifyDomain()).toBe(`https://testing.myshopify.com`);
+    });
+
+    it(`allows overrides`, () => {
+      const client = createStorefrontClient(generateConfig());
+
+      expect(
+        client.getShopifyDomain({
+          storeDomain: 'newdomain',
+        })
+      ).toBe(`https://newdomain.myshopify.com`);
+    });
+  });
+
   describe(`getStorefrontApiUrl`, () => {
     it(`generates a URL`, () => {
       const client = createStorefrontClient(generateConfig());
diff --git a/packages/react/src/storefront-client.ts b/packages/react/src/storefront-client.ts
index edcffa63..2069a445 100644
--- a/packages/react/src/storefront-client.ts
+++ b/packages/react/src/storefront-client.ts
@@ -33,6 +33,11 @@ export function createStorefrontClient({
   }
 
   return {
+    getShopifyDomain(overrideProps) {
+      return `https://${
+        overrideProps?.storeDomain ?? storeDomain
+      }.myshopify.com`;
+    },
     getStorefrontApiUrl(overrideProps) {
       return `https://${
         overrideProps?.storeDomain ?? storeDomain
@@ -128,6 +133,16 @@ type OverrideTokenHeaderProps = Partial<
 >;
 
 type StorefrontClientReturn = {
+  /**
+   * Creates the fully-qualified URL to your myshopify.com domain.
+   *
+   * By default, it will use the config you passed in when calling `createStorefrontClient()`. However, you can override the following settings on each invocation of `getShopifyDomain({...})`:
+   *
+   * - `storeDomain`
+   */
+  getShopifyDomain: (
+    props?: Partial<Pick<StorefrontClientProps, 'storeDomain'>>
+  ) => string;
   /**
    * Creates the fully-qualified URL to your store's GraphQL endpoint.
    *