Add a new utility helper for getting the myshopify domain for the site (

#70)

.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`;
+```

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:

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());

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.
    *