Comments (7)
For what it's worth, it's possible to do this setup but pulling from a CDN.
I have this in graphiql/index.html.erb
.
<html>
<head>
<title>GraphiQL</title>
<link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
</head>
<body style="margin: 0;">
<div id="graphiql" style="height: 100vh;"></div>
<script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script>
<script>
const graphQLFetcher = graphQLParams =>
fetch('<%= graphql_path %>', {
method: 'post',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(graphQLParams),
})
.then(response => response.json())
.catch(() => response.text());
ReactDOM.render(
React.createElement(GraphiQL, { fetcher: graphQLFetcher }),
document.getElementById('graphiql'),
);
</script>
</body>
</html>
from graphiql-rails.
@tegandbiscuits thanks for the example. i added the subresource integrity fields suggested by @connorshea And added support for CSRF tokens.
I have this in show.html.slim
html
head
==csrf_meta_tags
link(
href="https://unpkg.com/[email protected]/graphiql.min.css"
rel="stylesheet"
integrity="sha384-wsOzV0Eph4ZUUJS3E5lWAGWDmvPwKGlSAbUqoAxGs/4Xbiu5go013CHeyiHviRjk"
crossorigin="anonymous"
)
body style="margin: 0;"
#graphiql style="height: 100vh;"
script(
crossorigin="anonymous"
src="https://unpkg.com/[email protected]/umd/react.production.min.js"
integrity="sha384-3fvehj2TEwajh8B8aLpPfx4Ea4bzuasHai/dxAyVlV2uoAcpu9mqz+lVRhBB/YFf"
)
script(
crossorigin="anonymous"
src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"
integrity="sha384-dDaAwdTa5kDnVQlxu7h9UFJ4lR4NIxDNgG+/6iRqTRWhYny4iDtL+t+4qObQVtZ/"
)
script(
crossorigin="anonymous"
src="https://unpkg.com/[email protected]/graphiql.min.js"
integrity="sha384-j7sKHA2Xh03DItLy//iDOH3EXXcIb8TZ4SmCIkPjdVZorF1a40xA9xK90NdDJGNg"
)
javascript:
const graphQLFetcher = graphQLParams =>
fetch('/graphql', {
method: 'post',
headers: { 'Content-Type': 'application/json', "X-CSRF-Token": "#{form_authenticity_token}"},
body: JSON.stringify(graphQLParams),
})
.then(response => response.json())
.catch(() => response.text());
ReactDOM.render(
React.createElement(GraphiQL, { fetcher: graphQLFetcher }),
document.getElementById('graphiql'),
)
from graphiql-rails.
@tegandbiscuits FWIW if you load those files from a CDN I strongly encourage you to use Subresource Integrity to make sure that - if the CDN is breached - you won't load malicious files for your users. https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
from graphiql-rails.
I forgot I made this issue :D It's worth noting that - for whatever reason - GraphiQL's most recent minor release breaks my setup (it just won't load the component so the page is blank). graphiql 1.7.1 works fine but 1.8.x doesn't.
If anyone runs into this problem using my setup, you could try downgrading.
from graphiql-rails.
Awesome stuff. @connorshea, any suggestions on how to accomplish this in Rails-API mode?
Devise auth tokens + GraphiQL don't play too nicely just yet.
from graphiql-rails.
@fintroductions sorry for the lack of response, I'm not very familiar with API-only Rails apps unfortunately.
from graphiql-rails.
from graphiql-rails.
Related Issues (20)
- der
- Graphql query execute is getting freeze from model callbacks HOT 1
- Build issue when bumping graphiql-rails from 1.8.0 to 1.9.0 HOT 7
- doesn't work with propshaft HOT 2
- Using themes/custom CSS
- uninitialized constant GraphiQL (NameError) HOT 1
- Add Basic Auth option HOT 1
- AbstractController::ActionNotFound (The action 'execute' could not be found for GraphqlController): HOT 1
- AssetNotPrecompiled error with Sprockets 4.0 HOT 27
- How to use this gem with graphql subscription? HOT 1
- default context variables HOT 1
- GraphiQL::Rails::EditorsController#show raising on new Rails 6 app HOT 3
- Question about request header configuration with initializer HOT 1
- uninitialized constant GraphqlController::GraphQLIntroSchema Did you mean? GraphQlIntroSchema HOT 1
- Is this gem dead? HOT 1
- Support for subscriptions HOT 3
- headerEditorEnabled config HOT 1
- sass not needed anymore? HOT 2
- Your application has sessions disabled HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from graphiql-rails.