From afaf4ad234efd280f9ad6faacb8f3fcb9bc29afd Mon Sep 17 00:00:00 2001
From: Hongbo Miao <3375461+hongbo-miao@users.noreply.github.com>
Date: Wed, 1 Jan 2025 16:27:01 -0800
Subject: [PATCH] refactor(web): replace graphql-tag by graphql parse (#22194)

---
 README.md                                  |  1 -
 web/package-lock.json                      | 16 ----------------
 web/package.json                           |  1 -
 web/src/Home/queries/meNamesFragment.ts    |  6 +++---
 web/src/Home/queries/meQuery.ts            |  9 +++++----
 web/src/health/queries/pingSubscription.ts |  9 +++++----
 6 files changed, 13 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index 40f5924fcf..a6d02f34c9 100644
--- a/README.md
+++ b/README.md
@@ -68,7 +68,6 @@ The diagram illustrates the repository's architecture, which is considered overl
 - **Vite** - JavaScript build tool and development server
 - **TanStack Query** - Hooks for fetching, caching and updating asynchronous data
 - **RxJS** - Asynchronous programming with observable streams
-- **graphql-tag** - GraphQL query parsing
 - **Bulma** - CSS framework
 - **PurgeCSS** - Unused CSS removing
 - **Jest** - Unit testing, snapshot testing
diff --git a/web/package-lock.json b/web/package-lock.json
index ab0ecd0ab5..d48c97cb12 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -23,7 +23,6 @@
         "bulma": "1.0.3",
         "clsx": "2.1.1",
         "graphql": "16.10.0",
-        "graphql-tag": "2.12.6",
         "graphql-ws": "5.16.0",
         "normalize.css": "8.0.1",
         "react": "19.0.0",
@@ -10088,21 +10087,6 @@
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
     },
-    "node_modules/graphql-tag": {
-      "version": "2.12.6",
-      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.6.tgz",
-      "integrity": "sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
-      }
-    },
     "node_modules/graphql-ws": {
       "version": "5.16.0",
       "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-5.16.0.tgz",
diff --git a/web/package.json b/web/package.json
index ef473e0c55..3dd272ab4a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -69,7 +69,6 @@
     "bulma": "1.0.3",
     "clsx": "2.1.1",
     "graphql": "16.10.0",
-    "graphql-tag": "2.12.6",
     "graphql-ws": "5.16.0",
     "normalize.css": "8.0.1",
     "react": "19.0.0",
diff --git a/web/src/Home/queries/meNamesFragment.ts b/web/src/Home/queries/meNamesFragment.ts
index 79925eed81..368be36b97 100644
--- a/web/src/Home/queries/meNamesFragment.ts
+++ b/web/src/Home/queries/meNamesFragment.ts
@@ -1,10 +1,10 @@
-import { gql } from 'graphql-tag';
+import { parse } from 'graphql';
 
-const meNamesFragment = gql`
+const meNamesFragment = parse(`
   fragment meNames on Me {
     firstName
     lastName
   }
-`;
+`);
 
 export default meNamesFragment;
diff --git a/web/src/Home/queries/meQuery.ts b/web/src/Home/queries/meQuery.ts
index 0a6b41b9dc..63100c6664 100644
--- a/web/src/Home/queries/meQuery.ts
+++ b/web/src/Home/queries/meQuery.ts
@@ -1,8 +1,8 @@
-import { print } from 'graphql';
-import { gql } from 'graphql-tag';
+import { print, parse } from 'graphql';
 import meNamesFragment from './meNamesFragment';
 
-const meQuery = print(gql`
+const meQuery = print(
+  parse(`
   query Me {
     me {
       name
@@ -11,6 +11,7 @@ const meQuery = print(gql`
     }
   }
   ${meNamesFragment}
-`);
+`),
+);
 
 export default meQuery;
diff --git a/web/src/health/queries/pingSubscription.ts b/web/src/health/queries/pingSubscription.ts
index 34638d0e4a..e36a451e42 100644
--- a/web/src/health/queries/pingSubscription.ts
+++ b/web/src/health/queries/pingSubscription.ts
@@ -1,10 +1,11 @@
-import { print } from 'graphql';
-import { gql } from 'graphql-tag';
+import { print, parse } from 'graphql';
 
-const pingSubscription = print(gql`
+const pingSubscription = print(
+  parse(`
   subscription {
     ping
   }
-`);
+`),
+);
 
 export default pingSubscription;