[GraphQL] Add graphiql-explorer

src/Bridge/Symfony/Bundle/Resources/public/init-graphiql.js

@@ -1,53 +1,7 @@
-var initParameters = {};
-var entrypoint = null;
-
-function onEditQuery(newQuery) {
-    initParameters.query = newQuery;
-    updateURL();
-}
-
-function onEditVariables(newVariables) {
-    initParameters.variables = newVariables;
-    updateURL();
-}
-
-function onEditOperationName(newOperationName) {
-    initParameters.operationName = newOperationName;
-    updateURL();
-}
-
-function updateURL() {
-    var newSearch = '?' + Object.keys(initParameters).filter(function (key) {
-        return Boolean(initParameters[key]);
-    }).map(function (key) {
-        return encodeURIComponent(key) + '=' + encodeURIComponent(initParameters[key]);
-    }).join('&');
-    history.replaceState(null, null, newSearch);
-}
-
-function graphQLFetcher(graphQLParams) {
-    return fetch(entrypoint, {
-        method: 'post',
-        headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(graphQLParams),
-        credentials: 'include'
-    }).then(function (response) {
-        return response.text();
-    }).then(function (responseBody) {
-        try {
-            return JSON.parse(responseBody);
-        } catch (error) {
-            return responseBody;
-        }
-    });
-}
-
 window.onload = function() {
     var data = JSON.parse(document.getElementById('graphiql-data').innerText);
-    entrypoint = data.entrypoint;
+    var entrypoint = data.entrypoint;
+    var initParameters = {};
 
     var search = window.location.search;
     search.substr(1).split('&').forEach(function (entry) {
@@ -65,16 +19,161 @@ window.onload = function() {
         }
     }
 
-    ReactDOM.render(
-        React.createElement(GraphiQL, {
-            fetcher: graphQLFetcher,
-            query: initParameters.query,
-            variables: initParameters.variables,
-            operationName: initParameters.operationName,
-            onEditQuery: onEditQuery,
-            onEditVariables: onEditVariables,
-            onEditOperationName: onEditOperationName
-        }),
-        document.getElementById('graphiql')
-    );
+    function App() {
+        var self = this;
+        var graphiql = GraphiQL;
+
+        var useStateParameters = React.useState(initParameters);
+        var parameters = useStateParameters[0];
+        var setParameters = useStateParameters[1];
+
+        var useStateQuery = React.useState(parameters.query);
+        var query = useStateQuery[0];
+        var setQuery = useStateQuery[1];
+
+        var useStateExplorerIsOpen = React.useState(true);
+        var explorerIsOpen = useStateExplorerIsOpen[0];
+        var setExplorerIsOpen = useStateExplorerIsOpen[1];
+
+        function graphQLFetcher(graphQLParams) {
+            return fetch(entrypoint, {
+                method: 'post',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(graphQLParams),
+                credentials: 'include'
+            }).then(function (response) {
+                return response.text();
+            }).then(function (responseBody) {
+                try {
+                    return JSON.parse(responseBody);
+                } catch (error) {
+                    return responseBody;
+                }
+            });
+        }
+
+        function onEditQuery(newQuery) {
+            setParameters(Object.assign(parameters, {query: newQuery}));
+            setQuery(newQuery);
+            updateURL();
+        }
+
+        function onEditVariables(newVariables) {
+            setParameters(Object.assign(parameters, {variables: newVariables}));
+            updateURL();
+        }
+
+        function onEditOperationName(newOperationName) {
+            setParameters(Object.assign(parameters, {operationName: newOperationName}));
+            updateURL();
+        }
+
+        function onRunOperation(operationName) {
+            self.graphiql.handleRunQuery(operationName);
+        }
+
+        function updateURL() {
+            var newSearch = '?' + Object.keys(parameters).filter(function (key) {
+                return Boolean(parameters[key]);
+            }).map(function (key) {
+                return encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]);
+            }).join('&');
+            history.replaceState(null, null, newSearch);
+        }
+
+        function handleToggleExplorer() {
+            setExplorerIsOpen(!explorerIsOpen)
+        }
+
+        function handlePrettifyQuery() {
+            self.graphiql.handlePrettifyQuery();
+        }
+
+        function handleMergeQuery() {
+            self.graphiql.handleMergeQuery();
+        }
+
+        function handleCopyQuery() {
+            self.graphiql.handleCopyQuery();
+        }
+
+        function handleToggleHistory() {
+            self.graphiql.handleToggleHistory();
+        }
+
+        return React.createElement(
+            'div',
+            {className: 'graphiql-container'},
+            React.createElement(GraphiQLExplorer.Explorer, {
+                fetcher: graphQLFetcher,
+                query: query,
+                onEdit: onEditQuery,
+                onRunOperation: onRunOperation,
+                explorerIsOpen: explorerIsOpen,
+                onToggleExplorer: handleToggleExplorer
+            }),
+            React.createElement(
+                GraphiQL,
+                {
+                    ref: function (ref) { self.graphiql = ref },
+                    fetcher: graphQLFetcher,
+                    query: query,
+                    variables: parameters.variables,
+                    operationName: parameters.operationName,
+                    onEditQuery: onEditQuery,
+                    onEditVariables: onEditVariables,
+                    onEditOperationName: onEditOperationName
+                },
+                React.createElement(
+                    GraphiQL.Toolbar,
+                    {},
+                    React.createElement(
+                        GraphiQL.ToolbarButton,
+                        {
+                            onClick: handlePrettifyQuery,
+                            label: 'Prettify',
+                            title: 'Prettify Query (Shift-Ctrl-P)'
+                        }
+                    ),
+                    React.createElement(
+                        GraphiQL.ToolbarButton,
+                        {
+                            onClick: handleMergeQuery,
+                            label: 'Merge',
+                            title: 'Merge Query (Shift-Ctrl-M)'
+                        }
+                    ),
+                    React.createElement(
+                        GraphiQL.ToolbarButton,
+                        {
+                            onClick: handleCopyQuery,
+                            label: 'Copy',
+                            title: 'Copy Query (Shift-Ctrl-C)'
+                        }
+                    ),
+                    React.createElement(
+                        GraphiQL.ToolbarButton,
+                        {
+                            onClick: handleToggleHistory,
+                            label: 'History',
+                            title: 'Show History'
+                        }
+                    ),
+                    React.createElement(
+                        GraphiQL.ToolbarButton,
+                        {
+                            onClick: handleToggleExplorer,
+                            label: 'Explorer',
+                            title: 'Show Explorer'
+                        }
+                    )
+                )
+            )
+        );
+    }
+
+    ReactDOM.render(React.createElement(App), document.getElementById('graphiql'));
 }

