From 3bcdba5452b8b7b7940b3e8570dbfd6837e4788b Mon Sep 17 00:00:00 2001
From: Nicola Molinari <nicola.molinari@commercetools.com>
Date: Thu, 12 Dec 2024 15:30:20 +0100
Subject: [PATCH] refactor: append graphql operation name as query param
 (#3679)

---
 .changeset/bright-olives-yell.md              |  5 +++++
 .../src/configure-apollo.ts                   | 21 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/bright-olives-yell.md

diff --git a/.changeset/bright-olives-yell.md b/.changeset/bright-olives-yell.md
new file mode 100644
index 0000000000..1c7b6ec39e
--- /dev/null
+++ b/.changeset/bright-olives-yell.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-shell-connectors': patch
+---
+
+Append the GraphQL operation name as a query parameter to the `/graphql` endpoint. This is useful for debugging purposes, for example when inspecting the network tab.
diff --git a/packages/application-shell-connectors/src/configure-apollo.ts b/packages/application-shell-connectors/src/configure-apollo.ts
index 522a5068cc..fd6dee8146 100644
--- a/packages/application-shell-connectors/src/configure-apollo.ts
+++ b/packages/application-shell-connectors/src/configure-apollo.ts
@@ -23,10 +23,29 @@ type TApolloClientOptions = {
   restLink?: ApolloLink;
 };
 
+// Inspired by https://www.apollographql.com/docs/react/api/link/apollo-link-http#dynamic-uri
+const customFetch: WindowOrWorkerGlobalScope['fetch'] = (uri, options) => {
+  const searchParams = new URLSearchParams();
+  // We attempt to read the GraphQL `operationName` to append it as a query parameter.
+  // This is only useful for debugging purposes (network tab) and does not have any functional implication.
+  if (options?.body)
+    try {
+      const parsed = JSON.parse(options.body as string);
+      searchParams.set('op', parsed.operationName);
+    } catch {
+      // noop
+    }
+
+  return fetch(
+    searchParams.size > 0 ? `${uri}?${searchParams.toString()}` : uri,
+    options
+  );
+};
+
 const createApolloLink = (options: TApolloClientOptions = {}) => {
   const httpLink = createHttpLink({
     uri: `${getMcApiUrl()}/graphql`,
-    fetch,
+    fetch: customFetch,
   });
 
   // The order of links is IMPORTANT!