12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- <!--
- * Copyright (c) 2021 GraphQL Contributors
- * All rights reserved.
- *
- * This source code is licensed under the license found in the
- * LICENSE file in the root directory of this source tree.
- -->
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- body {
- height: 100%;
- margin: 0;
- width: 100%;
- overflow: hidden;
- }
- #graphiql {
- height: 100vh;
- }
- </style>
- <script
- type="text/javascript"
- src="https://unpkg.com/graphql-ws/umd/graphql-ws.min.js"
- ></script>
- <!--
- This GraphiQL example depends on Promise and fetch, which are available in
- modern browsers, but can be "polyfilled" for older browsers.
- GraphiQL itself depends on React DOM.
- If you do not want to rely on a CDN, you can host these files locally or
- include them directly in your favored resource bunder.
- -->
- <script
- crossorigin
- src="https://unpkg.com/react@17/umd/react.development.js"
- ></script>
- <script
- crossorigin
- src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
- ></script>
- <!--
- These two files can be found in the npm module, however you may wish to
- copy them directly into your environment, or perhaps include them in your
- favored resource bundler.
- -->
- <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
- </head>
- <body>
- <div id="graphiql">Loading...</div>
- <script
- src="https://unpkg.com/graphiql/graphiql.min.js"
- type="application/javascript"
- ></script>
- <script>
- const fetcher = GraphiQL.createFetcher({
- url: 'https://whaley.diffey.dev/backend/graphql',
- wsClient: graphqlWs.createClient({
- url: 'wss://whaley.diffey.dev/backend/graphql',
- }),
- });
- ReactDOM.render(
- React.createElement(GraphiQL, {
- fetcher,
- defaultVariableEditorOpen: true,
- }),
- document.getElementById('graphiql'),
- );
- </script>
- </body>
- </html>
|