diff --git a/graphene_django/static/graphene_django/graphiql.js b/graphene_django/static/graphene_django/graphiql.js
deleted file mode 100644
index f6be32c..0000000
--- a/graphene_django/static/graphene_django/graphiql.js
+++ /dev/null
@@ -1,206 +0,0 @@
-(function (
-  document,
-
-  GRAPHENE_SETTINGS,
-  GraphiQL,
-  React,
-  ReactDOM,
-  SubscriptionsTransportWs,
-  fetch,
-  history,
-  location,
-) {
-
-  // Collect the URL parameters
-  var parameters = {};
-  location.hash
-    .substr(1)
-    .split("&")
-    .forEach(function (entry) {
-      var eq = entry.indexOf("=");
-      if (eq >= 0) {
-        parameters[decodeURIComponent(entry.slice(0, eq))] = decodeURIComponent(
-          entry.slice(eq + 1),
-        );
-      }
-    });
-  // Produce a Location fragment string from a parameter object.
-  function locationQuery(params) {
-    return (
-      "#" +
-      Object.keys(params)
-        .map(function (key) {
-          return (
-            encodeURIComponent(key) + "=" + encodeURIComponent(params[key])
-          );
-        })
-        .join("&")
-    );
-  }
-  // Derive a fetch URL from the current URL, sans the GraphQL parameters.
-  var graphqlParamNames = {
-    query: true,
-    variables: true,
-    operationName: true,
-  };
-  var otherParams = {};
-  for (var k in parameters) {
-    if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
-      otherParams[k] = parameters[k];
-    }
-  }
-
-  var fetchURL = locationQuery(otherParams);
-
-  // Defines a GraphQL fetcher using the fetch API.
-  function httpClient(graphQLParams, opts) {
-    if (typeof opts === 'undefined') {
-      opts = {};
-    }
-    var headers = opts.headers || {};
-    headers['Accept'] = headers['Accept'] || 'application/json';
-    headers['Content-Type'] = headers['Content-Type'] || 'application/json';
-
-    // Parse the cookie value for a CSRF token
-    var csrftoken;
-    var cookies = ("; " + document.cookie).split("; csrftoken=");
-    if (cookies.length == 2) {
-      csrftoken = cookies.pop().split(";").shift();
-    } else {
-      csrftoken = document.querySelector("[name=csrfmiddlewaretoken]").value;
-    }
-    if (csrftoken) {
-      headers['X-CSRFToken'] = csrftoken
-    }
-
-    return fetch(fetchURL, {
-      method: "post",
-      headers: headers,
-      body: JSON.stringify(graphQLParams),
-      credentials: "include",
-    })
-      .then(function (response) {
-        return response.text();
-      })
-      .then(function (responseBody) {
-        try {
-          return JSON.parse(responseBody);
-        } catch (error) {
-          return responseBody;
-        }
-      });
-  }
-
-  // Derive the subscription URL. If the SUBSCRIPTION_URL setting is specified, uses that value. Otherwise
-  // assumes the current window location with an appropriate websocket protocol.
-  var subscribeURL =
-    location.origin.replace(/^http/, "ws") +
-    (GRAPHENE_SETTINGS.subscriptionPath || location.pathname);
-
-  // Create a subscription client.
-  var subscriptionClient = new SubscriptionsTransportWs.SubscriptionClient(
-    subscribeURL,
-    {
-      // Reconnect after any interruptions.
-      reconnect: true,
-      // Delay socket initialization until the first subscription is started.
-      lazy: true,
-    },
-  );
-
-  // Keep a reference to the currently-active subscription, if available.
-  var activeSubscription = null;
-
-  // Define a GraphQL fetcher that can intelligently route queries based on the operation type.
-  function graphQLFetcher(graphQLParams, opts) {
-    var operationType = getOperationType(graphQLParams);
-
-    // If we're about to execute a new operation, and we have an active subscription,
-    // unsubscribe before continuing.
-    if (activeSubscription) {
-      activeSubscription.unsubscribe();
-      activeSubscription = null;
-    }
-
-    if (operationType === "subscription") {
-      return {
-        subscribe: function (observer) {
-          activeSubscription = subscriptionClient;
-          return subscriptionClient.request(graphQLParams, opts).subscribe(observer);
-        },
-      };
-    } else {
-      return httpClient(graphQLParams, opts);
-    }
-  }
-
-  // Determine the type of operation being executed for a given set of GraphQL parameters.
-  function getOperationType(graphQLParams) {
-    // Run a regex against the query to determine the operation type (query, mutation, subscription).
-    var operationRegex = new RegExp(
-      // Look for lines that start with an operation keyword, ignoring whitespace.
-      "^\\s*(query|mutation|subscription)\\s*" +
-        // The operation keyword should be followed by whitespace and the operationName in the GraphQL parameters (if available).
-        (graphQLParams.operationName ? ("\\s+" + graphQLParams.operationName) : "") +
-        // The line should eventually encounter an opening curly brace.
-        "[^\\{]*\\{",
-      // Enable multiline matching.
-      "m",
-    );
-    var match = operationRegex.exec(graphQLParams.query);
-    if (!match) {
-      return "query";
-    }
-
-    return match[1];
-  }
-
-  // When the query and variables string is edited, update the URL bar so
-  // that it can be easily shared.
-  function onEditQuery(newQuery) {
-    parameters.query = newQuery;
-    updateURL();
-  }
-  function onEditVariables(newVariables) {
-    parameters.variables = newVariables;
-    updateURL();
-  }
-  function onEditOperationName(newOperationName) {
-    parameters.operationName = newOperationName;
-    updateURL();
-  }
-  function updateURL() {
-    history.replaceState(null, null, locationQuery(parameters));
-  }
-  var options = {
-    fetcher: graphQLFetcher,
-    onEditQuery: onEditQuery,
-    onEditVariables: onEditVariables,
-    onEditOperationName: onEditOperationName,
-    headerEditorEnabled: GRAPHENE_SETTINGS.graphiqlHeaderEditorEnabled,
-    shouldPersistHeaders: GRAPHENE_SETTINGS.graphiqlShouldPersistHeaders,
-    query: parameters.query,
-  };
-  if (parameters.variables) {
-    options.variables = parameters.variables;
-  }
-  if (parameters.operation_name) {
-    options.operationName = parameters.operation_name;
-  }
-  // Render <GraphiQL /> into the body.
-  ReactDOM.render(
-    React.createElement(GraphiQL, options),
-    document.getElementById("editor"),
-  );
-})(
-  document,
-
-  window.GRAPHENE_SETTINGS,
-  window.GraphiQL,
-  window.React,
-  window.ReactDOM,
-  window.SubscriptionsTransportWs,
-  window.fetch,
-  window.history,
-  window.location,
-);
diff --git a/graphene_django/templates/graphene/graphiql.html b/graphene_django/templates/graphene/graphiql.html
index 3685692..d2d2304 100644
--- a/graphene_django/templates/graphene/graphiql.html
+++ b/graphene_django/templates/graphene/graphiql.html
@@ -1,54 +1,71 @@
 <!--
