feat(gatsby-source-shopify): Add support for custom domains (#20204)

* Allow shopName to be a url with a custom domain.

* Document use of url for shopName.

* Fix lint errors, add test.

Author: Michael Elsdörfer

packages/gatsby-source-shopify/README.md

@@ -37,6 +37,9 @@ plugins: [
       // The domain name of your Shopify shop. This is required.
       // Example: 'gatsby-source-shopify-test-shop' if your Shopify address is
       // 'gatsby-source-shopify-test-shop.myshopify.com'.
+      // If you are running your shop on a custom domain, you need to use that
+      // as the shop name, without a trailing slash, for example:
+      // shopName: "gatsby-shop.com",
       shopName: "gatsby-source-shopify-test-shop",
 
       // An API access token to your Shopify shop. This is required.

packages/gatsby-source-shopify/src/__tests__/create-client.js

@@ -0,0 +1,15 @@
+const { createClient } = require(`../create-client`)
+
+describe(`create-client`, () => {
+  it(`Allows a domain as shop name`, () => {
+    expect(createClient(`my-shop.com`, `token`).url).toEqual(
+      expect.not.stringContaining(`myshopify.com`)
+    )
+  })
+
+  it(`Allows a non-domain shop name`, () => {
+    expect(createClient(`my-shop`, `token`).url).toEqual(
+      expect.stringContaining(`myshopify.com`)
+    )
+  })
+})

packages/gatsby-source-shopify/src/create-client.js

@@ -2,9 +2,16 @@ import { GraphQLClient } from "graphql-request"
 /**
  * Create a Shopify Storefront GraphQL client for the provided name and token.
  */
-export const createClient = (shopName, accessToken) =>
-  new GraphQLClient(`https://${shopName}.myshopify.com/api/graphql`, {
+export const createClient = (shopName, accessToken) => {
+  let url
+  if (shopName.includes(`.`)) {
+    url = `https://${shopName}/api/graphql`
+  } else {
+    url = `https://${shopName}.myshopify.com/api/graphql`
+  }
+  return new GraphQLClient(url, {
     headers: {
       "X-Shopify-Storefront-Access-Token": accessToken,
     },
   })
+}