diff --git a/.gitignore b/.gitignore index 08b2c21..f89622e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +.idea phpunit.xml /build /vendor diff --git a/README.md b/README.md index 957aefa..ec21aff 100644 --- a/README.md +++ b/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 --------- diff --git a/docs/auth-token.png b/docs/auth-token.png new file mode 100644 index 0000000..be392d2 Binary files /dev/null and b/docs/auth-token.png differ diff --git a/src/Resources/doc/custom-http-headers.md b/docs/custom-http-headers.md similarity index 100% rename from src/Resources/doc/custom-http-headers.md rename to docs/custom-http-headers.md diff --git a/docs/custom-parameters.md b/docs/custom-parameters.md new file mode 100644 index 0000000..0e1a068 --- /dev/null +++ b/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 %} +``` diff --git a/docs/custom-rendering.md b/docs/custom-rendering.md new file mode 100644 index 0000000..371faa9 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/docs/graphql-endpoint.md b/docs/graphql-endpoint.md new file mode 100644 index 0000000..7fb708e --- /dev/null +++ b/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 + $name], + ]; + } +} +``` + +It must return an array of packed params which will be passed to `RouterInterface::generate` like this +`$router->generate(...$returnedValueOfTheGetByNameMethod)`. + \ No newline at end of file diff --git a/src/Resources/doc/libraries-versions.md b/docs/libraries-versions.md similarity index 100% rename from src/Resources/doc/libraries-versions.md rename to docs/libraries-versions.md diff --git a/src/Resources/views/GraphiQL/auth.html.twig b/src/Resources/views/GraphiQL/auth.html.twig new file mode 100644 index 0000000..4724753 --- /dev/null +++ b/src/Resources/views/GraphiQL/auth.html.twig @@ -0,0 +1,73 @@ +{% extends '@OverblogGraphiQL/GraphiQL/index.html.twig' %} + +{% block style %} + {{ parent() }} + +{% 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 %} \ No newline at end of file diff --git a/src/Resources/views/GraphiQL/index.html.twig b/src/Resources/views/GraphiQL/index.html.twig index d810bc2..47ea2fe 100644 --- a/src/Resources/views/GraphiQL/index.html.twig +++ b/src/Resources/views/GraphiQL/index.html.twig @@ -34,7 +34,7 @@ {% block body_loading %}Loading...{% endblock body_loading %} {% block body_script %} {% endblock body_script %} {% endblock body %}