-The request to this GraphQL server provided the header "Accept: text/html"
-and as a result has been presented GraphiQL - an in-browser IDE for
-exploring GraphQL.
-If you wish to receive JSON, provide the header "Accept: application/json" or
-add "&raw" to the end of the URL within a browser.
+ *  Copyright (c) 2021 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
 -->
-{% load static %}
 <!DOCTYPE html>
-<html>
-<head>
-  <style>
-    html, body, #editor {
-      height: 100%;
-      margin: 0;
-      overflow: hidden;
-      width: 100%;
-    }
-  </style>
-  <link href="https://cdn.jsdelivr.net/npm/graphiql@{{graphiql_version}}/graphiql.min.css"
-        integrity="{{graphiql_css_sri}}"
-        rel="stylesheet"
-        crossorigin="anonymous" />
-  <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@{{whatwg_fetch_version}}/dist/fetch.umd.js"
-          integrity="{{whatwg_fetch_sri}}"
-          crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/react@{{react_version}}/umd/react.production.min.js"
-          integrity="{{react_sri}}"
-          crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/react-dom@{{react_version}}/umd/react-dom.production.min.js"
-          integrity="{{react_dom_sri}}"
-          crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/graphiql@{{graphiql_version}}/graphiql.min.js"
-          integrity="{{graphiql_sri}}"
-          crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/subscriptions-transport-ws@{{subscriptions_transport_ws_version}}/browser/client.js"
-          integrity="{{subscriptions_transport_ws_sri}}"
-          crossorigin="anonymous"></script>
-</head>
-<body>
-  <div id="editor"></div>
-  {% csrf_token %}
-  <script type="application/javascript">
-    window.GRAPHENE_SETTINGS = {
-    {% if subscription_path %}
-      subscriptionPath: "{{subscription_path}}",
-    {% endif %}
-      graphiqlHeaderEditorEnabled: {{ graphiql_header_editor_enabled|yesno:"true,false" }},
-      graphiqlShouldPersistHeaders: {{ graphiql_should_persist_headers|yesno:"true,false" }},
-    };
-  </script>
-  <script src="{% static 'graphene_django/graphiql.js' %}"></script>
-</body>
-</html>
+<html lang="en">
+  <head>
+    <title>GraphiQL</title>
+    <style>
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #graphiql {
+        height: 100vh;
+      }
+    </style>
+
+    <!--
+      This GraphiQL example depends on Promise and fetch, which are available in
+      modern browsers, but can be "polyfilled" for older browsers.
+      GraphiQL itself depends on React DOM.
+      If you do not want to rely on a CDN, you can host these files locally or
+      include them directly in your favored resource bundler.
+    -->
+    <script
+      src="https://unpkg.com/react@17/umd/react.development.js"
+      integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg=="
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
+      integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
+      crossorigin="anonymous"
+    ></script>
+
+    <!--
+      These two files can be found in the npm module, however you may wish to
+      copy them directly into your environment, or perhaps include them in your
+      favored resource bundler.
+     -->
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+  </head>
+
+  <body>
+    <div id="graphiql">Loading...</div>
+    <script
+      src="https://unpkg.com/graphiql/graphiql.min.js"
+      type="application/javascript"
+    ></script>
+    <script>
+      ReactDOM.render(
+        React.createElement(GraphiQL, {
+          fetcher: GraphiQL.createFetcher({
+            url: "{{ request.path }}",
+          }),
+          defaultEditorToolsVisibility: true,
+          isHeadersEditorEnabled: {{ graphiql_header_editor_enabled|yesno:"true,false" }},
+          shouldPersistHeaders: {{ graphiql_should_persist_headers|yesno:"true,false" }},
+        }),
+        document.getElementById('graphiql'),
+      );
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/graphene_django/views.py b/graphene_django/views.py
index e772d53..7e35604 100644
--- a/graphene_django/views.py
+++ b/graphene_django/views.py
@@ -147,17 +147,6 @@ class GraphQLView(View):
             if show_graphiql:
                 return self.render_graphiql(
                     request,
-                    # Dependency parameters.
-                    whatwg_fetch_version=self.whatwg_fetch_version,
-                    whatwg_fetch_sri=self.whatwg_fetch_sri,
-                    react_version=self.react_version,
-                    react_sri=self.react_sri,
-                    react_dom_sri=self.react_dom_sri,
-                    graphiql_version=self.graphiql_version,
-                    graphiql_sri=self.graphiql_sri,
-                    graphiql_css_sri=self.graphiql_css_sri,
-                    subscriptions_transport_ws_version=self.subscriptions_transport_ws_version,
-                    subscriptions_transport_ws_sri=self.subscriptions_transport_ws_sri,
                     # The SUBSCRIPTION_PATH setting.
                     subscription_path=self.subscription_path,
                     # GraphiQL headers tab,