DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Merge pull request #8075 from tchak/fix-graphql-playground

Browse source 
fix(graphql): load playground from CDN
This commit is contained in:
mfo 2022-11-17 15:58:01 +01:00 committed by GitHub
commit 6a0e0f12ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
app/javascript/entrypoints/playground.ts
View file

@ -1,49 +0,0 @@
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;
}

46
app/views/graphql/playground.html.haml
View file

@ -13,6 +13,13 @@
= 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" }
= Gon::Base.render_data(camel_case: true, init: true, nonce: request.content_security_policy_nonce)
:css
@ -27,9 +34,42 @@
height: 100vh;
}
= vite_client_tag
= vite_typescript_tag 'playground'
%body
#graphiql
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'),
);

4
config/initializers/content_security_policy.rb
View file

@ -12,13 +12,13 @@ Rails.application.config.content_security_policy do |policy|
# Javascript: allow us, SendInBlue and Matomo.
# We need unsafe_inline because miniprofiler and us have some inline buttons :(
scripts_whitelist = ["*.crisp.chat", "crisp.chat", "cdn.jsdelivr.net", "maxcdn.bootstrapcdn.com", "code.jquery.com"]
scripts_whitelist = ["*.crisp.chat", "crisp.chat", "cdn.jsdelivr.net", "maxcdn.bootstrapcdn.com", "code.jquery.com", "unpkg.com"]
scripts_whitelist << URI(MATOMO_IFRAME_URL).host if MATOMO_IFRAME_URL.present?
policy.script_src(:self, :unsafe_eval, :unsafe_inline, :blob, *scripts_whitelist)
# CSS: We have a lot of inline style, and some <style> tags.
# It's too complicated to be fixed right now (and it wouldn't add value: this is hardcoded in views, so not subject to injections)
policy.style_src(:self, :unsafe_inline, "*.crisp.chat", "crisp.chat", 'cdn.jsdelivr.net', 'maxcdn.bootstrapcdn.com')
policy.style_src(:self, :unsafe_inline, "*.crisp.chat", "crisp.chat", 'cdn.jsdelivr.net', 'maxcdn.bootstrapcdn.com', "unpkg.com")
connect_whitelist = ["wss://*.crisp.chat", "*.crisp.chat", "app.franceconnect.gouv.fr", "openmaptiles.geo.data.gouv.fr", "openmaptiles.github.io", "tiles.geo.api.gouv.fr", "wxs.ign.fr"]
connect_whitelist << ENV.fetch('APP_HOST')