src/Bridge/Symfony/Bundle/Resources/views/Graphiql/index.html.twig

@@ -17,6 +17,7 @@
 <script src="{{ asset('bundles/apiplatform/react/react.production.min.js') }}"></script>
 <script src="{{ asset('bundles/apiplatform/react/react-dom.production.min.js') }}"></script>
 <script src="{{ asset('bundles/apiplatform/graphiql/graphiql.min.js') }}"></script>
+<script src="{{ asset('bundles/apiplatform/graphiql/graphiqlExplorer.min.js') }}"></script>
 <script src="{{ asset('bundles/apiplatform/init-graphiql.js') }}"></script>
 
 </body>

update-js.sh

@@ -1,6 +1,6 @@
 #!/bin/sh
 
-yarn add --production --no-lockfile swagger-ui-dist es6-promise fetch react react-dom graphiql graphql-playground-react redoc
+yarn add --production --no-lockfile swagger-ui-dist es6-promise fetch react react-dom graphiql graphiql-explorer graphql-playground-react redoc
 
 dest=src/Bridge/Symfony/Bundle/Resources/public/swagger-ui/
 if [ -d $dest ]; then
@@ -26,6 +26,7 @@ fi
 mkdir -p $dest
 cp node_modules/graphiql/graphiql.min.js $dest
 cp node_modules/graphiql/graphiql.css $dest
+cp node_modules/graphiql-explorer/graphiqlExplorer.min.js $dest
 
 dest=src/Bridge/Symfony/Bundle/Resources/public/graphql-playground/
 if [ -d $dest ]; then