Add possibility to change GraphiQL path and default IDE for the entrypoint (#2956)

Author: alanpoulain

src/Bridge/Symfony/Bundle/Action/SwaggerUiAction.php

@@ -54,8 +54,9 @@ final class SwaggerUiAction
     private $swaggerUiEnabled;
     private $reDocEnabled;
     private $graphqlEnabled;
+    private $graphiQlEnabled;
 
-    public function __construct(ResourceNameCollectionFactoryInterface $resourceNameCollectionFactory, ResourceMetadataFactoryInterface $resourceMetadataFactory, NormalizerInterface $normalizer, TwigEnvironment $twig, UrlGeneratorInterface $urlGenerator, string $title = '', string $description = '', string $version = '', $formats = [], $oauthEnabled = false, $oauthClientId = '', $oauthClientSecret = '', $oauthType = '', $oauthFlow = '', $oauthTokenUrl = '', $oauthAuthorizationUrl = '', $oauthScopes = [], bool $showWebby = true, bool $swaggerUiEnabled = false, bool $reDocEnabled = false, bool $graphqlEnabled = false)
+    public function __construct(ResourceNameCollectionFactoryInterface $resourceNameCollectionFactory, ResourceMetadataFactoryInterface $resourceMetadataFactory, NormalizerInterface $normalizer, TwigEnvironment $twig, UrlGeneratorInterface $urlGenerator, string $title = '', string $description = '', string $version = '', $formats = [], $oauthEnabled = false, $oauthClientId = '', $oauthClientSecret = '', $oauthType = '', $oauthFlow = '', $oauthTokenUrl = '', $oauthAuthorizationUrl = '', $oauthScopes = [], bool $showWebby = true, bool $swaggerUiEnabled = false, bool $reDocEnabled = false, bool $graphqlEnabled = false, bool $graphiQlEnabled = false)
     {
         $this->resourceNameCollectionFactory = $resourceNameCollectionFactory;
         $this->resourceMetadataFactory = $resourceMetadataFactory;
@@ -77,6 +78,7 @@ public function __construct(ResourceNameCollectionFactoryInterface $resourceName
         $this->swaggerUiEnabled = $swaggerUiEnabled;
         $this->reDocEnabled = $reDocEnabled;
         $this->graphqlEnabled = $graphqlEnabled;
+        $this->graphiQlEnabled = $graphiQlEnabled;
 
         if (\is_array($formats)) {
             $this->formats = $formats;
@@ -119,6 +121,7 @@ private function getContext(Request $request, Documentation $documentation): arr
             'swaggerUiEnabled' => $this->swaggerUiEnabled,
             'reDocEnabled' => $this->reDocEnabled,
             'graphqlEnabled' => $this->graphqlEnabled,
+            'graphiQlEnabled' => $this->graphiQlEnabled,
         ];
 
         $swaggerContext = ['spec_version' => $request->query->getInt('spec_version', 2)];

src/Bridge/Symfony/Bundle/DependencyInjection/ApiPlatformExtension.php

@@ -369,12 +369,13 @@ private function registerGraphQlConfiguration(ContainerBuilder $container, array
         $enabled = $this->isConfigEnabled($container, $config['graphql']);
 
         $container->setParameter('api_platform.graphql.enabled', $enabled);
+        $container->setParameter('api_platform.graphql.graphiql.enabled', $enabled && $this->isConfigEnabled($container, $config['graphql']['graphiql']));
 
         if (!$enabled) {
             return;
         }
 
-        $container->setParameter('api_platform.graphql.graphiql.enabled', $this->isConfigEnabled($container, $config['graphql']['graphiql']));
+        $container->setParameter('api_platform.graphql.default_ide', $config['graphql']['default_ide']);
 
         $loader->load('graphql.xml');
 

src/Bridge/Symfony/Bundle/DependencyInjection/Configuration.php

@@ -222,6 +222,7 @@ private function addGraphQlSection(ArrayNodeDefinition $rootNode): void
                     ->{class_exists(GraphQL::class) ? 'canBeDisabled' : 'canBeEnabled'}()
                     ->addDefaultsIfNotSet()
                     ->children()
+                        ->scalarNode('default_ide')->defaultValue('graphiql')->end()
                         ->arrayNode('graphiql')
                             ->{class_exists(GraphQL::class) && class_exists(TwigBundle::class) ? 'canBeDisabled' : 'canBeEnabled'}()
                         ->end()

src/Bridge/Symfony/Bundle/Resources/config/api.xml

@@ -42,6 +42,7 @@
             <argument>%api_platform.graphql.enabled%</argument>
             <argument>%api_platform.enable_entrypoint%</argument>
             <argument>%api_platform.enable_docs%</argument>
+            <argument>%api_platform.graphql.graphiql.enabled%</argument>
 
             <tag name="routing.loader" />
         </service>

src/Bridge/Symfony/Bundle/Resources/config/graphql.xml

@@ -112,9 +112,16 @@
         <service id="api_platform.graphql.action.entrypoint" class="ApiPlatform\Core\GraphQl\Action\EntrypointAction" public="true">
             <argument type="service" id="api_platform.graphql.schema_builder" />
             <argument type="service" id="api_platform.graphql.executor" />
-            <argument type="service" id="twig" />
+            <argument type="service" id="api_platform.graphql.action.graphiql" />
             <argument>%kernel.debug%</argument>
             <argument>%api_platform.graphql.graphiql.enabled%</argument>
+            <argument>%api_platform.graphql.default_ide%</argument>
+        </service>
+
+        <service id="api_platform.graphql.action.graphiql" class="ApiPlatform\Core\GraphQl\Action\GraphiQlAction" public="true">
+            <argument type="service" id="twig" />
+            <argument type="service" id="api_platform.router" />
+            <argument>%api_platform.graphql.graphiql.enabled%</argument>
             <argument>%api_platform.title%</argument>
         </service>
 

src/Bridge/Symfony/Bundle/Resources/config/routing/graphql/graphiql.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+
+<routes xmlns="http://symfony.com/schema/routing"
+        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:schemaLocation="http://symfony.com/schema/routing
+        http://symfony.com/schema/routing/routing-1.0.xsd">
+
+    <route id="api_graphql_graphiql" path="/graphql/graphiql">
+        <default key="_controller">api_platform.graphql.action.graphiql</default>
+    </route>
+
+</routes>

src/Bridge/Symfony/Bundle/Resources/config/routing/graphql.xml renamed to src/Bridge/Symfony/Bundle/Resources/config/routing/graphql/graphql.xml

@@ -32,6 +32,7 @@
             <argument>%api_platform.enable_swagger_ui%</argument>
             <argument>%api_platform.enable_re_doc%</argument>
             <argument>%api_platform.graphql.enabled%</argument>
+            <argument>%api_platform.graphql.graphiql.enabled%</argument>
         </service>
 
     </services>

src/Bridge/Symfony/Bundle/Resources/config/swagger-ui.xml

@@ -1,62 +1,39 @@
-// Parse the search string to get url parameters.
-var search = window.location.search;
-var parameters = {};
-search.substr(1).split('&').forEach(function (entry) {
-    var eq = entry.indexOf('=');
-    if (eq >= 0) {
-        parameters[decodeURIComponent(entry.slice(0, eq))] =
-            decodeURIComponent(entry.slice(eq + 1));
-    }
-});
-
-// If variables was provided, try to format it.
-if (parameters.variables) {
-    try {
-        parameters.variables =
-            JSON.stringify(JSON.parse(parameters.variables), null, 2);
-    } catch (e) {
-        // Do nothing, we want to display the invalid JSON as a string, rather
-        // than present an error.
-    }
-}
+var initParameters = {};
+var entrypoint = null;
 
-// 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;
+    initParameters.query = newQuery;
     updateURL();
 }
 
 function onEditVariables(newVariables) {
-    parameters.variables = newVariables;
+    initParameters.variables = newVariables;
     updateURL();
 }
 
 function onEditOperationName(newOperationName) {
-    parameters.operationName = newOperationName;
+    initParameters.operationName = newOperationName;
     updateURL();
 }
 
 function updateURL() {
-    var newSearch = '?' + Object.keys(parameters).filter(function (key) {
-        return Boolean(parameters[key]);
+    var newSearch = '?' + Object.keys(initParameters).filter(function (key) {
+        return Boolean(initParameters[key]);
     }).map(function (key) {
-        return encodeURIComponent(key) + '=' +
-            encodeURIComponent(parameters[key]);
+        return encodeURIComponent(key) + '=' + encodeURIComponent(initParameters[key]);
     }).join('&');
     history.replaceState(null, null, newSearch);
 }
 
-// Defines a GraphQL fetcher using the fetch API.
 function graphQLFetcher(graphQLParams) {
-    return fetch(window.location.pathname, {
+    return fetch(entrypoint, {
         method: 'post',
         headers: {
             'Accept': 'application/json',
-            'Content-Type': 'application/json',
+            'Content-Type': 'application/json'
         },
         body: JSON.stringify(graphQLParams),
-        credentials: 'include',
+        credentials: 'include'
     }).then(function (response) {
         return response.text();
     }).then(function (responseBody) {
@@ -68,16 +45,36 @@ function graphQLFetcher(graphQLParams) {
     });
 }
 
-// Render <GraphiQL /> into the body.
-ReactDOM.render(
-    React.createElement(GraphiQL, {
-        fetcher: graphQLFetcher,
-        query: parameters.query,
-        variables: parameters.variables,
-        operationName: parameters.operationName,
-        onEditQuery: onEditQuery,
-        onEditVariables: onEditVariables,
-        onEditOperationName: onEditOperationName
-    }),
-    document.getElementById('graphiql')
-);
+window.onload = function() {
+    var data = JSON.parse(document.getElementById('graphiql-data').innerText);
+    entrypoint = data.entrypoint;
+
+    var search = window.location.search;
+    search.substr(1).split('&').forEach(function (entry) {
+        var eq = entry.indexOf('=');
+        if (eq >= 0) {
+            initParameters[decodeURIComponent(entry.slice(0, eq))] = decodeURIComponent(entry.slice(eq + 1));
+        }
+    });
+
+    if (initParameters.variables) {
+        try {
+            initParameters.variables = JSON.stringify(JSON.parse(initParameters.variables), null, 2);
+        } catch (e) {
+            // Do nothing, we want to display the invalid JSON as a string, rather than present an error.
+        }
+    }
+
+    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')
+    );
+}

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

@@ -6,6 +6,9 @@
 
     <link rel="stylesheet" href="{{ asset('bundles/apiplatform/graphiql/graphiql.css') }}">
     <link rel="stylesheet" href="{{ asset('bundles/apiplatform/graphiql-style.css') }}">
+
+    {# json_encode(65) is for JSON_UNESCAPED_SLASHES|JSON_HEX_TAG to avoid JS XSS #}
+    <script id="graphiql-data" type="application/json">{{ graphiql_data|json_encode(65)|raw }}</script>
 </head>
 
 <body>