hasura / graphiql-online

Explore your GraphQL APIs with headers

GraphiQL Demo

This version of GraphiQL is a fork of the original version with a simple header management UI.

You can access it live here - https://graphiql-online.com

Usage of Environment Variables

This app uses a few environment variables which are required for development. The production build uses values directly present in index.html serving this app.

We use dotenv for setting environment variables for development. Create a .env file in the root directory (wherever package.json is) and set the following values. Replace accordingly for testing.

PORT=3000
NODE_ENV=development
GRAPHQL_ENDPOINT=http://localhost:8090/v1/graphql
HEADER_STRING='{}'
VARIABLE_STRING='{}'
QUERY_STRING='query { test_table { id } }'

Note The .env file should not be in version control.

Deployment

$ npm run build

The static assets will be generated in static folder. There is an index.html file referencing the css and js assets inside dist folder.

For a quick Docker based deployment, use docker build -t graphiql . && docker run -d -p 8080:8080 graphiql for running the production build locally.

You can also use now.sh for a cloud deployment. Just simply run now to deploy this and get a live URL.

graphiql-online's Issues

query solution/result pages should have permalinks

The goal is to make these solution/result pages shareable via hyperlinks, as is common practice for SPARQL and other web query pages, such as this SPARQL query on DBpedia and its results.

URIs should be live hyperlinks

This is true of all URIs, whether handled by web browsers out-of-the-box or requiring specific settings and/or plug-ins, but especially so for HTTP/S URIs, as these enable the usual follow-your-nose interactions which Linked Data makes ever more valuable.

In other words, GRAPHQL-online should automatically hyperlink URLs returned in JSON result-sets. This enables the query results to function as an explorable web of data.

add code exporter to graphiql-online

Comes from @FluorescentHallucinogen
Check out code-exporter here.

Subscription cannot connect to websocket

How to deal with CORS? It is driving me crazy

I am trying to connect the https://graphiql-online.com/graphiql with my local host server, but I am unable to execute any query due to CORS policy.

The console log says...

graphiql:1 Access to fetch at 'http://localhost:3000/graphiql' from origin 'https://graphiql-online.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

How can I handle this?

Which repo was this based on?

The README says —

This version of GraphiQL is a fork of the original version with a simple header management UI.

— but it lacks a link to "the original version", which I'm guessing might have been this one from @FluorescentHallucinogen.

Please add a way to save the users query in localstorage so that it can load when the interface loads.

There should be a way to temporary store the entered query in local-storage so that changes are not lost when eg a user navigates away by mistake, which is not not uncommon when using the mac magic mouse

Env variable seems not to work

I'm trying to deploy in production one graphiql-online instance with my own parameters (graphqlEndpoint, headers) but can't succeed.

I tried to set a custom graphlQLEndpoint to avoid the first step of asking it to the user but it doesn't seem to work.

Tried everything, even changing it manually inside: static/index.html, src/helpers/Html.js

Do I miss something?

Best,

Florent

awesome tool & timings

Awesome tool you build... really cool !!!
I would like to make a suggestion to add a response timer in the gui. That way I can easily see the response time of a query and finetune the performance

Does not Build or Run - Invalid CSS error

OS: Windows 10
NODE: 14.9

I assume this is windows only? (I'll try to confirm)

Steps to repro:

1. npm i
2. setup .env file
3. read about all the security warnings
4. npm audit fix or not
5. npm run dev or npm run build

[0] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[0]
[0] undefined
[0]               ^
[0]       Invalid CSS after "  margin: (math": expected expression (e.g. 1px, bold), was ".div($line-height-c"
[0]       in \graphiql\node_modules\bootstrap-sass\assets\stylesheets\bootstrap\mixins\_nav-divider.scss (line 8, column 16)
[0] Error:
[0] undefined
[0]               ^
[0]       Invalid CSS after "  margin: (math": expected expression (e.g. 1px, bold), was ".div($line-height-c"
[0]       in \graphiql\node_modules\bootstrap-sass\assets\stylesheets\bootstrap\mixins\_nav-divider.scss (line 8, column 16)
[0]     at options.error (\graphiql\node_modules\node-sass\lib\index.js:291:26)
[0]  @ ./node_modules/bootstrap-loader/no-op.js (./node_modules/style-loader!./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"preBootstrapCustomizations":"//graphiql//src//theme//variables.scss","bootstrapCustomizations":"//graphiql//src//theme//bootstrap.overrides.scss","useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["button","dropdown","modal"],"configFilePath"://graphiql//.bootstraprc","bootstrapPath":"//graphiql//node_modules//bootstrap-sass","bootstrapRelPath":"..//bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js) 2:14-1315 21:1-42:3 22:19-1320
[0]  @ ./node_modules/bootstrap-loader/lib/bootstrap.loader.js!./node_modules/bootstrap-loader/no-op.js
[0]  @ ./node_modules/bootstrap-loader/loader.js?extractStyles
[0]  @ multi webpack-hot-middleware/client?path=http://127.0.0.1:3031/__webpack_hmr bootstrap-loader?extractStyles font-awesome-webpack!./src/theme/font-awesome.config.js ./src/client.js

Sharing a link to documentation

Awesome tool!
I wish to be able to share a link to some api docs and would like to share it by doing something like

/graphiql?endpoint=[urlencoded-url]

Would wish for a few other things to be saved as well in the url either as #hash or url params as state management

Site is down?

https://graphiql-online.com/ looks to be down.