Merge pull request #70 from multinet-app/graphiql

Add GraphiQL support

docs/graphiql.rst

@@ -0,0 +1,26 @@
+=================
+multinet-graphiql
+=================
+
+A `GraphiQL <https://github.com/graphql/graphiql>`_ client for testing and
+playing around with Multinet's GraphQL API.
+
+.. highlight: sh
+
+Installation
+============
+
+1. Build and run the Multinet server (:ref:`multinet-girder`).
+
+2. Install the dependencies: ::
+
+       $ yarn install
+
+3. Run the dev server: ::
+
+       % yarn serve
+
+   This server will also recompile the application on the fly whenever the
+   source code changes.
+
+4. Open your browser to point at the address displayed by the command in step 3.

docs/index.rst

@@ -10,6 +10,7 @@ Welcome to Multinet
    :maxdepth: 2
 
    installation
+   graphiql
 
 Indices and tables
 ==================

docs/installation.rst

@@ -1,11 +1,14 @@
+.. _multinet-girder:
+
+===============
 multinet-girder
-=================
+===============
 A Girder plugin proof-of-concept for a MultiNet API / web application
 
 .. highlight:: sh
 
 Installation
-=================
+============
 
 Set Up Multinet/Girder
 ----------------------

graphiql/.gitignore

@@ -0,0 +1,3 @@
+build/
+node_modules/
+yarn-error.log

graphiql/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "multinet-graphiql",
+  "version": "1.0.0",
+  "description": "GraphiQL client for Multinet client application",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack",
+    "serve": "webpack-dev-server",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Kitware Inc.",
+  "license": "Apache-2.0",
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+  },
+  "dependencies": {
+    "@babel/core": "^7.4.5",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.0.0",
+    "graphiql": "^0.13.2",
+    "graphql": "^14.4.0",
+    "html-webpack-plugin": "^3.2.0",
+    "isomorphic-fetch": "^2.2.1",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.35.0",
+    "webpack-cli": "^3.3.5",
+    "webpack-dev-server": "^3.7.2"
+  }
+}

graphiql/src/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import GraphiQL from 'graphiql';
+import fetch from 'isomorphic-fetch';
+
+import 'graphiql/graphiql.css';
+
+const HOST = 'http://localhost:9090';
+
+function graphQLFetcher(graphQLParams) {
+  console.log(graphQLParams);
+
+  const json = JSON.stringify({
+    'query': graphQLParams.query,
+    'variables': graphQLParams.variables
+  });
+
+  return fetch(`${HOST}/api/v1/multinet/graphql`, {
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: json,
+  }).then(response => response.json());
+}
+
+// Use a 500ms timeout to avoid a problem of the actual query editor being
+// hidden otherwise (see
+// https://github.com/graphql/graphiql/issues/770#issuecomment-505699802).
+window.setTimeout(() => {
+  ReactDOM.render(
+    <div style={{ height: '100vh' }}>
+      <GraphiQL fetcher={graphQLFetcher} />
+    </div>, document.body);
+}, 500);

graphiql/webpack.config.js

@@ -0,0 +1,40 @@
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './src/index.js',
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      },
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+      },
+      {
+        test: /\.css$/,
+        include: /node_modules/,
+        use: ['style-loader', 'css-loader'],
+      }
+    ],
+  },
+  resolve: {
+    extensions: ['*', '.js', '.jsx', '.mjs'],
+  },
+  output: {
+    path: __dirname + '/build',
+    publicPath: '/',
+    filename: 'bundle.js',
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'GraphiQL/Multinet',
+    }),
+  ],
+  devServer: {
+    contentBase: './build',
+  },
+};