Skip to content

Commit 4d39d8b

Browse files
alanpoulainalanpoulain
committed
Add graphiql-explorer and bump js dependencies
1 parent 6e47bba commit 4d39d8b

File tree

12 files changed

+562
-554
lines changed

12 files changed

+562
-554
lines changed

‎src/Bridge/Symfony/Bundle/Resources/public/graphiql/graphiql.css‎

Lines changed: 77 additions & 208 deletions
Large diffs are not rendered by default.

‎src/Bridge/Symfony/Bundle/Resources/public/graphiql/graphiql.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Bridge/Symfony/Bundle/Resources/public/graphiql/graphiqlExplorer.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 159 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,7 @@
1-
var initParameters = {};
2-
var entrypoint = null;
3-
4-
function onEditQuery(newQuery) {
5-
initParameters.query = newQuery;
6-
updateURL();
7-
}
8-
9-
function onEditVariables(newVariables) {
10-
initParameters.variables = newVariables;
11-
updateURL();
12-
}
13-
14-
function onEditOperationName(newOperationName) {
15-
initParameters.operationName = newOperationName;
16-
updateURL();
17-
}
18-
19-
function updateURL() {
20-
var newSearch = '?' + Object.keys(initParameters).filter(function (key) {
21-
return Boolean(initParameters[key]);
22-
}).map(function (key) {
23-
return encodeURIComponent(key) + '=' + encodeURIComponent(initParameters[key]);
24-
}).join('&');
25-
history.replaceState(null, null, newSearch);
26-
}
27-
28-
function graphQLFetcher(graphQLParams) {
29-
return fetch(entrypoint, {
30-
method: 'post',
31-
headers: {
32-
'Accept': 'application/json',
33-
'Content-Type': 'application/json'
34-
},
35-
body: JSON.stringify(graphQLParams),
36-
credentials: 'include'
37-
}).then(function (response) {
38-
return response.text();
39-
}).then(function (responseBody) {
40-
try {
41-
return JSON.parse(responseBody);
42-
} catch (error) {
43-
return responseBody;
44-
}
45-
});
46-
}
47-
481
window.onload = function() {
492
var data = JSON.parse(document.getElementById('graphiql-data').innerText);
50-
entrypoint = data.entrypoint;
3+
var entrypoint = data.entrypoint;
4+
var initParameters = {};
515

526
var search = window.location.search;
537
search.substr(1).split('&').forEach(function (entry) {
@@ -65,16 +19,161 @@ window.onload = function() {
6519
}
6620
}
6721

68-
ReactDOM.render(
69-
React.createElement(GraphiQL, {
70-
fetcher: graphQLFetcher,
71-
query: initParameters.query,
72-
variables: initParameters.variables,
73-
operationName: initParameters.operationName,
74-
onEditQuery: onEditQuery,
75-
onEditVariables: onEditVariables,
76-
onEditOperationName: onEditOperationName
77-
}),
78-
document.getElementById('graphiql')
79-
);
22+
function App() {
23+
var self = this;
24+
var graphiql = GraphiQL;
25+
26+
var useStateParameters = React.useState(initParameters);
27+
var parameters = useStateParameters[0];
28+
var setParameters = useStateParameters[1];
29+
30+
var useStateQuery = React.useState(parameters.query);
31+
var query = useStateQuery[0];
32+
var setQuery = useStateQuery[1];
33+
34+
var useStateExplorerIsOpen = React.useState(true);
35+
var explorerIsOpen = useStateExplorerIsOpen[0];
36+
var setExplorerIsOpen = useStateExplorerIsOpen[1];
37+
38+
function graphQLFetcher(graphQLParams) {
39+
return fetch(entrypoint, {
40+
method: 'post',
41+
headers: {
42+
'Accept': 'application/json',
43+
'Content-Type': 'application/json'
44+
},
45+
body: JSON.stringify(graphQLParams),
46+
credentials: 'include'
47+
}).then(function (response) {
48+
return response.text();
49+
}).then(function (responseBody) {
50+
try {
51+
return JSON.parse(responseBody);
52+
} catch (error) {
53+
return responseBody;
54+
}
55+
});
56+
}
57+
58+
function onEditQuery(newQuery) {
59+
setParameters(Object.assign(parameters, {query: newQuery}));
60+
setQuery(newQuery);
61+
updateURL();
62+
}
63+
64+
function onEditVariables(newVariables) {
65+
setParameters(Object.assign(parameters, {variables: newVariables}));
66+
updateURL();
67+
}
68+
69+
function onEditOperationName(newOperationName) {
70+
setParameters(Object.assign(parameters, {operationName: newOperationName}));
71+
updateURL();
72+
}
73+
74+
function onRunOperation(operationName) {
75+
self.graphiql.handleRunQuery(operationName);
76+
}
77+
78+
function updateURL() {
79+
var newSearch = '?' + Object.keys(parameters).filter(function (key) {
80+
return Boolean(parameters[key]);
81+
}).map(function (key) {
82+
return encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]);
83+
}).join('&');
84+
history.replaceState(null, null, newSearch);
85+
}
86+
87+
function handleToggleExplorer() {
88+
setExplorerIsOpen(!explorerIsOpen)
89+
}
90+
91+
function handlePrettifyQuery() {
92+
self.graphiql.handlePrettifyQuery();
93+
}
94+
95+
function handleMergeQuery() {
96+
self.graphiql.handleMergeQuery();
97+
}
98+
99+
function handleCopyQuery() {
100+
self.graphiql.handleCopyQuery();
101+
}
102+
103+
function handleToggleHistory() {
104+
self.graphiql.handleToggleHistory();
105+
}
106+
107+
return React.createElement(
108+
'div',
109+
{className: 'graphiql-container'},
110+
React.createElement(GraphiQLExplorer.Explorer, {
111+
fetcher: graphQLFetcher,
112+
query: query,
113+
onEdit: onEditQuery,
114+
onRunOperation: onRunOperation,
115+
explorerIsOpen: explorerIsOpen,
116+
onToggleExplorer: handleToggleExplorer
117+
}),
118+
React.createElement(
119+
GraphiQL,
120+
{
121+
ref: function (ref) { self.graphiql = ref },
122+
fetcher: graphQLFetcher,
123+
query: query,
124+
variables: parameters.variables,
125+
operationName: parameters.operationName,
126+
onEditQuery: onEditQuery,
127+
onEditVariables: onEditVariables,
128+
onEditOperationName: onEditOperationName
129+
},
130+
React.createElement(
131+
GraphiQL.Toolbar,
132+
{},
133+
React.createElement(
134+
GraphiQL.ToolbarButton,
135+
{
136+
onClick: handlePrettifyQuery,
137+
label: 'Prettify',
138+
title: 'Prettify Query (Shift-Ctrl-P)'
139+
}
140+
),
141+
React.createElement(
142+
GraphiQL.ToolbarButton,
143+
{
144+
onClick: handleMergeQuery,
145+
label: 'Merge',
146+
title: 'Merge Query (Shift-Ctrl-M)'
147+
}
148+
),
149+
React.createElement(
150+
GraphiQL.ToolbarButton,
151+
{
152+
onClick: handleCopyQuery,
153+
label: 'Copy',
154+
title: 'Copy Query (Shift-Ctrl-C)'
155+
}
156+
),
157+
React.createElement(
158+
GraphiQL.ToolbarButton,
159+
{
160+
onClick: handleToggleHistory,
161+
label: 'History',
162+
title: 'Show History'
163+
}
164+
),
165+
React.createElement(
166+
GraphiQL.ToolbarButton,
167+
{
168+
onClick: handleToggleExplorer,
169+
label: 'Explorer',
170+
title: 'Show Explorer'
171+
}
172+
)
173+
)
174+
)
175+
);
176+
}
177+
178+
ReactDOM.render(React.createElement(App), document.getElementById('graphiql'));
80179
}

0 commit comments

Comments
 (0)