diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/Bug16702_Spec.ts b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/Bug16702_Spec.ts
new file mode 100644
index 0000000000..81663dd402
--- /dev/null
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/Bug16702_Spec.ts
@@ -0,0 +1,83 @@
+import datasourceFormData from "../../../../fixtures/datasources.json";
+import {
+  ERROR_ACTION_EXECUTE_FAIL,
+  createMessage,
+} from "../../../../support/Objects/CommonErrorMessages";
+import { ObjectsRegistry } from "../../../../support/Objects/Registry";
+
+const locator = ObjectsRegistry.CommonLocators,
+  apiPage = ObjectsRegistry.ApiPage,
+  agHelper = ObjectsRegistry.AggregateHelper,
+  dataSources = ObjectsRegistry.DataSources,
+  jsEditor = ObjectsRegistry.JSEditor;
+
+const GRAPHQL_LIMIT_QUERY = `
+  query {
+    launchesPast(limit: "__limit__", offset: "__offset__") {
+      mission_name
+      rocket {
+        rocket_name
+`;
+
+const GRAPHQL_RESPONSE = {
+  mission_name: "Sentinel-6 Michael Freilich"
+};
+
+describe("Binding Expressions should not be truncated in Url and path extraction", function() {
+  it("Bug 16702, Moustache+Quotes formatting goes wrong in graphql body resulting in autocomplete failure", function() {
+    const jsObjectBody = `export default {
+      limitValue: 1,
+      offsetValue: 1,
+    }`;
+
+    jsEditor.CreateJSObject(jsObjectBody, {
+      paste: true,
+      completeReplace: true,
+      toRun: false,
+      shouldCreateNewJSObj: true,
+    });
+
+    apiPage.CreateAndFillGraphqlApi(datasourceFormData.graphqlApiUrl);
+    dataSources.UpdateGraphqlQueryAndVariable({
+      query: GRAPHQL_LIMIT_QUERY,
+    });
+
+    cy.get(".t--graphql-query-editor pre.CodeMirror-line span")
+      .contains("__limit__")
+      .click()
+      .type("{{JSObject1.");
+    agHelper.GetNClickByContains(locator._hints, "limitValue");
+
+    /* Start: Block of code to remove error of detached node of codemirror for cypress reference */
+    cy.get(".t--entity-name")
+      .contains("Queries/JS")
+      .click();
+
+    cy.wait(1000);
+    cy.get(".t--entity-name")
+      .contains("JSObject1")
+      .click();
+
+    cy.get(".t--entity-name")
+      .contains("Api1")
+      .click();
+
+    /* End: Block of code to remove error of detached node of codemirror for cypress reference */
+
+    cy.get(".t--graphql-query-editor pre.CodeMirror-line span")
+      .contains("__offset__")
+      .should($el => {
+        expect(Cypress.dom.isDetached($el)).to.false;
+      })
+      .click({ force: true })
+      .type("{{JSObject1.");
+    agHelper.GetNClickByContains(locator._hints, "offsetValue");
+
+    cy.wait(1000);
+
+    apiPage.RunAPI(false, 20, {
+      expectedPath: "response.body.data.body.data.launchesPast[0].mission_name",
+      expectedRes: GRAPHQL_RESPONSE.mission_name,
+    });
+  });
+});
diff --git a/app/client/cypress/support/Pages/ApiPage.ts b/app/client/cypress/support/Pages/ApiPage.ts
index fa9410c591..c82578ac7e 100644
--- a/app/client/cypress/support/Pages/ApiPage.ts
+++ b/app/client/cypress/support/Pages/ApiPage.ts
@@ -42,6 +42,7 @@ export class ApiPage {
   private _paginationTypeLabels = ".t--apiFormPaginationType label";
   _saveAsDS = ".t--store-as-datasource";
   _responseStatus = ".t--response-status-code";
+  private _blankGraphqlAPI = "span:contains('New Blank GraphQL API')";
 
   CreateApi(
     apiName = "",
@@ -222,7 +223,7 @@ export class ApiPage {
       | "Response"
       | "Errors"
       | "Logs"
-      | "Inspect entity"
+      | "Inspect entity",
   ) {
     this.agHelper.PressEscape();
     this.agHelper.GetNClick(this._visibleTextSpan(tabName), 0, true);
@@ -283,4 +284,26 @@ export class ApiPage {
       .eq(index)
       .click({ force: true });
   }
+
+  CreateAndFillGraphqlApi(
+    url: string,
+    apiName = "",
+    queryTimeout = 10000
+  ) {
+    this.CreateGraphqlApi(apiName);
+    this.EnterURL(url);
+    this.agHelper.AssertAutoSave();
+    //this.agHelper.Sleep(2000);// Added because api name edit takes some time to reflect in api sidebar after the call passes.
+    cy.get(this._apiRunBtn).should("not.be.disabled");
+    if (queryTimeout != 10000) this.SetAPITimeout(queryTimeout);
+  }
+
+  CreateGraphqlApi(apiName = "") {
+    cy.get(this.locator._createNew).click({ force: true });
+    cy.get(this._blankGraphqlAPI).click({ force: true });
+    this.agHelper.ValidateNetworkStatus("@createNewApi", 201);
+
+    if (apiName) this.agHelper.RenameWithInPane(apiName);
+    cy.get(this._resourceUrl).should("be.visible");
+  }
 }
diff --git a/app/client/src/components/editorComponents/CodeEditor/modes.ts b/app/client/src/components/editorComponents/CodeEditor/modes.ts
index 4ca2ea800d..d9d46974e4 100644
--- a/app/client/src/components/editorComponents/CodeEditor/modes.ts
+++ b/app/client/src/components/editorComponents/CodeEditor/modes.ts
@@ -58,5 +58,12 @@ CodeMirror.defineMode(EditorModes.GRAPHQL_WITH_BINDING, function(config) {
         name: "javascript",
       }),
     },
+    {
+      open: '"{{',
+      close: '}}"',
+      mode: CodeMirror.getMode(config, {
+        name: "javascript",
+      }),
+    },
   );
 });