diff --git a/package-lock.json b/package-lock.json
index 3592f74..7747492 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3716,9 +3716,9 @@
       }
     },
     "graphiql-explorer": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/graphiql-explorer/-/graphiql-explorer-0.4.4.tgz",
-      "integrity": "sha512-NuQ1XAjZwykKb9GoHM6ofI9qITZ8Lue/mXi1Bj3/ZbGZv1Srk3sz0QkKQ5jBaxmuS3Ay09LRvJQSOr0Ci1dlfg=="
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/graphiql-explorer/-/graphiql-explorer-0.6.2.tgz",
+      "integrity": "sha512-hYSM+TI/0IAXltMOL7YXrvnA5xrKoDjjN7qiksxca2DY7yu46cyHVHG0IKIrBozMDBQLvFOhQMPrzplErwVZ1g=="
     },
     "graphql": {
       "version": "14.5.4",
diff --git a/package.json b/package.json
index f0ea1b1..ef8922d 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
   },
   "dependencies": {
     "graphiql": "^0.14.2",
-    "graphiql-explorer": "^0.4.4",
+    "graphiql-explorer": "^0.6.2",
     "graphql": "^14.5.4"
   }
 }
diff --git a/src/GraphiQLWithExtensions.js b/src/GraphiQLWithExtensions.js
index 25198b9..b3bacfe 100644
--- a/src/GraphiQLWithExtensions.js
+++ b/src/GraphiQLWithExtensions.js
@@ -8,6 +8,8 @@ class GraphiQLWithExtensions extends Component {
   state = {
     schema: null,
     query: this.props.defaultQuery,
+    variables: this.props.variables,
+    operationName: this.props.operationName,
     explorerIsOpen: false,
     disableExplorer: this.props.disableExplorer,
   };
@@ -94,12 +96,14 @@ class GraphiQLWithExtensions extends Component {
   };
 
   _handleEditVariables = variables => {
+    this.setState({variables});
     if (this.props.onEditVariables) this.props.onEditVariables(variables);
   };
 
-  _handleEditOperationName = operation => {
+  _handleEditOperationName = operationName => {
+    this.setState({operationName});
     if (this.props.onEditOperationName)
-      this.props.onEditOperationName(operation);
+      this.props.onEditOperationName(operationName);
   };
 
   _handleToggleExplorer = () => {
@@ -112,7 +116,7 @@ class GraphiQLWithExtensions extends Component {
     });
 
   render() {
-    const {query, schema} = this.state;
+    const {query, schema, variables, operationName} = this.state;
 
     return (
       <div className="graphiql-container">
@@ -130,6 +134,8 @@ class GraphiQLWithExtensions extends Component {
           fetcher={this.props.fetcher}
           schema={schema}
           query={query}
+          variables={variables}
+          operationName={operationName}
           onEditQuery={this._handleEditQuery}
           onEditVariables={this._handleEditVariables}
           onEditOperationName={this._handleEditOperationName}>