refactor(web): replace graphql-tag by graphql parse (#22194)

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

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",

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;

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;

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;