graphiql.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. {% comment %}
  2. This template derives from the strawberry-graphql project:
  3. https://github.com/strawberry-graphql/strawberry/blob/main/strawberry/static/graphiql.html
  4. {% endcomment %}
  5. <!--
  6. The request to this GraphQL server provided the header "Accept: text/html"
  7. and as a result has been presented GraphiQL - an in-browser IDE for
  8. exploring GraphQL.
  9. If you wish to receive JSON, provide the header "Accept: application/json" or
  10. add "&raw" to the end of the URL within a browser.
  11. -->
  12. {% load static %}
  13. <!DOCTYPE html>
  14. <html>
  15. <head>
  16. <title>GraphiQL | NetBox</title>
  17. <link
  18. rel="icon"
  19. href="data:image/svg+xml,
  20. <svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>
  21. <!-- Strawberry Emoji as a HTML Entity (hex) -->
  22. <text y=%22.9em%22 font-size=%2280%22>&#x1f353;</text>
  23. </svg>"
  24. />
  25. <style>
  26. body {
  27. height: 100%;
  28. margin: 0;
  29. width: 100%;
  30. overflow: hidden;
  31. }
  32. #graphiql {
  33. height: 100vh;
  34. display: flex;
  35. }
  36. .docExplorerHide {
  37. display: none;
  38. }
  39. .doc-explorer-contents {
  40. overflow-y: hidden !important;
  41. }
  42. .docExplorerWrap {
  43. width: unset !important;
  44. min-width: unset !important;
  45. }
  46. .graphiql-explorer-actions select {
  47. margin-left: 4px;
  48. }
  49. </style>
  50. <script src="{% static 'graphiql/react.production.min.js' %}"></script>
  51. <script src="{% static 'graphiql/react-dom.production.min.js' %}"></script>
  52. <script src="{% static 'graphiql/js.cookie.min.js' %}"></script>
  53. <link rel="stylesheet" href="{% static 'graphiql/graphiql.min.css' %}"/>
  54. <link rel="stylesheet" href="{% static 'graphiql/plugin-explorer-style.css' %}"/>
  55. </head>
  56. <body>
  57. <div id="graphiql" class="graphiql-container">Loading...</div>
  58. <script src="{% static 'graphiql/graphiql.min.js' %}"></script>
  59. <script src="{% static 'graphiql/index.umd.js' %}"></script>
  60. <script>
  61. const EXAMPLE_QUERY = `# Welcome to GraphiQL 🍓
  62. #
  63. # GraphiQL is an in-browser tool for writing, validating, and
  64. # testing GraphQL queries.
  65. #
  66. # Type queries into this side of the screen, and you will see intelligent
  67. # typeaheads aware of the current GraphQL type schema and live syntax and
  68. # validation errors highlighted within the text.
  69. #
  70. # GraphQL queries typically start with a "{" character. Lines that starts
  71. # with a # are ignored.
  72. #
  73. # An example GraphQL query might look like:
  74. #
  75. # {
  76. # field(arg: "value") {
  77. # subField
  78. # }
  79. # }
  80. #
  81. # Keyboard shortcuts:
  82. #
  83. # Run Query: Ctrl-Enter (or press the play button above)
  84. #
  85. # Auto Complete: Ctrl-Space (or just start typing)
  86. #
  87. `;
  88. const fetchURL = window.location.href;
  89. function httpUrlToWebSockeUrl(url) {
  90. const parsedURL = new URL(url);
  91. const protocol = parsedURL.protocol === "http:" ? "ws:" : "wss:";
  92. parsedURL.protocol = protocol;
  93. parsedURL.hash = "";
  94. return parsedURL.toString();
  95. }
  96. const headers = {};
  97. const csrfToken = Cookies.get("csrftoken");
  98. if (csrfToken) {
  99. headers["x-csrftoken"] = csrfToken;
  100. }
  101. const subscriptionsEnabled = JSON.parse("{{ SUBSCRIPTION_ENABLED }}");
  102. const subscriptionUrl = subscriptionsEnabled
  103. ? httpUrlToWebSockeUrl(fetchURL)
  104. : null;
  105. const fetcher = GraphiQL.createFetcher({
  106. url: fetchURL,
  107. headers: headers,
  108. subscriptionUrl,
  109. });
  110. const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
  111. const root = ReactDOM.createRoot(document.getElementById("graphiql"));
  112. root.render(
  113. React.createElement(GraphiQL, {
  114. fetcher: fetcher,
  115. defaultEditorToolsVisibility: true,
  116. plugins: [explorerPlugin],
  117. inputValueDeprecation: true,
  118. }),
  119. );
  120. </script>
  121. </body>
  122. </html>