|
2 | 2 | <html>
|
3 | 3 | <head>
|
4 | 4 | <link rel="stylesheet" href="{{ url_for("graphql.static", filename="graphiql.css") }}" />
|
5 |
| - <script src="{{ url_for("graphql.static", filename="react.min.js") }}"></script> |
6 | 5 | <script src="{{ url_for("graphql.static", filename="fetch.min.js") }}"></script>
|
| 6 | + <script src="{{ url_for("graphql.static", filename="react.min.js") }}"></script> |
| 7 | + <script src="{{ url_for("graphql.static", filename="react-dom.min.js") }}"></script> |
7 | 8 | <script src="{{ url_for("graphql.static", filename="graphiql.min.js") }}"></script>
|
8 | 9 | </head>
|
9 |
| - <body> |
10 |
| - Loading... |
11 |
| - <script> |
| 10 | +<body> |
| 11 | + <script> |
| 12 | + // Collect the URL parameters |
| 13 | + var parameters = {}; |
| 14 | + window.location.search.substr(1).split('&').forEach(function (entry) { |
| 15 | + var eq = entry.indexOf('='); |
| 16 | + if (eq >= 0) { |
| 17 | + parameters[decodeURIComponent(entry.slice(0, eq))] = |
| 18 | + decodeURIComponent(entry.slice(eq + 1)); |
| 19 | + } |
| 20 | + }); |
12 | 21 |
|
13 |
| - /** |
14 |
| - * This GraphiQL example illustrates how to use some of GraphiQL's props |
15 |
| - * in order to enable reading and updating the URL parameters, making |
16 |
| - * link sharing of queries a little bit easier. |
17 |
| - * |
18 |
| - * This is only one example of this kind of feature, GraphiQL exposes |
19 |
| - * various React params to enable interesting integrations. |
20 |
| - */ |
| 22 | + // Produce a Location query string from a parameter object. |
| 23 | + function locationQuery(params) { |
| 24 | + return '?' + Object.keys(params).map(function (key) { |
| 25 | + return encodeURIComponent(key) + '=' + |
| 26 | + encodeURIComponent(params[key]); |
| 27 | + }).join('&'); |
| 28 | + } |
21 | 29 |
|
22 |
| - // Parse the search string to get url parameters. |
23 |
| - var search = window.location.search; |
24 |
| - var parameters = {}; |
25 |
| - search.substr(1).split('&').forEach(function (entry) { |
26 |
| - var eq = entry.indexOf('='); |
27 |
| - if (eq >= 0) { |
28 |
| - parameters[decodeURIComponent(entry.slice(0, eq))] = |
29 |
| - decodeURIComponent(entry.slice(eq + 1)); |
30 |
| - } |
31 |
| - }); |
| 30 | + // Derive a fetch URL from the current URL, sans the GraphQL parameters. |
| 31 | + var graphqlParamNames = { |
| 32 | + query: true, |
| 33 | + variables: true, |
| 34 | + operationName: true |
| 35 | + }; |
32 | 36 |
|
33 |
| - // if variables was provided, try to format it. |
34 |
| - if (parameters.variables) { |
35 |
| - try { |
36 |
| - parameters.variables = |
37 |
| - JSON.stringify(JSON.parse(query.variables), null, 2); |
38 |
| - } catch (e) { |
39 |
| - // Do nothing, we want to display the invalid JSON as a string, rather |
40 |
| - // than present an error. |
41 |
| - } |
| 37 | + var otherParams = {}; |
| 38 | + for (var k in parameters) { |
| 39 | + if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) { |
| 40 | + otherParams[k] = parameters[k]; |
42 | 41 | }
|
| 42 | + } |
| 43 | + var fetchURL = "{{ url_for('graphql') }}"; |
43 | 44 |
|
44 |
| - // When the query and variables string is edited, update the URL bar so |
45 |
| - // that it can be easily shared |
46 |
| - function onEditQuery(newQuery) { |
47 |
| - parameters.query = newQuery; |
48 |
| - updateURL(); |
49 |
| - } |
| 45 | + // Defines a GraphQL fetcher using the fetch API. |
| 46 | + function graphQLFetcher(graphQLParams) { |
| 47 | + return fetch(fetchURL, { |
| 48 | + method: 'post', |
| 49 | + headers: { |
| 50 | + 'Accept': 'application/json', |
| 51 | + 'Content-Type': 'application/json' |
| 52 | + }, |
| 53 | + body: JSON.stringify(graphQLParams), |
| 54 | + credentials: 'include', |
| 55 | + }).then(function (response) { |
| 56 | + return response.json(); |
| 57 | + }); |
| 58 | + } |
50 | 59 |
|
51 |
| - function onEditVariables(newVariables) { |
52 |
| - parameters.variables = newVariables; |
53 |
| - updateURL(); |
54 |
| - } |
| 60 | + // When the query and variables string is edited, update the URL bar so |
| 61 | + // that it can be easily shared. |
| 62 | + function onEditQuery(newQuery) { |
| 63 | + parameters.query = newQuery; |
| 64 | + updateURL(); |
| 65 | + } |
55 | 66 |
|
56 |
| - function updateURL() { |
57 |
| - var newSearch = '?' + Object.keys(parameters).map(function (key) { |
58 |
| - return encodeURIComponent(key) + '=' + |
59 |
| - encodeURIComponent(parameters[key]); |
60 |
| - }).join('&'); |
61 |
| - history.replaceState(null, null, newSearch); |
62 |
| - } |
| 67 | + function onEditVariables(newVariables) { |
| 68 | + parameters.variables = newVariables; |
| 69 | + updateURL(); |
| 70 | + } |
63 | 71 |
|
64 |
| - // Defines a GraphQL fetcher using the fetch API. |
65 |
| - function graphQLFetcher(graphQLParams) { |
66 |
| - console.log(graphQLParams); |
67 |
| - return fetch(window.location.origin + '/graphql', { |
68 |
| - method: 'post', |
69 |
| - headers: { 'Content-Type': 'application/json' }, |
70 |
| - body: JSON.stringify(graphQLParams), |
71 |
| - }).then(function (response) { |
72 |
| - return response.json() |
73 |
| - }); |
74 |
| - } |
| 72 | + function updateURL() { |
| 73 | + history.replaceState(null, null, locationQuery(parameters)); |
| 74 | + } |
75 | 75 |
|
76 |
| - // Render <GraphiQL /> into the body. |
77 |
| - React.render( |
78 |
| - React.createElement(GraphiQL, { |
79 |
| - fetcher: graphQLFetcher, |
80 |
| - query: parameters.query, |
81 |
| - variables: parameters.variables, |
82 |
| - onEditQuery: onEditQuery, |
83 |
| - onEditVariables: onEditVariables, |
| 76 | + // Render <GraphiQL /> into the body. |
| 77 | + React.render( |
| 78 | + React.createElement(GraphiQL, { |
| 79 | + fetcher: graphQLFetcher, |
| 80 | + onEditQuery: onEditQuery, |
| 81 | + onEditVariables: onEditVariables, |
84 | 82 | {%- if default_query %}
|
85 | 83 | defaultQuery: {{ default_query|tojson }},
|
86 | 84 | {%- endif %}
|
87 |
| - }), |
88 |
| - document.body |
89 |
| - ); |
90 |
| - </script> |
91 |
| - </body> |
| 85 | + query: undefined, |
| 86 | + response: null, |
| 87 | + variables: null |
| 88 | + }), |
| 89 | + document.body |
| 90 | + ); |
| 91 | + </script> |
| 92 | +</body> |
92 | 93 | </html>
|
| 94 | + |
0 commit comments