fix graphql ui 1.9.9 #11768 ,

src/OrchardCore.Modules/OrchardCore.Apis.GraphQL/Assets/js/App.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import ReactDOM from "react-dom";
 import GraphiQL from "graphiql";
 import GraphiQLExplorer from "graphiql-explorer";
 import { buildClientSchema, getIntrospectionQuery } from "graphql";
+import { GraphiQLToolbarConfig } from "graphiql/dist/components/GraphiQL";
 
 import "graphiql/graphiql.css";
 import "../css/graphiql-orchard.css";
@@ -40,7 +41,6 @@ function fetcher(params: Object): Promise<any> {
 }
 
 function App() {
-    const _graphiql = useRef(null);
     // Gets a graphql query from the URL if present and sets it as the default query.
     var parameters: any = parseQueryFromUrl(window.location);
 
@@ -108,21 +108,29 @@ function App() {
         }).join('&');
         history.replaceState(null, null, newSearch);
     }
+
+
+    const btnToggleExplorer: GraphiQLToolbarConfig = {
+        additionalContent: (
+            <GraphiQL.Button
+                onClick={handleToggleExplorer}
+                label="Explorer"
+                title="Toggle Explorer"
+            />
+        ),
+    };
 
     return (
         <div className="graphiql-container">
             <GraphiQLExplorer
                 schema={schema}
                 query={query}
                 onEdit={handleEditQuery}
-                onRunOperation={operationName =>
-                    _graphiql.current.handleRunQuery(operationName)
-                }
                 explorerIsOpen={explorerIsOpen}
                 onToggleExplorer={handleToggleExplorer}
             />
             {/*@ts-ignore */}
-            <GraphiQL ref={_graphiql}
+            <GraphiQL
                 fetcher={fetcher}
                 schema={schema}
                 variables={parameters.variables}
@@ -131,25 +139,8 @@ function App() {
                 onEditOperationName={onEditOperationName}
                 query={query}
                 onEditQuery={handleEditQuery}
-            >
-                <GraphiQL.Toolbar>
-                    <GraphiQL.Button
-                        onClick={() => _graphiql.current.handlePrettifyQuery()}
-                        label="Prettify"
-                        title="Prettify Query (Shift-Ctrl-P)"
-                    />
-                    <GraphiQL.Button
-                        onClick={() => _graphiql.current.handleToggleHistory()}
-                        label="History"
-                        title="Show History"
-                    />
-                    <GraphiQL.Button
-                        onClick={handleToggleExplorer}
-                        label="Explorer"
-                        title="Toggle Explorer"
-                    />
-                </GraphiQL.Toolbar>
-            </GraphiQL>
+                toolbar={btnToggleExplorer}
+            ></GraphiQL>
         </div>
     );
 }