Expose parseGid and use it internally (#845)

* Expose parseGid and use it internally * Update packages/hydrogen-react/src/parse-gid.doc.ts Co-authored-by: Matt Seccafien <matt.seccafien@shopify.com> * Ensure hydrogen-react is built before cli * update docs * Update .changeset/nervous-bears-look.md Co-authored-by: Daniel Rios <daniel.riospavia@shopify.com> * Revert "Ensure hydrogen-react is built before cli" This reverts commit 20b7c1b. * have cli use its own implementation of parsegid for now * Fix docs errors --------- Co-authored-by: Matt Seccafien <matt.seccafien@shopify.com> Co-authored-by: Daniel Rios <daniel.riospavia@shopify.com>
Shopify · May 9, 2023 · 0a009a3 · 0a009a3
1 parent 96dad7a
commit 0a009a3
Show file tree

Hide file tree

Showing 10 changed files with 132 additions and 10 deletions.
diff --git a/.changeset/nervous-bears-look.md b/.changeset/nervous-bears-look.md
@@ -0,0 +1,15 @@
+---
+'@shopify/hydrogen-react': patch
+'@shopify/hydrogen': patch
+---
+
+Adds `parseGid()` which is a helper function that takes in a [Shopify GID](https://shopify.dev/docs/api/usage/gids) and returns the `resource` and `id` from it. For example:
+
+```js
+import {parseGid} from '@shopify/hydrogen-react';
+
+const {id, resource} = parseGid('gid://shopify/Order/123');
+
+console.log(id); // 123
+console.log(resource); // Order
+```
diff --git a/packages/cli/src/lib/graphql.test.ts b/packages/cli/src/lib/graphql.test.ts
@@ -1,15 +1,11 @@
 import {describe, it, expect} from 'vitest';
 import {AbortError} from '@shopify/cli-kit/node/error';
-
 import {parseGid} from './graphql.js';
-
 describe('parseGid', () => {
   it('returns an ID', () => {
     const id = parseGid('gid://shopify/HydrogenStorefront/324');
-
     expect(id).toStrictEqual('324');
   });
-
   describe('when the global ID is invalid', () => {
     it('throws an error', () => {
       expect(() => parseGid('321asd')).toThrow(AbortError);

diff --git a/packages/cli/src/lib/graphql.ts b/packages/cli/src/lib/graphql.ts
@@ -24,17 +24,14 @@ export async function adminRequest<T>(
 }
 
 const GID_REGEXP = /gid:\/\/shopify\/\w*\/(\d+)/;
-
 /**
  * @param gid a Global ID to parse (e.g. 'gid://shopify/HydrogenStorefront/1')
  * @returns the ID of the record (e.g. '1')
  */
 export function parseGid(gid: string): string {
   const matches = GID_REGEXP.exec(gid);
-
   if (matches && matches[1] !== undefined) {
     return matches[1];
   }
-
   throw new AbortError(`Invalid Global ID: ${gid}`);
 }
diff --git a/packages/hydrogen-react/docs/generated/generated_docs_data.json b/packages/hydrogen-react/docs/generated/generated_docs_data.json
@@ -6353,6 +6353,78 @@
       }
     ]
   },
+  {
+    "name": "parseGid",
+    "category": "utilities",
+    "isVisualComponent": false,
+    "related": [],
+    "description": "\n    Parses [Shopify Global ID (GID)](https://shopify.dev/api/usage/gids) and returns the resource type and ID.\n  ",
+    "type": "gear",
+    "defaultExample": {
+      "description": "I am the default example",
+      "codeblock": {
+        "tabs": [
+          {
+            "title": "JavaScript",
+            "code": "import {parseGid} from '@shopify/hydrogen-react';\n\nconst {id, resource} = parseGid('gid://shopify/Order/123');\n\nconsole.log(id); // 123\nconsole.log(resource); // Cart\n",
+            "language": "js"
+          }
+        ],
+        "title": "Example code"
+      }
+    },
+    "definitions": [
+      {
+        "title": "Props",
+        "description": "",
+        "type": "ParseGidGeneratedType",
+        "typeDefinitions": {
+          "ParseGidGeneratedType": {
+            "filePath": "/analytics-utils.ts",
+            "name": "ParseGidGeneratedType",
+            "params": [
+              {
+                "name": "gid",
+                "description": "A shopify GID (string)",
+                "value": "string",
+                "filePath": "/analytics-utils.ts"
+              }
+            ],
+            "returns": {
+              "filePath": "/analytics-utils.ts",
+              "description": "",
+              "name": "ShopifyGid",
+              "value": "ShopifyGid"
+            },
+            "value": "export function parseGid(gid: string | undefined): ShopifyGid {\n  const defaultReturn = {id: '', resource: null};\n\n  if (typeof gid !== 'string') {\n    return defaultReturn;\n  }\n\n  // TODO: add support for parsing query parameters on complex gids\n  // Reference: https://shopify.dev/api/usage/gids\n  const matches = gid.match(/^gid:\\/\\/shopify\\/(\\w+)\\/([^/]+)/);\n\n  if (!matches || matches.length === 1) {\n    return defaultReturn;\n  }\n  const id = matches[2] ?? null;\n  const resource = matches[1] ?? null;\n\n  return {id, resource};\n}"
+          },
+          "ShopifyGid": {
+            "filePath": "/analytics-types.ts",
+            "syntaxKind": "TypeAliasDeclaration",
+            "name": "ShopifyGid",
+            "value": "{\n  id: string;\n  resource: string | null;\n}",
+            "description": "",
+            "members": [
+              {
+                "filePath": "/analytics-types.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "id",
+                "value": "string",
+                "description": ""
+              },
+              {
+                "filePath": "/analytics-types.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "resource",
+                "value": "string",
+                "description": ""
+              }
+            ]
+          }
+        }
+      }
+    ]
+  },
   {
     "name": "parseMetafield",
     "category": "utilities",

diff --git a/packages/hydrogen-react/src/analytics-types.ts b/packages/hydrogen-react/src/analytics-types.ts
@@ -177,7 +177,7 @@ export type ShopifyCookies = {
   [SHOPIFY_S]: string;
 };
 
-export type ShopifyGId = {
+export type ShopifyGid = {
   id: string;
   resource: string | null;
 };
diff --git a/packages/hydrogen-react/src/analytics-utils.ts b/packages/hydrogen-react/src/analytics-utils.ts
@@ -1,7 +1,7 @@
 import type {
   ShopifyMonorailPayload,
   ShopifyMonorailEvent,
-  ShopifyGId,
+  ShopifyGid,
 } from './analytics-types.js';
 
 /**
@@ -37,7 +37,7 @@ export function schemaWrapper(
  * // => id = "abc123", resource = 'Cart'
  * ```
  **/
-export function parseGid(gid: string | undefined): ShopifyGId {
+export function parseGid(gid: string | undefined): ShopifyGid {
   const defaultReturn = {id: '', resource: null};
 
   if (typeof gid !== 'string') {

diff --git a/packages/hydrogen-react/src/index.ts b/packages/hydrogen-react/src/index.ts
@@ -16,6 +16,7 @@ export type {
   ShopifyPageView,
   ShopifyPageViewPayload,
 } from './analytics-types.js';
+export {parseGid} from './analytics-utils.js';
 export {BuyNowButton} from './BuyNowButton.js';
 export {
   SHOPIFY_S,

diff --git a/packages/hydrogen-react/src/parse-gid.doc.ts b/packages/hydrogen-react/src/parse-gid.doc.ts
@@ -0,0 +1,34 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'parseGid',
+  category: 'utilities',
+  isVisualComponent: false,
+  related: [],
+  description: `
+    Parses [Shopify Global ID (GID)](https://shopify.dev/api/usage/gids) and returns the resource type and ID.
+  `,
+  type: 'gear',
+  defaultExample: {
+    description: 'I am the default example',
+    codeblock: {
+      tabs: [
+        {
+          title: 'JavaScript',
+          code: './parse-gid.example.js',
+          language: 'js',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: 'Props',
+      type: 'ParseGidGeneratedType',
+      description: '',
+    },
+  ],
+};
+
+export default data;
diff --git a/packages/hydrogen-react/src/parse-gid.example.js b/packages/hydrogen-react/src/parse-gid.example.js
@@ -0,0 +1,6 @@
+import {parseGid} from '@shopify/hydrogen-react';
+
+const {id, resource} = parseGid('gid://shopify/Order/123');
+
+console.log(id); // 123
+console.log(resource); // Order
diff --git a/packages/hydrogen/src/index.ts b/packages/hydrogen/src/index.ts
@@ -27,6 +27,7 @@ export {
   MediaFile,
   ModelViewer,
   Money,
+  parseGid,
   parseMetafield,
   sendShopifyAnalytics,
   ShopifySalesChannel,