andy128k/graphiql_middleware.js

## graphiql_middleware.js
function graphiqlMiddleware(url, graphQlUrl) {
  return function(app /*, server */) {
    app.get(url, function(req, res) {
      res.type('text/html; charset=utf8');
      res.send(`<!DOCTYPE html>
<html>
<head>
    <title>GraphQL</title>
    <style>
        html, body, #app {
            height: 100%;
            margin: 0;
            overflow: hidden;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/graphiql/0.10.2/graphiql.css">
</head>
<body>
    <div id="app"></div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/graphiql/0.11.11/graphiql.min.js"></script>
    <script>
        function graphQLFetcher(params) {
            return fetch('${graphQlUrl}', {
                method: 'post',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                credentials: 'include',
                body: JSON.stringify(params)
            }).then(function (response) {
                return response.text();
            }).then(function (body) {
                try {
                    return JSON.parse(body);
                } catch (error) {
                    return body;
                }
            });
        }
        ReactDOM.render(
            React.createElement(GraphiQL, {
                fetcher: graphQLFetcher,
            }),
            document.querySelector('#app'));
    </script>
</body>
</html>`);
    });
  };
}

module.exports = { graphiqlMiddleware };

## webpack.config.js
const { graphiqlMiddleware } = require('./graphiql_middleware');

module.exports = {
  // ... other options
  devServer: {
    proxy: {'**': 'http://localhost:8000'}, // backend
    port: 8001,
    before: graphiqlMiddleware('/graphiql/', '/graphql/'),
  },
});
	function graphiqlMiddleware(url, graphQlUrl) {
	return function(app /, server /) {
	app.get(url, function(req, res) {
	res.type('text/html; charset=utf8');
	res.send(`<!DOCTYPE html>
	<html>
	<head>
	<title>GraphQL</title>
	<style>
	html, body, #app {
	height: 100%;
	margin: 0;
	overflow: hidden;
	width: 100%;
	}
	</style>
	<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/graphiql/0.10.2/graphiql.css">
	</head>
	<body>
	<div id="app"></div>
	<script src="//cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/graphiql/0.11.11/graphiql.min.js"></script>
	<script>
	function graphQLFetcher(params) {
	return fetch('${graphQlUrl}', {
	method: 'post',
	headers: {
	'Accept': 'application/json',
	'Content-Type': 'application/json',
	},
	credentials: 'include',
	body: JSON.stringify(params)
	}).then(function (response) {
	return response.text();
	}).then(function (body) {
	try {
	return JSON.parse(body);
	} catch (error) {
	return body;
	}
	});
	}
	ReactDOM.render(
	React.createElement(GraphiQL, {
	fetcher: graphQLFetcher,
	}),
	document.querySelector('#app'));
	</script>
	</body>
	</html>`);
	});
	};
	}

	module.exports = { graphiqlMiddleware };
	const { graphiqlMiddleware } = require('./graphiql_middleware');

	module.exports = {
	// ... other options
	devServer: {
	proxy: {'**': 'http://localhost:8000'}, // backend
	port: 8001,
	before: graphiqlMiddleware('/graphiql/', '/graphql/'),
	},
	});