Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New interface to accept symfony dumb object into graphiql tab panel #26

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

New interface to accept symfony dumb object into graphiql tab panel #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b4e9d4f
using graphiql to work with symfony dumb
viniciusrangelfp May 14, 2020
2754faa
using graphiql to work with symfony dumb
viniciusrangelfp May 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,13 @@ Done

It's done now, navigate to `/graphiql` in your project url

Details: You can use graphiql panel to debug your application using symfony dumb.
You can dump information anywhere and see the result into graphiql view.

More
------------

* [Custom Logo](Resources/doc/custom-logo.md)
* [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)
Expand Down
22 changes: 22 additions & 0 deletions Resources/doc/custom-logo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
Custom logo
==============

By default the GraphiQL header will display GraphiQL logo.

You can change your logo using a custom variable on twig file.
```twig
{# templates/GraphiQL/index.html.twig #}
{% extends '@OverblogGraphiQL/GraphiQL/index.html.twig' %}

{% set logoPath = 'https://mylink.com/images/logo.png' %}
```

You can also work with local images
You can change your logo using a custom variable on twig file.
```twig
{# templates/GraphiQL/index.html.twig #}
{% extends '@OverblogGraphiQL/GraphiQL/index.html.twig' %}

{# move the file mylogo.png to public folder #}
{% set logoPath = 'mylogo.png' %}
```
49 changes: 42 additions & 7 deletions Resources/views/GraphiQL/index.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,18 @@
{% block head %}
{% block style %}
<style>
html, body {
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
#root .footer {
top:0;
left:0;
position:absolute;
width:100%;
}
</style>
<link href="https://unpkg.com/graphiql@{{ versions.graphiql }}/graphiql.css" rel="stylesheet">
{% endblock style %}
Expand All @@ -30,6 +36,7 @@
{% endblock head %}
</head>
<body>
<div id="root"></div>
{% block body %}
{% block body_loading %}Loading...{% endblock body_loading %}
{% block body_script %}
Expand All @@ -47,32 +54,60 @@
}
{% endblock graphql_fetcher_headers %}

var footer = document.getElementsByClassName('footer');
footer = footer[0] || null;

return fetch(endpoint, {
method: "post",
headers: headers,
body: JSON.stringify(params),
credentials: 'include',
}).then((res) => {
{% block post_fetch %}{% endblock post_fetch %}
footer.innerHTML = '';
return res.text()
}).then((body) => {
try {
return JSON.parse(body)
} catch (err) {
if(typeof(body) === 'string'){
if(footer){
footer.innerHTML += body;
}
return '';
}
return body
}
})
{% endblock fetcher_function_body %}
}

ReactDOM.render(
React.createElement(GraphiQL, {
{% block graphiql_params %}
fetcher: graphQLFetcher
{% endblock graphiql_params %}
}),
document.body
React.createElement(GraphiQL,
{
{% block graphiql_params %}
fetcher: graphQLFetcher
{% endblock graphiql_params %}
},
{%if logoPath is defined %}
React.createElement(
GraphiQL.Logo,
{},
React.createElement(
'img',
{src:"{{ logoPath }}" }
)
),
{% endif %}
React.createElement(
GraphiQL.Footer,
{},
''
)
),
document.getElementById('root')
)

</script>
{% endblock body_script %}
{% endblock body %}
Expand Down