Created
August 19, 2024 17:58
-
-
Save o-az/f59a7f47958ed2313f837df2abf6b6ff to your computer and use it in GitHub Desktop.
example of graphiql playground in an html page. Play here https://codepen.io/o-az/pen/poXaZxj?editors=1000
This file contains hidden or 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
| <html lang='en'> | |
| <head> | |
| <title>GraphiQL</title> | |
| <Style> | |
| body { | |
| margin: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| #graphiql { | |
| height: 100vh; | |
| } | |
| .graphiql-table { | |
| color: #F9F9F9; | |
| } | |
| </Style> | |
| <link rel='icon' href='https://union.build/favicon.svg' type='image/svg+xml'> | |
| </link> | |
| <link rel='stylesheet' href='https://unpkg.com/graphiql/graphiql.min.css' /> | |
| <link rel='stylesheet' href='https://unpkg.com/@graphiql/plugin-explorer/dist/style.css' /> | |
| </head> | |
| <body> | |
| <main id='graphiql'>...</main> | |
| <script crossOrigin="true" src='https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js'></script> | |
| <script crossOrigin="true" src='https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js'></script> | |
| <script crossOrigin="true" src='https://unpkg.com/graphiql/graphiql.min.js'></script> | |
| <script crossOrigin="true" src='https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js'></script> | |
| <script> | |
| const graphqlElement = document.querySelector('main#graphiql') | |
| const root = ReactDOM.createRoot(graphqlElement) | |
| const GRAPHQL_ENDPOINT = "https://swapi-graphql.netlify.app/.netlify/functions/index" | |
| const fetcher = GraphiQL.createFetcher({ | |
| url: GRAPHQL_ENDPOINT, | |
| enableIncrementalDelivery: true, | |
| headers: { | |
| "X-Custom-Header": "lorem-ipsum" | |
| } | |
| }) | |
| const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin() | |
| root.render( | |
| React.createElement(GraphiQL, { | |
| fetcher, | |
| plugins: [explorerPlugin], | |
| defaultEditorToolsVisibility: true, | |
| defaultQuery: "query Foo { film { releaseDate } }", | |
| }) | |
| ) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment