49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { useExplorerPlugin } from '@graphiql/plugin-explorer';
|
|
import { createGraphiQLFetcher } from '@graphiql/toolkit';
|
|
import { GraphiQL } from 'graphiql';
|
|
import { useState, createElement } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import { z } from 'zod';
|
|
|
|
import 'graphiql/graphiql.css';
|
|
import '@graphiql/plugin-explorer/dist/style.css';
|
|
|
|
declare const window: Window & typeof globalThis & { gon: unknown };
|
|
const Gon = z.object({
|
|
defaultQuery: z.string(),
|
|
defaultVariables: z.string()
|
|
});
|
|
const { defaultQuery, defaultVariables } = Gon.parse(window.gon);
|
|
|
|
const fetcher = createGraphiQLFetcher({
|
|
url: '/api/v2/graphql',
|
|
headers: { 'x-csrf-token': csrfToken() ?? '' }
|
|
});
|
|
|
|
function GraphiQLWithExplorer() {
|
|
const [query, setQuery] = useState(defaultQuery);
|
|
const explorerPlugin = useExplorerPlugin({
|
|
query,
|
|
onEdit: setQuery
|
|
});
|
|
return createElement(GraphiQL, {
|
|
fetcher,
|
|
query,
|
|
variables: defaultVariables,
|
|
onEditQuery: setQuery,
|
|
plugins: [explorerPlugin],
|
|
defaultEditorToolsVisibility: true,
|
|
isHeadersEditorEnabled: false
|
|
});
|
|
}
|
|
|
|
const container = document.getElementById('graphiql');
|
|
if (container) {
|
|
const root = createRoot(container);
|
|
root.render(createElement(GraphiQLWithExplorer));
|
|
}
|
|
|
|
function csrfToken() {
|
|
const meta = document.querySelector<HTMLMetaElement>('meta[name=csrf-token]');
|
|
return meta?.content;
|
|
}
|