graphql(playground): build with vite

app/controllers/graphql_controller.rb

@@ -2,13 +2,11 @@ class GraphqlController < ApplicationController
   before_action :authenticate_administrateur!
 
   def playground
-    procedure = current_administrateur.procedures&.first
-    dossier = procedure&.dossiers&.first
+    procedure = current_administrateur.procedures&.last
 
     gon.default_query = API::V2::StoredQuery.get('ds-query-v2')
     gon.default_variables = {
       "demarcheNumber": procedure&.id,
-      "dossierNumber": dossier&.id,
       "includeDossiers": true
     }.compact.to_json
 

app/javascript/entrypoints/playground.ts

@@ -0,0 +1,39 @@
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { useExplorerPlugin } from '@graphiql/plugin-explorer';
+import { GraphiQL } from 'graphiql';
+import { createElement, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { getConfig, csrfToken } from '@utils';
+
+import 'graphiql/graphiql.css';
+import '@graphiql/plugin-explorer/dist/style.css';
+
+const { defaultQuery, defaultVariables } = getConfig();
+const fetcher = createGraphiQLFetcher({
+  url: '/api/v2/graphql',
+  headers: { 'x-csrf-token': csrfToken() ?? '' }
+});
+
+function GraphiQLWithExplorer() {
+  const [query, setQuery] = useState(defaultQuery);
+  const explorerPlugin = useExplorerPlugin({
+    query: query,
+    onEdit: setQuery
+  });
+  return createElement(GraphiQL, {
+    fetcher: fetcher,
+    defaultEditorToolsVisibility: true,
+    plugins: [explorerPlugin],
+    query: query,
+    variables: defaultVariables,
+    onEditQuery: setQuery,
+    isHeadersEditorEnabled: false
+  });
+}
+
+const element = document.getElementById('playground');
+if (element) {
+  const root = createRoot(element);
+  root.render(createElement(GraphiQLWithExplorer));
+}

app/javascript/shared/utils.ts

@@ -57,7 +57,9 @@ const Gon = z
             DS_ID: 0
           })
       })
-      .default({})
+      .default({}),
+    defaultQuery: z.string().optional(),
+    defaultVariables: z.string().optional()
   })
   .default({});
 declare const window: Window & typeof globalThis & { gon: unknown };
@@ -320,7 +322,7 @@ export function fire<T>(obj: EventTarget, name: string, data?: T) {
   return !event.defaultPrevented;
 }
 
-function csrfToken() {
+export function csrfToken() {
   const meta = document.querySelector<HTMLMetaElement>('meta[name=csrf-token]');
   return meta?.content;
 }

app/views/graphql/playground.html.haml

@@ -13,12 +13,8 @@
     = favicon_link_tag(image_url("#{FAVICON_32PX_SRC}"), type: "image/png", sizes: "32x32")
     = favicon_link_tag(image_url("#{FAVICON_96PX_SRC}"), type: "image/png", sizes: "96x96")
 
-    %link{ rel: "stylesheet", href: "https://unpkg.com/graphiql/graphiql.min.css" }
-    %link{ rel: "stylesheet", href: "https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" }
-    %script{ crossorigin: true, src: "https://unpkg.com/react@17/umd/react.development.js" }
-    %script{ crossorigin: true, src: "https://unpkg.com/react-dom@17/umd/react-dom.development.js" }
-    %script{ crossorigin: true, src: "https://unpkg.com/graphiql/graphiql.min.js" }
-    %script{ crossorigin: true, src: "https://unpkg.com/@graphiql/plugin-explorer/dist/graphiql-plugin-explorer.umd.js" }
+    = vite_client_tag
+    = vite_typescript_tag 'playground'
 
     = Gon::Base.render_data(camel_case: true, init: true, nonce:  request.content_security_policy_nonce)
 
@@ -30,46 +26,10 @@
         overflow: hidden;
       }
 
-      #graphiql {
+      #playground {
         height: 100vh;
       }
 
   %body
-    #graphiql
+    #playground
       Loading...
-
-    :javascript
-      function csrfToken() {
-        var meta = document.querySelector('meta[name=csrf-token]');
-        return meta && meta.content;
-      }
-      var defaultQuery = window.gon.defaultQuery;
-      var defaultVariables = window.gon.defaultVariables;
-
-      var fetcher = GraphiQL.createFetcher({
-        url: '/api/v2/graphql',
-        headers: { 'x-csrf-token': csrfToken() }
-      });
-
-      function GraphiQLWithExplorer() {
-        var [query, setQuery] = React.useState(defaultQuery);
-        var explorerPlugin = GraphiQLPluginExplorer.useExplorerPlugin({
-          query: query,
-          onEdit: setQuery,
-        });
-        return React.createElement(GraphiQL, {
-          fetcher: fetcher,
-          defaultEditorToolsVisibility: true,
-          plugins: [explorerPlugin],
-          query: query,
-          variables: defaultVariables,
-          onEditQuery: setQuery,
-          defaultEditorToolsVisibility: true,
-          isHeadersEditorEnabled: false
-        });
-      }
-
-      ReactDOM.render(
-        React.createElement(GraphiQLWithExplorer),
-        document.getElementById('graphiql'),
-      );