Fix bug in storefront client. (#125)

Update the nextjs app to reflect that

Fix issue with latest graphql codegen needing ts-node

Add tests

Author: frehner

.changeset/chilled-wombats-allow.md

@@ -0,0 +1,9 @@
+---
+'@shopify/storefront-kit-react': patch
+---
+
+In the version 2023.1.1 "Breaking Changes" section, we said
+
+> The storefront client and ShopifyProvider now provide the `storeDomain` exactly as it is received; it's recommended that you pass the domain with the protocol and the fully-qualified domain name for your Storefront. For example: `https://hydrogen-test.myshopify.com`
+
+Unfortunately, the Storefront Client wasn't fully updated to actually do that. This update corrects this bug, but also means that you need to provide a full URL to your Storefront Domain (as was originally intended in our breaking change update).

apps/nextjs/gql/fragment-masking.ts

@@ -31,12 +31,12 @@ export function useFragment<TType>(
 export function useFragment<TType>(
   _documentNode: DocumentNode<TType, any>,
   fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>> | null | undefined
-): ReadonlyArray<TType> | null | undefined
+): ReadonlyArray<TType> | null | undefined;
 export function useFragment<TType>(
   _documentNode: DocumentNode<TType, any>,
   fragmentType: FragmentType<DocumentNode<TType, any>> | ReadonlyArray<FragmentType<DocumentNode<TType, any>>> | null | undefined
 ): TType | ReadonlyArray<TType> | null | undefined {
-  return fragmentType as any
+  return fragmentType as any;
 }
 
 

apps/nextjs/gql/gql.ts

@@ -19,6 +19,20 @@ const documents = {
     "\n  query Search($searchTerm: String) {\n    products(first: 1, sortKey: RELEVANCE, query: $searchTerm) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n": types.SearchDocument,
 };
 
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export function graphql(source: string): unknown;
+
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -36,20 +50,6 @@ export function graphql(source: "\n  query Product {\n    shop {\n      name\n
  */
 export function graphql(source: "\n  query Search($searchTerm: String) {\n    products(first: 1, sortKey: RELEVANCE, query: $searchTerm) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n"): (typeof documents)["\n  query Search($searchTerm: String) {\n    products(first: 1, sortKey: RELEVANCE, query: $searchTerm) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n"];
 
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- *
- *
- * @example
- * ```ts
- * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
- * ```
- *
- * The query argument is unknown!
- * Please regenerate the types.
-**/
-export function graphql(source: string): unknown;
-
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
 }

apps/nextjs/gql/index.ts

@@ -1,2 +1,2 @@
-export * from "./gql"
-export * from "./fragment-masking"
+export * from "./gql";
+export * from "./fragment-masking";

apps/nextjs/package.json

@@ -19,7 +19,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "2.16.4",
+    "@graphql-codegen/cli": "2.16.3",
     "@graphql-codegen/client-preset": "1.2.6",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",

apps/nextjs/pages/_app.tsx

@@ -56,7 +56,7 @@ export default function App({Component, pageProps}: AppProps) {
   return (
     <ShopifyProvider
       shopifyConfig={{
-        storeDomain: `hydrogen-preview`,
+        storeDomain: `https://hydrogen-preview.myshopify.com`,
         storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
         storefrontApiVersion: '2023-01',
         locale: 'EN-US',

apps/nextjs/src/shopify-client.ts

@@ -1,7 +1,7 @@
 import {createStorefrontClient} from '@shopify/storefront-kit-react';
 
 export const shopClient = createStorefrontClient({
-  storeDomain: 'hydrogen-preview',
+  storeDomain: 'https://hydrogen-preview.myshopify.com',
   // TODO: convert to 'privateStorefrontToken'!
   publicStorefrontToken: '3b580e70970c4528da70c98e097c2fa0',
   storefrontApiVersion: '2023-01',

packages/react/README.md

@@ -2,7 +2,7 @@
 
 # React Storefront Kit
 
-React Storefront Kit provides React components, reusable functions, and utilities for interacting with the Storefront API. 
+React Storefront Kit provides React components, reusable functions, and utilities for interacting with the Storefront API.
 
 **IMPORTANT:** Refer to how this package is [versioned](../../README.md#versioning).
 

packages/react/src/ShopifyProvider.test.tsx

@@ -169,6 +169,67 @@ describe('<ShopifyProvider/>', () => {
       ).toBe('https://test.myshopify.com');
     });
   });
+
+  describe(`getStorefrontApiUrl`, () => {
+    it(`generates the API URL`, () => {
+      const {result} = renderHook(() => useShop(), {
+        wrapper: ({children}) => (
+          <ShopifyProvider
+            shopifyConfig={{
+              ...SHOPIFY_CONFIG,
+              storeDomain: 'https://notashop.myshopify.com',
+            }}
+          >
+            {children}
+          </ShopifyProvider>
+        ),
+      });
+
+      expect(result.current.getStorefrontApiUrl()).toBe(
+        'https://notashop.myshopify.com/api/2023-01/graphql.json'
+      );
+    });
+
+    it(`allows overrides`, () => {
+      const {result} = renderHook(() => useShop(), {
+        wrapper: ({children}) => (
+          <ShopifyProvider
+            shopifyConfig={{
+              ...SHOPIFY_CONFIG,
+              storeDomain: 'https://notashop.myshopify.com',
+            }}
+          >
+            {children}
+          </ShopifyProvider>
+        ),
+      });
+
+      expect(
+        result.current.getStorefrontApiUrl({
+          storeDomain: 'https://test.myshopify.com',
+        })
+      ).toBe('https://test.myshopify.com/api/2023-01/graphql.json');
+    });
+
+    it(`handles when a '/' is at the end of the url and doesn't add an extra one`, () => {
+      const {result} = renderHook(() => useShop(), {
+        wrapper: ({children}) => (
+          <ShopifyProvider
+            shopifyConfig={{
+              ...SHOPIFY_CONFIG,
+              storeDomain: 'https://notashop.myshopify.com/',
+            }}
+          >
+            {children}
+          </ShopifyProvider>
+        ),
+      });
+
+      expect(result.current.getStorefrontApiUrl()).toBe(
+        'https://notashop.myshopify.com/api/2023-01/graphql.json'
+      );
+    });
+  });
 });
 
 export function getShopifyConfig(

packages/react/src/ShopifyProvider.tsx

@@ -65,16 +65,12 @@ export function ShopifyProvider({
       },
       getShopifyDomain,
       getStorefrontApiUrl(overrideProps) {
-        if (overrideProps?.storeDomain?.includes('.myshopify.com')) {
-          if (__HYDROGEN_DEV__) {
-            console.warn(
-              `<ShopifyProvider/>: passing a 'storeDomain' prop that includes '.myshopify.com' will be unsupported in the future. Passing only the subdomain (for example, if the URL is 'test.myshopify.com', passing in 'test') will be the supported way going forward.`
-            );
-          }
-        }
-        return `${getShopifyDomain({
+        const finalDomainUrl = getShopifyDomain({
           storeDomain: overrideProps?.storeDomain ?? shopifyConfig.storeDomain,
-        })}/api/${
+        });
+        return `${finalDomainUrl}${
+          finalDomainUrl.endsWith('/') ? '' : '/'
+        }api/${
           overrideProps?.storefrontApiVersion ??
           shopifyConfig.storefrontApiVersion
         }/graphql.json`;

packages/react/src/storefront-client.test.ts

@@ -59,7 +59,7 @@ describe(`createStorefrontClient`, () => {
 
       expect(
         client.getShopifyDomain({
-          storeDomain: 'newdomain',
+          storeDomain: 'https://newdomain.myshopify.com',
         })
       ).toBe(`https://newdomain.myshopify.com`);
     });
@@ -79,11 +79,23 @@ describe(`createStorefrontClient`, () => {
 
       expect(
         client.getStorefrontApiUrl({
-          storeDomain: 'newdomain',
+          storeDomain: 'https://newdomain.myshopify.com',
           storefrontApiVersion: '2000-01',
         })
       ).toBe(`https://newdomain.myshopify.com/api/2000-01/graphql.json`);
     });
+
+    it(`handles when a '/' is at the end of the url and doesn't add an extra one`, () => {
+      const defaultConfig = generateConfig();
+      const client = createStorefrontClient({
+        ...defaultConfig,
+        storeDomain: defaultConfig.storeDomain + '/',
+      });
+
+      expect(client.getStorefrontApiUrl()).toBe(
+        `https://testing.myshopify.com/api/${SFAPI_VERSION}/graphql.json`
+      );
+    });
   });
 
   describe(`getPrivateTokenHeaders`, () => {
@@ -166,7 +178,7 @@ function generateConfig(
 ): StorefrontClientProps {
   return {
     storefrontApiVersion: SFAPI_VERSION,
-    storeDomain: 'testing',
+    storeDomain: 'https://testing.myshopify.com',
     ...props,
   };
 }

packages/react/src/storefront-client.ts

@@ -42,14 +42,11 @@ export function createStorefrontClient({
 
   return {
     getShopifyDomain(overrideProps) {
-      return `https://${
-        overrideProps?.storeDomain ?? storeDomain
-      }.myshopify.com`;
+      return overrideProps?.storeDomain ?? storeDomain;
     },
     getStorefrontApiUrl(overrideProps) {
-      return `https://${
-        overrideProps?.storeDomain ?? storeDomain
-      }.myshopify.com/api/${
+      const finalDomainUrl = overrideProps?.storeDomain ?? storeDomain;
+      return `${finalDomainUrl}${finalDomainUrl.endsWith('/') ? '' : '/'}api/${
         overrideProps?.storefrontApiVersion ?? storefrontApiVersion
       }/graphql.json`;
     },