GraphQL Client – vanilla javascript

$npm init -y

$npm install webpack webpack-cli webpack-dev-server --save
$npm intall html-webpack-plugin --save-dev

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		path: __dirname + '/dist',
		filename: "bundle.js"
	},
	plugins: [
		new HtmlWebpackPlugin()
	]
}

{
	//...
	"scripts": {
		"dev": "webpack-dev-server --mode development",
		"build": "webpack --mode production"
	},
	//...
}

console.log("Hello World");

$npm run dev

$npm install apollo-client apollo-cache-inmemory apollo-link-http graphql-tag graphql --save

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';

import gql from 'graphql-tag';

const client = new ApolloClient({
	link: new HttpLink({ uri: 'http://localhost:4000/graphql' }),
	cache: new InMemoryCache()
})

client.query({
	query: gql`{
			 users {
				 username
				 email
			 }
		}
	`
})
	.then(res => addData(res))
	.catch(error => console.log(error));

// add data to html
function addData(res) {
	const body = document.querySelector('body');

	let table = document.createElement('table');
	res.data.users.forEach((item, index) => {
		let row = table.insertRow(index);
		row.insertCell(0).innerHTML = item.username;
		row.insertCell(1).innerHTML = item.email;
	});

	body.appendChild(table);
	addCSS();
}

// add some css
function addCSS() {
	let css = document.createElement('style');
	css.type = 'text/css';

	css.innerHTML =
		`
			 body {
					display: flex;
					justify-content: center;
			 }
		`;
	document.querySelector('body').appendChild(css);
}

webpack-dev-server --mode development

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣: Hash: 1c6a57547bee666a0a2b
Version: webpack 4.15.0
Time: 2151ms
Built at: 2018-07-05 16:54:03
		 Asset       Size  Chunks             Chunk Names
 bundle.js    803 KiB    main  [emitted]  main
index.html  182 bytes          [emitted]  
Entrypoint main = bundle.js
[./node_modules/apollo-cache-inmemory/lib/index.js] 272 bytes {main} [built]
[./node_modules/apollo-client/core/ObservableQuery.js] 19.2 KiB {main} [built]
[./node_modules/graphql-tag/src/index.js] 5.13 KiB {main} [built]
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {main} [built]
[./node_modules/apollo-client/index.js] 434 bytes {main} [built]
[./node_modules/apollo-link-http/lib/index.js] 61 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.75 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main} [built]
[./src/index.js] 1.18 KiB {main} [built]
		+ 87 hidden modules
Child html-webpack-plugin for "index.html":
		 1 asset
		Entrypoint undefined = index.html
		[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs] 376 bytes {0} [built]
		[./node_modules/lodash/lodash.js] 527 KiB {0} [built]
		[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
		[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
ℹ ｢wdm｣: Compiled successfully.