使用 Javascript 來建立 GraphQL client
產生專案
使用 npm init
$npm init -y
使用 webpack
$npm install webpack webpack-cli webpack-dev-server --save $npm intall html-webpack-plugin --save-dev
加入 webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: __dirname + '/dist', filename: "bundle.js" }, plugins: [ new HtmlWebpackPlugin() ] }
修改 package.json
{ //... "scripts": { "dev": "webpack-dev-server --mode development", "build": "webpack --mode production" }, //... }
加入 src/index.js
console.log("Hello World");
執行
$npm run dev
加入 apollo client
加入 apollo client 相關套件
$npm install apollo-client apollo-cache-inmemory apollo-link-http graphql-tag graphql --save
修改 index.js
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.