-
-
Notifications
You must be signed in to change notification settings - Fork 548
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f8527d7
commit d709cf7
Showing
1 changed file
with
39 additions
and
63 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,53 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <head> | ||
| <title>GraphiQL ‹ Statamic</title> | ||
| <style> | ||
| html, | ||
| body { | ||
| height: 100%; | ||
| margin: 0; | ||
| overflow: hidden; | ||
| width: 100%; | ||
| } | ||
| #graphiql { | ||
| height: 100vh; | ||
| } | ||
| body { | ||
| height: 100%; | ||
| margin: 0; | ||
| width: 100%; | ||
| overflow: hidden; | ||
| } | ||
| #graphiql { | ||
| height: 100vh; | ||
| } | ||
| </style> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/graphiqlWithExtensions.css" integrity="sha384-GBqwox+q8UtVEyBLBKloN5QDlBDsQnuoSUfMeJH1ZtDiCrrk103D7Bg/WjIvl4ya" crossorigin="anonymous" /> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/fetch.min.js" integrity="sha384-dcF7KoWRaRpjcNbVPUFgatYgAijf8DqW6NWuqLdfB5Sb4Cdbb8iHX7bHsl9YhpKa" crossorigin="anonymous"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js" integrity="sha384-qn+ML/QkkJxqn4LLs1zjaKxlTg2Bl/6yU/xBTJAgxkmNGc6kMZyeskAG0a7eJBR1" crossorigin="anonymous"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js" integrity="sha384-85IMG5rvmoDsmMeWK/qUU4kwnYXVpC+o9hoHMLi4bpNR+gMEiPLrvkZCgsr7WWgV" crossorigin="anonymous"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/graphiqlWithExtensions.min.js" integrity="sha384-TqI6gT2PjmSrnEOTvGHLad1U4Vm5VoyzMmcKK0C/PLCWTnwPyXhCJY6NYhC/tp19" crossorigin="anonymous"></script> | ||
| </head> | ||
| <body> | ||
| <div id="graphiql"></div> | ||
| <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> | ||
| <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> | ||
| <script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script> | ||
| <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" /> | ||
| <script src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js" crossorigin></script> | ||
| <link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" /> | ||
| </head> | ||
| <body> | ||
| <div id="graphiql">Loading...</div> | ||
| <script> | ||
| var fetchURL = '{{ $url }}'; | ||
| var xcsrfToken = null; | ||
| function graphQLFetcher(graphQLParams) { | ||
| var headers = { | ||
| const root = ReactDOM.createRoot(document.getElementById('graphiql')); | ||
| const fetcher = GraphiQL.createFetcher({ | ||
| url: '{{ $url }}', | ||
| headers: { | ||
| Accept: 'application/json', | ||
| 'Content-Type': 'application/json', | ||
| 'x-csrf-token': xcsrfToken || '{{ csrf_token() }}' | ||
| }; | ||
| return fetch(fetchURL, { | ||
| method: 'post', | ||
| headers: headers, | ||
| body: JSON.stringify(graphQLParams), | ||
| }) | ||
| .then(function(response) { | ||
| xcsrfToken = response.headers.get('x-csrf-token'); | ||
| return response.text(); | ||
| }) | ||
| .then(function(responseBody) { | ||
| try { | ||
| return JSON.parse(responseBody); | ||
| } catch (error) { | ||
| return responseBody; | ||
| } | ||
| }); | ||
| } | ||
| const defaultQuery = `# Welcome to GraphiQL | ||
| # | ||
| # GraphiQL is an in-browser tool for writing, validating, and | ||
| # testing GraphQL queries. | ||
| # | ||
| # Type queries into this side of the screen, and you will see intelligent | ||
| # typeaheads aware of the current GraphQL type schema and live syntax and | ||
| # validation errors highlighted within the text. | ||
| # | ||
| # You can use the "Explorer" to click and build your queries | ||
| # | ||
| # GraphQL queries typically start with a "{" character. Lines that start | ||
| # with a # are ignored. | ||
| `; | ||
| ReactDOM.render( | ||
| React.createElement(GraphiQLWithExtensions.GraphiQLWithExtensions, { | ||
| fetcher: graphQLFetcher, | ||
| defaultQuery: defaultQuery | ||
| }, | ||
| fetch: async (fetchURL, fetchOptions) => { | ||
| return await fetch(fetchURL, fetchOptions).then((response) => { | ||
| xcsrfToken = response.headers.get('x-csrf-token'); | ||
| return response; | ||
| }); | ||
| }, | ||
| }); | ||
| const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin(); | ||
| root.render( | ||
| React.createElement(GraphiQL, { | ||
| fetcher, | ||
| defaultEditorToolsVisibility: true, | ||
| plugins: [explorerPlugin], | ||
| }), | ||
| document.getElementById('graphiql'), | ||
| ); | ||
| </script> | ||
| </body> | ||
| </body> | ||
| </html> |