-
Notifications
You must be signed in to change notification settings - Fork 1.7k
/
renderExample.js
106 lines (95 loc) · 2.9 KB
/
renderExample.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
/* global React, ReactDOM, GraphiQL, GraphQLVersion */
/**
* UMD GraphiQL Example
*
* This is a simple example that provides a primitive query string parser on top of GraphiQL props
* It assumes a global umd GraphiQL, which would be provided by an index.html in the default example
*
* It is used by:
* - the netlify demo
* - end to end tests
* - webpack dev server
*/
// Parse the search string to get url parameters.
const parameters = {};
for (const entry of window.location.search.slice(1).split('&')) {
const eq = entry.indexOf('=');
if (eq >= 0) {
parameters[decodeURIComponent(entry.slice(0, eq))] = decodeURIComponent(
entry.slice(eq + 1),
);
}
}
// When the query and variables string is edited, update the URL bar so
// that it can be easily shared.
function onEditQuery(newQuery) {
parameters.query = newQuery;
updateURL();
}
function onEditVariables(newVariables) {
parameters.variables = newVariables;
updateURL();
}
function onEditHeaders(newHeaders) {
parameters.headers = newHeaders;
updateURL();
}
function onTabChange(tabsState) {
const activeTab = tabsState.tabs[tabsState.activeTabIndex];
parameters.query = activeTab.query;
parameters.variables = activeTab.variables;
parameters.headers = activeTab.headers;
updateURL();
}
function updateURL() {
const newSearch = Object.entries(parameters)
.filter(([_key, value]) => value)
.map(
([key, value]) =>
encodeURIComponent(key) + '=' + encodeURIComponent(value),
)
.join('&');
history.replaceState(null, null, `?${newSearch}`);
}
function getSchemaUrl() {
const isDev = window.location.hostname.match(/localhost$/);
if (isDev) {
// This supports an e2e test which ensures that invalid schemas do not load.
if (parameters.bad === 'true') {
return '/bad/graphql';
}
if (parameters['http-error'] === 'true') {
return '/http-error/graphql';
}
if (parameters['graphql-error'] === 'true') {
return '/graphql-error/graphql';
}
return '/graphql';
}
return '/.netlify/functions/graphql';
}
// Render <GraphiQL /> into the body.
// See the README in the top level of this module to learn more about
// how you can customize GraphiQL by providing different values or
// additional child elements.
const root = ReactDOM.createRoot(document.getElementById('graphiql'));
root.render(
React.createElement(GraphiQL, {
fetcher: GraphiQL.createFetcher({
url: getSchemaUrl(),
subscriptionUrl: 'ws://localhost:8081/subscriptions',
}),
query: parameters.query,
variables: parameters.variables,
headers: parameters.headers,
defaultHeaders: parameters.defaultHeaders,
onEditQuery,
onEditVariables,
onEditHeaders,
defaultEditorToolsVisibility: true,
isHeadersEditorEnabled: true,
shouldPersistHeaders: true,
inputValueDeprecation: GraphQLVersion.includes('15.5') ? undefined : true,
onTabChange,
}),
);