diff --git a/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js b/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
index 73fcf745f..cfae50536 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js
@@ -40,7 +40,10 @@ export default class QueryEditor extends React.Component {
       value: this.props.value || '',
       lineNumbers: true,
       tabSize: 2,
-      mode: 'graphql',
+      mode: 'brunovariables',
+      brunoVarInfo: {
+        variables: getEnvironmentVariables(this.props.collection),
+      },
       theme: this.props.editorTheme || 'graphiql',
       theme: this.props.theme === 'dark' ? 'monokai' : 'default',
       keyMap: 'sublime',
@@ -159,6 +162,8 @@ export default class QueryEditor extends React.Component {
     this.ignoreChangeEvent = false;
     let variables = getEnvironmentVariables(this.props.collection);
     if (!isEqual(variables, this.variables)) {
+      this.editor.options.brunoVarInfo.variables = variables;
+      console.log(variables);
       this.addOverlay();
     }
   }
@@ -177,7 +182,7 @@ export default class QueryEditor extends React.Component {
     this.variables = variables;
     console.log(variables);
 
-    defineCodeMirrorBrunoVariablesMode(variables, "text/plain");
+    defineCodeMirrorBrunoVariablesMode(variables, 'graphql');
     this.editor.setOption('mode', 'brunovariables');
   }
 
diff --git a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
index dc0cb64ed..9501ef6e0 100644
--- a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
+++ b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js
@@ -14,12 +14,13 @@ if (!SERVER_RENDERED) {
 
   const renderVarInfo = (token, options, cm, pos) => {
     const str = token.string || '';
-
+    if(!str || !str.length || typeof str !== 'string') {
+      return;
+    }
     // str is of format {{variableName}}, extract variableName
-    const variableName = str.substring(2, str.length - 2);
-
-    // get the value of the variable
-    const variableValue = options.variables[variableName] || '';
+    // we are seeing that from the gql query editor, the token string is of format variableName
+    const variableName = str.replace('{{', '').replace('}}', '').trim();
+    const variableValue = options.variables[variableName];
 
     const into = document.createElement('div');
     const descriptionDiv = document.createElement('div');