diff --git a/README.md b/README.md index 1f9491b..56b5210 100644 --- a/README.md +++ b/README.md @@ -86,6 +86,7 @@ More ------------ * [Custom HTTP headers](Resources/doc/custom-http-headers.md) +* [Custom GraphiQL parameters](Resources/doc/custom-parameters.md) * [Define JavaScript libraries' versions](Resources/doc/libraries-versions.md) * [Define a custom GraphQL endpoint](Resources/doc/graphql-endpoint.md) diff --git a/Resources/doc/custom-parameters.md b/Resources/doc/custom-parameters.md new file mode 100644 index 0000000..0e1a068 --- /dev/null +++ b/Resources/doc/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/Resources/views/GraphiQL/index.html.twig b/Resources/views/GraphiQL/index.html.twig index 0cf897d..ada9714 100644 --- a/Resources/views/GraphiQL/index.html.twig +++ b/Resources/views/GraphiQL/index.html.twig @@ -58,7 +58,9 @@ ReactDOM.render( React.createElement(GraphiQL, { + {% block graphiql_params %} fetcher: graphQLFetcher + {% endblock graphiql_params %} }), document.body )