Merge pull request #35 from Aeliot-Tm/override_rendering

Define blocks for easy overriding of the page rendering

.gitignore

@@ -1,3 +1,4 @@
+.idea
 phpunit.xml
 /build
 /vendor

README.md

@@ -85,10 +85,11 @@ It's done now, navigate to `/graphiql` in your project url
 More
 ------------
 
-* [Custom HTTP headers](src/Resources/doc/custom-http-headers.md)
-* [Custom GraphiQL parameters](src/Resources/doc/custom-parameters.md)
-* [Define JavaScript libraries' versions](src/Resources/doc/libraries-versions.md)
-* [Define a custom GraphQL endpoint](src/Resources/doc/graphql-endpoint.md)
+* [Custom HTTP headers](docs/custom-http-headers.md)
+* [Custom page rendering](docs/custom-rendering.md)
+* [Custom GraphiQL parameters](docs/custom-parameters.md)
+* [Define JavaScript libraries' versions](docs/libraries-versions.md)
+* [Define a custom GraphQL endpoint](docs/graphql-endpoint.md)
 
 Community
 ---------

docs/custom-parameters.md

@@ -0,0 +1,29 @@
+Custom GraphiQL parameters
+==========================
+
+By default, only the `fetcher` parameter is passed to GraphiQL's React component.
+To add more:
+
+1. Override the default GraphiQL template:
+
+```yaml
+# config/packages/graphiql.yaml or app/config/config.yml for Symfony without Flex
+overblog_graphiql:
+    template: "GraphiQL/index.html.twig"
+```
+
+2. Create a new template:
+
+```twig
+{# templates/GraphiQL/index.html.twig #}
+{% extends '@OverblogGraphiQL/GraphiQL/index.html.twig' %}
+
+{% block graphiql_params %}
+{{ parent() }},
+defaultQuery: `query SomeQuery($param: String) {
+  items(param: $param) {
+    someField
+  }
+}`
+{% endblock graphiql_params %}
+```

docs/custom-rendering.md

@@ -0,0 +1,44 @@
+Custom rendering
+===============
+
+It may be useful to change template to provide additional fields for more comfortable providing of [custom headers](custom-http-headers.md).
+
+It can be done the following way:
+
+1. Override the default GraphiQL template:
+
+```yaml
+# config/packages/graphiql.yaml or app/config/config.yml for Symfony without Flex
+overblog_graphiql:
+    template: "GraphiQL/index.html.twig"
+```
+2. Create a new template:
+
+You have to override block `graphiql_render` and soon of all you have to override block `graphql_fetcher_headers`.
+
+```twig
+{# templates/GraphiQL/index.html.twig #}
+{% extends '@OverblogGraphiQL/GraphiQL/index.html.twig' %}
+
+{% block graphiql_render %}
+    ReactDOM.render(
+        {# add your custom implementation here #}
+        ,
+        document.body
+    )
+{% endblock graphiql_render %}
+```
+
+### Example
+
+See template [@OverblogGraphiQL/GraphiQL/auth.html.twig](../src/Resources/views/GraphiQL/auth.html.twig). How it looks like:
+
+![This is an image](auth-token.png)
+
+There is:
+
+1. Header used for the authorization.
+2. Header value (token) for the authorization.
+3. Button to load schema when the header value (token) typed.
+
+So, you can extend base template [@OverblogGraphiQL/GraphiQL/index.html.twig](../src/Resources/views/GraphiQL/index.html.twig) or use that.

docs/graphql-endpoint.md

@@ -0,0 +1,50 @@
+Custom GraphQL endpoint
+=======
+
+If your graphql endpoint is not the default one coming with the
+[overblog/graphql-bundle](https://github.com/overblog/GraphQLBundle), then you might want to tell graphiql how to
+resolve the route depending on a schema name.
+
+By default it uses `Overblog\GraphiQLBundle\Config\GraphQLEndpoint\Helpers\OverblogGraphQLBundleEndpointResolver`.
+
+### Configuration
+
+Just set the `overblog_graphiql.endpoint_resolver` parameter like this:
+
+```yaml
+# in app/config/config.yml
+overblog_graphiql:
+    # ...
+    endpoint_resolver: \App\GraphiQL\EndpointResolver
+```
+
+### The Resolver
+
+The resolver must be something like this:
+
+```php
+<?php
+
+namespace App\GraphiQL;
+
+class EndpointResolver
+{
+    public static function getByName($name)
+    {
+        if ('default' === $name) {
+            return [
+                'overblog_graphql_endpoint',
+            ];
+        }
+
+        return [
+            'graphql_default',
+            ['schemaName' => $name],
+        ];
+    }
+}
+```
+
+It must return an array of packed params which will be passed to `RouterInterface::generate` like this
+`$router->generate(...$returnedValueOfTheGetByNameMethod)`.
+

src/Resources/views/GraphiQL/auth.html.twig

@@ -0,0 +1,73 @@
+{% extends '@OverblogGraphiQL/GraphiQL/index.html.twig' %}
+
+{% block style %}
+    {{ parent() }}
+    <style>
+        .x-header {
+            padding: 2px 4px;
+        }
+    </style>
+{% endblock %}
+
+{% block graphql_fetcher_headers %}
+    {{ parent() }}
+
+    {% block graphql_fetcher_headers_extra %}
+        let headerName = document.getElementById('x_header_name').value;
+        let token = getToken() || document.token || null;
+        if (headerName && token) {
+            headers[headerName] = token;
+        }
+    {% endblock graphql_fetcher_headers_extra %}
+{% endblock graphql_fetcher_headers %}
+
+{% block graphiql_render %}
+    let getToken = function () {
+        let field = document.getElementById('x_header_value');
+        return field ? field.value : null;
+    };
+    let renderPage = function () {
+        ReactDOM.render(
+            React.createElement('div', {style: {height: '100%'}},
+                React.createElement('div', {style: {background: '#f6f6f6', padding: '5px 15px'}},
+                    React.createElement('select', {
+                            id: 'x_header_name',
+                            className: 'x-header',
+                            style: {height: '24px'},
+                            title: 'Header used for the authorization',
+                        },
+                        React.createElement('option', {value: 'Authorization'}, 'Authorization'),
+                        React.createElement('option', {value: 'X-Auth-Token'}, 'X-Auth-Token'),
+                    ),
+                    React.createElement('input', {
+                        id: 'x_header_value',
+                        type: 'text',
+                        className: 'x-header',
+                        placeholder: 'Set token (usually add prefix "Bearer" for "Authorization" header)',
+                        style: {height: '16px', width: '400px'},
+                        title: 'Header value (token) for the authorization',
+                        value: getToken() || document.token || null,
+                    }),
+                    React.createElement('button', {
+                            className: 'x-header',
+                            onClick: () => {
+                                document.token = getToken();
+                                document.body.innerHTML = '';
+                                document.body.outerHTML = 'Loading...';
+                                renderPage();
+                            },
+                            style: {height: '24px'},
+                            title: 'Click the button to load schema when the token specified',
+                        },
+                        'Reload schema',
+                    ),
+                ),
+                React.createElement(GraphiQL, {
+                    fetcher: graphQLFetcher
+                }),
+            ),
+            document.body,
+        );
+    };
+    renderPage();
+{% endblock graphiql_render %}

src/Resources/views/GraphiQL/index.html.twig

@@ -34,21 +34,21 @@
   {% block body_loading %}Loading...{% endblock body_loading %}
   {% block body_script %}
     <script>
-      var endpoint = {{ endpoint | json_encode | raw }}
+      var endpoint = {{ endpoint | json_encode | raw }};
 
         function graphQLFetcher(params) {
           {% block fetcher_function_body %}
           var headers
 
           {% block graphql_fetcher_headers %}
           headers = {
-            "Accept": "application/json",
-            "Content-Type": "application/json",
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
           }
           {% endblock graphql_fetcher_headers %}
 
           return fetch(endpoint, {
-              method: "post",
+              method: 'post',
               headers: headers,
               body: JSON.stringify(params),
               credentials: 'include',
@@ -65,6 +65,7 @@
           {% endblock fetcher_function_body %}
         }
 
+      {% block graphiql_render %}
       ReactDOM.render(
         React.createElement(GraphiQL, {
           {% block graphiql_params %}
@@ -73,6 +74,7 @@
         }),
         document.body
       )
+      {% endblock graphiql_render %}
     </script>
   {% endblock body_script %}
 {% endblock body %}