From ccd771de5fd3d0f17bc77e4b3da828310f2aae7c Mon Sep 17 00:00:00 2001 From: Gaurav Chikhale Date: Sat, 5 Oct 2019 23:39:41 -0400 Subject: [PATCH 1/7] Setup router, apollo client and graphql --- package-lock.json | 308 +++++++++++++++++++++------ package.json | 5 +- src/App.js | 26 --- src/{App.css => components/home.css} | 12 +- src/components/home.js | 29 +++ src/containers/home.js | 12 ++ src/index.js | 4 +- src/queries/foo.js | 11 + src/router.js | 28 +++ 9 files changed, 340 insertions(+), 95 deletions(-) delete mode 100644 src/App.js rename src/{App.css => components/home.css} (74%) create mode 100644 src/components/home.js create mode 100644 src/containers/home.js create mode 100644 src/queries/foo.js create mode 100644 src/router.js diff --git a/package-lock.json b/package-lock.json index 796ffa2..22999db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,26 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@apollo/react-common": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@apollo/react-common/-/react-common-3.1.2.tgz", + "integrity": "sha512-6+gTeBZoIyCE6VnHD2EI9Wz+Dm05MBxplUTmVgswzvTe05lUO78SxGgB3XJc9GM/TmNexgCc0eS84vUpG/f6Tg==", + "requires": { + "ts-invariant": "^0.4.4", + "tslib": "^1.10.0" + } + }, + "@apollo/react-hooks": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@apollo/react-hooks/-/react-hooks-3.1.2.tgz", + "integrity": "sha512-PV5u40E9iwfwM7u61r2P9PTjcGaM3zRwiwrJGDKOKaOn1Y9wTHhKOVEQa7YOsCWciSaMVK1slpKMvQbD2Ypqtw==", + "requires": { + "@apollo/react-common": "^3.1.2", + "@wry/equality": "^0.1.9", + "ts-invariant": "^0.4.4", + "tslib": "^1.10.0" + } + }, "@apollographql/apollo-tools": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/@apollographql/apollo-tools/-/apollo-tools-0.4.0.tgz", @@ -1664,6 +1684,11 @@ "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-13.0.0.tgz", "integrity": "sha512-wBlsw+8n21e6eTd4yVv8YD/E3xq0O6nNnJIquutAsFGE7EyMKz7W6RNT6BRu1SmdgmlCZ9tb0X+j+D6HGr8pZw==" }, + "@types/zen-observable": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.0.tgz", + "integrity": "sha512-te5lMAWii1uEJ4FwLjzdlbw3+n0FZNOvFXHxQDKeT0dilh7HOzdMzV2TrJVUzq8ep7J4Na8OUYPRLSQkJHAlrg==" + }, "@typescript-eslint/eslint-plugin": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-1.13.0.tgz", @@ -1871,6 +1896,15 @@ "@xtuc/long": "4.2.2" } }, + "@wry/context": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.4.4.tgz", + "integrity": "sha512-LrKVLove/zw6h2Md/KZyWxIkFM6AoyKp71OqpH9Hiip1csjPVoD3tPxlbQUNxEnHENks3UGgNpSBCAfq9KWuag==", + "requires": { + "@types/node": ">=6", + "tslib": "^1.9.3" + } + }, "@wry/equality": { "version": "0.1.9", "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.1.9.tgz", @@ -2030,6 +2064,31 @@ "normalize-path": "^2.1.1" } }, + "apollo-boost": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/apollo-boost/-/apollo-boost-0.4.4.tgz", + "integrity": "sha512-ASngBvazmp9xNxXfJ2InAzfDwz65o4lswlEPrWoN35scXmCz8Nz4k3CboUXbrcN/G0IExkRf/W7o9Rg0cjEBqg==", + "requires": { + "apollo-cache": "^1.3.2", + "apollo-cache-inmemory": "^1.6.3", + "apollo-client": "^2.6.4", + "apollo-link": "^1.0.6", + "apollo-link-error": "^1.0.3", + "apollo-link-http": "^1.3.1", + "graphql-tag": "^2.4.2", + "ts-invariant": "^0.4.0", + "tslib": "^1.9.3" + } + }, + "apollo-cache": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.3.2.tgz", + "integrity": "sha512-+KA685AV5ETEJfjZuviRTEImGA11uNBp/MJGnaCvkgr+BYRrGLruVKBv6WvyFod27WEB2sp7SsG8cNBKANhGLg==", + "requires": { + "apollo-utilities": "^1.3.2", + "tslib": "^1.9.3" + } + }, "apollo-cache-control": { "version": "0.8.4", "resolved": "https://registry.npmjs.org/apollo-cache-control/-/apollo-cache-control-0.8.4.tgz", @@ -2039,6 +2098,33 @@ "graphql-extensions": "^0.10.3" } }, + "apollo-cache-inmemory": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.3.tgz", + "integrity": "sha512-S4B/zQNSuYc0M/1Wq8dJDTIO9yRgU0ZwDGnmlqxGGmFombOZb9mLjylewSfQKmjNpciZ7iUIBbJ0mHlPJTzdXg==", + "requires": { + "apollo-cache": "^1.3.2", + "apollo-utilities": "^1.3.2", + "optimism": "^0.10.0", + "ts-invariant": "^0.4.0", + "tslib": "^1.9.3" + } + }, + "apollo-client": { + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.6.4.tgz", + "integrity": "sha512-oWOwEOxQ9neHHVZrQhHDbI6bIibp9SHgxaLRVPoGvOFy7OH5XUykZE7hBQAVxq99tQjBzgytaZffQkeWo1B4VQ==", + "requires": { + "@types/zen-observable": "^0.8.0", + "apollo-cache": "1.3.2", + "apollo-link": "^1.0.0", + "apollo-utilities": "1.3.2", + "symbol-observable": "^1.0.2", + "ts-invariant": "^0.4.0", + "tslib": "^1.9.3", + "zen-observable": "^0.8.0" + } + }, "apollo-datasource": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/apollo-datasource/-/apollo-datasource-0.6.3.tgz", @@ -2100,6 +2186,36 @@ "zen-observable-ts": "^0.8.20" } }, + "apollo-link-error": { + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/apollo-link-error/-/apollo-link-error-1.1.12.tgz", + "integrity": "sha512-psNmHyuy3valGikt/XHJfe0pKJnRX19tLLs6P6EHRxg+6q6JMXNVLYPaQBkL0FkwdTCB0cbFJAGRYCBviG8TDA==", + "requires": { + "apollo-link": "^1.2.13", + "apollo-link-http-common": "^0.2.15", + "tslib": "^1.9.3" + } + }, + "apollo-link-http": { + "version": "1.5.16", + "resolved": "https://registry.npmjs.org/apollo-link-http/-/apollo-link-http-1.5.16.tgz", + "integrity": "sha512-IA3xA/OcrOzINRZEECI6IdhRp/Twom5X5L9jMehfzEo2AXdeRwAMlH5LuvTZHgKD8V1MBnXdM6YXawXkTDSmJw==", + "requires": { + "apollo-link": "^1.2.13", + "apollo-link-http-common": "^0.2.15", + "tslib": "^1.9.3" + } + }, + "apollo-link-http-common": { + "version": "0.2.15", + "resolved": "https://registry.npmjs.org/apollo-link-http-common/-/apollo-link-http-common-0.2.15.tgz", + "integrity": "sha512-+Heey4S2IPsPyTf8Ag3PugUupASJMW894iVps6hXbvwtg1aHSNMXUYO5VG7iRHkPzqpuzT4HMBanCTXPjtGzxg==", + "requires": { + "apollo-link": "^1.2.13", + "ts-invariant": "^0.4.0", + "tslib": "^1.9.3" + } + }, "apollo-server-caching": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/apollo-server-caching/-/apollo-server-caching-0.5.0.tgz", @@ -3186,8 +3302,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -3205,13 +3320,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3224,18 +3337,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -3338,8 +3448,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -3349,7 +3458,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3362,20 +3470,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.3.5", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3392,7 +3497,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3465,8 +3569,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -3476,7 +3579,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -3552,8 +3654,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -3583,7 +3684,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3601,7 +3701,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3640,13 +3739,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.3", - "bundled": true, - "optional": true + "bundled": true } } }, @@ -6349,6 +6446,11 @@ "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=" }, + "gud": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz", + "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==" + }, "gzip-size": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz", @@ -6497,6 +6599,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -6507,6 +6622,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", + "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.8.4", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.4.tgz", @@ -7475,8 +7598,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -7494,13 +7616,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7513,18 +7633,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -7627,8 +7744,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -7638,7 +7754,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7651,20 +7766,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.3.5", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -7681,7 +7793,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7754,8 +7865,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -7765,7 +7875,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -7841,8 +7950,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -7872,7 +7980,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7890,7 +7997,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7929,13 +8035,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.3", - "bundled": true, - "optional": true + "bundled": true } } } @@ -8889,6 +8993,16 @@ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz", "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==" }, + "mini-create-react-context": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz", + "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==", + "requires": { + "@babel/runtime": "^7.4.0", + "gud": "^1.0.0", + "tiny-warning": "^1.0.2" + } + }, "mini-css-extract-plugin": { "version": "0.5.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz", @@ -9596,6 +9710,14 @@ "is-wsl": "^1.1.0" } }, + "optimism": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.10.3.tgz", + "integrity": "sha512-9A5pqGoQk49H6Vhjb9kPgAeeECfUDF6aIICbMDL23kDLStBn1MWk3YvcZ4xWF9CsSf6XEgvRLkXy4xof/56vVw==", + "requires": { + "@wry/context": "^0.4.0" + } + }, "optimist": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz", @@ -11197,6 +11319,52 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz", "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==" }, + "react-router": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz", + "integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.3.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", + "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz", + "integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.1.2", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.1.1.tgz", @@ -11592,6 +11760,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -12896,6 +13069,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz", + "integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -13320,6 +13503,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index 3cec8c1..bbf7ce5 100644 --- a/package.json +++ b/package.json @@ -3,14 +3,17 @@ "version": "0.1.0", "private": true, "dependencies": { + "@apollo/react-hooks": "^3.1.2", + "apollo-boost": "^0.4.4", "apollo-server-lambda": "2.9.3", "encoding": "0.1.12", - "graphql": "14.5.4", + "graphql": "^14.5.4", "graphql-tag-pluck": "0.8.4", "merge-graphql-schemas": "1.7.0", "netlify-lambda": "1.6.3", "react": "^16.9.0", "react-dom": "^16.9.0", + "react-router-dom": "^5.1.2", "react-scripts": "3.1.1" }, "scripts": { diff --git a/src/App.js b/src/App.js deleted file mode 100644 index ce9cbd2..0000000 --- a/src/App.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import logo from './logo.svg'; -import './App.css'; - -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); -} - -export default App; diff --git a/src/App.css b/src/components/home.css similarity index 74% rename from src/App.css rename to src/components/home.css index b41d297..2b79898 100644 --- a/src/App.css +++ b/src/components/home.css @@ -1,14 +1,14 @@ -.App { +.home { text-align: center; } -.App-logo { - animation: App-logo-spin infinite 20s linear; +.home-logo { + animation: home-logo-spin infinite 20s linear; height: 40vmin; pointer-events: none; } -.App-header { +.home-header { background-color: #282c34; min-height: 100vh; display: flex; @@ -19,11 +19,11 @@ color: white; } -.App-link { +.home-link { color: #61dafb; } -@keyframes App-logo-spin { +@keyframes home-logo-spin { from { transform: rotate(0deg); } diff --git a/src/components/home.js b/src/components/home.js new file mode 100644 index 0000000..5a663ce --- /dev/null +++ b/src/components/home.js @@ -0,0 +1,29 @@ +import React from 'react'; +import logo from '../logo.svg'; +import './home.css'; + +function Home(props) { + + const { loading, error, data} = props; + console.log(props) + return ( +
+
+ logo +

+ Edit src/App.js and save to reload. +

+ + Learn React + +
+
+ ); +} + +export default Home; diff --git a/src/containers/home.js b/src/containers/home.js new file mode 100644 index 0000000..d4e84e0 --- /dev/null +++ b/src/containers/home.js @@ -0,0 +1,12 @@ +import React from "react"; +import Home from "../components/home.js"; +import { useQuery } from "@apollo/react-hooks"; +import { EXCHANGE_RATES } from "../queries/foo"; + +function HomeContainer() { + const { loading, error, data } = useQuery(EXCHANGE_RATES); + + return ; +} + +export default HomeContainer; diff --git a/src/index.js b/src/index.js index 87d1be5..f8e0459 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import App from './App'; +import Routes from './router'; import * as serviceWorker from './serviceWorker'; -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. diff --git a/src/queries/foo.js b/src/queries/foo.js new file mode 100644 index 0000000..782743e --- /dev/null +++ b/src/queries/foo.js @@ -0,0 +1,11 @@ +import { gql } from 'apollo-boost'; + + +export const EXCHANGE_RATES = gql` + { + rates(currency: "USD") { + currency + rate + } + } +`; diff --git a/src/router.js b/src/router.js new file mode 100644 index 0000000..78714e0 --- /dev/null +++ b/src/router.js @@ -0,0 +1,28 @@ +import React from "react"; +import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; +import HomeContainer from "./containers/home"; +import ApolloClient from "apollo-boost"; +import { ApolloProvider } from "@apollo/react-hooks"; + +// TODO: Move uri value to config file +const client = new ApolloClient({ + uri: "https://48p1r2roz4.sse.codesandbox.io" +}); + +const Routes = () => { + return ( +
+ + + + + + + + + +
+ ); +}; + +export default Routes; From 7c3c93e4a68427c9b0d3de581352ea4a6e532cc7 Mon Sep 17 00:00:00 2001 From: Gaurav Chikhale Date: Sat, 5 Oct 2019 23:50:28 -0400 Subject: [PATCH 2/7] UI updates --- src/components/home.css | 8 ++++---- src/components/home.js | 35 +++++++++++++++++------------------ 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/src/components/home.css b/src/components/home.css index 2b79898..372f254 100644 --- a/src/components/home.css +++ b/src/components/home.css @@ -3,9 +3,9 @@ } .home-logo { - animation: home-logo-spin infinite 20s linear; - height: 40vmin; - pointer-events: none; + width: 320px; + margin-top: 32px; + margin-bottom: 28px } .home-header { @@ -14,7 +14,7 @@ display: flex; flex-direction: column; align-items: center; - justify-content: center; + justify-content: flex-start; font-size: calc(10px + 2vmin); color: white; } diff --git a/src/components/home.js b/src/components/home.js index 5a663ce..01bb08c 100644 --- a/src/components/home.js +++ b/src/components/home.js @@ -1,26 +1,25 @@ -import React from 'react'; -import logo from '../logo.svg'; -import './home.css'; +import React from "react"; +import "./home.css"; function Home(props) { - - const { loading, error, data} = props; - console.log(props) + const { loading, error, data } = props; return (
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - + logo + + {loading ?
Loading Data from backend
: null} + {error ?
Error loading data
: null} + + {data && data.rates && data.rates.map((r, i) => ( +
+ {r.currency} : {r.rate}USD$ +
+ ))}
); From 8974fb292be40c104c01b9d9223a767ab292b8da Mon Sep 17 00:00:00 2001 From: Gaurav Chikhale Date: Sun, 6 Oct 2019 13:35:54 -0400 Subject: [PATCH 3/7] Add CORS headers for netlify function, and a script to run funtions locally --- package.json | 1 + src/lambda/graphql.js | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/package.json b/package.json index bbf7ce5..1f70b7a 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ }, "scripts": { "start": "react-scripts start", + "start:lambda": "netlify-lambda serve src/lambda", "build": "run-p build:**", "build:lambda": "netlify-lambda build src/lambda", "build:app": "react-scripts build", diff --git a/src/lambda/graphql.js b/src/lambda/graphql.js index b74daf5..7217f5f 100644 --- a/src/lambda/graphql.js +++ b/src/lambda/graphql.js @@ -5,5 +5,9 @@ exports.handler = async (request, context) => { await setup.run(); const response = await handleRequest(request, context); + response.headers = { + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept' + } return response; }; From c40e58c8ad608fb08b4703501d33ed6891f094c7 Mon Sep 17 00:00:00 2001 From: Gaurav Chikhale Date: Sun, 6 Oct 2019 13:36:38 -0400 Subject: [PATCH 4/7] Update front end to fetch data from netlify functions --- src/components/home.js | 4 ++-- src/queries/foo.js | 6 +++--- src/router.js | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/home.js b/src/components/home.js index 01bb08c..c1aa88b 100644 --- a/src/components/home.js +++ b/src/components/home.js @@ -15,9 +15,9 @@ function Home(props) { {loading ?
Loading Data from backend
: null} {error ?
Error loading data
: null} - {data && data.rates && data.rates.map((r, i) => ( + {data && data.resources && data.resources.map((r, i) => (
- {r.currency} : {r.rate}USD$ + {r.title} : {r.description}
))} diff --git a/src/queries/foo.js b/src/queries/foo.js index 782743e..285a85b 100644 --- a/src/queries/foo.js +++ b/src/queries/foo.js @@ -3,9 +3,9 @@ import { gql } from 'apollo-boost'; export const EXCHANGE_RATES = gql` { - rates(currency: "USD") { - currency - rate + resources { + title + description } } `; diff --git a/src/router.js b/src/router.js index 78714e0..0cb4aa1 100644 --- a/src/router.js +++ b/src/router.js @@ -6,7 +6,7 @@ import { ApolloProvider } from "@apollo/react-hooks"; // TODO: Move uri value to config file const client = new ApolloClient({ - uri: "https://48p1r2roz4.sse.codesandbox.io" + uri: "https://hardcore-haibt-da9a6b.netlify.com/.netlify/functions/graphql" }); const Routes = () => { From df70e2bd700d82c61b7284f953ca744d905902dc Mon Sep 17 00:00:00 2001 From: Gaurav Chikhale Date: Sun, 6 Oct 2019 13:45:19 -0400 Subject: [PATCH 5/7] trigger deploy From 38af1119d30132fa57d2a901dcf887887e2a618b Mon Sep 17 00:00:00 2001 From: Gaurav Chikhale Date: Mon, 14 Oct 2019 12:11:49 -0400 Subject: [PATCH 6/7] Rename EXCHANGE_RATES -> RESOURCES Remove lambda script, use netlify cli --- package.json | 1 - src/containers/home.js | 4 ++-- src/lambda/graphql.js | 5 ----- src/lambda/lib/apollo.js | 7 ++++++- src/queries/{foo.js => resources.js} | 2 +- 5 files changed, 9 insertions(+), 10 deletions(-) rename src/queries/{foo.js => resources.js} (74%) diff --git a/package.json b/package.json index 1f70b7a..bbf7ce5 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,6 @@ }, "scripts": { "start": "react-scripts start", - "start:lambda": "netlify-lambda serve src/lambda", "build": "run-p build:**", "build:lambda": "netlify-lambda build src/lambda", "build:app": "react-scripts build", diff --git a/src/containers/home.js b/src/containers/home.js index d4e84e0..e480d07 100644 --- a/src/containers/home.js +++ b/src/containers/home.js @@ -1,10 +1,10 @@ import React from "react"; import Home from "../components/home.js"; import { useQuery } from "@apollo/react-hooks"; -import { EXCHANGE_RATES } from "../queries/foo"; +import { RESOURCES } from "../queries/resources"; function HomeContainer() { - const { loading, error, data } = useQuery(EXCHANGE_RATES); + const { loading, error, data } = useQuery(RESOURCES); return ; } diff --git a/src/lambda/graphql.js b/src/lambda/graphql.js index 7217f5f..f072cf9 100644 --- a/src/lambda/graphql.js +++ b/src/lambda/graphql.js @@ -4,10 +4,5 @@ const setup = require('./initializers/setup'); exports.handler = async (request, context) => { await setup.run(); const response = await handleRequest(request, context); - - response.headers = { - 'Access-Control-Allow-Origin': '*', - 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept' - } return response; }; diff --git a/src/lambda/lib/apollo.js b/src/lambda/lib/apollo.js index 0852f5e..db88cf2 100644 --- a/src/lambda/lib/apollo.js +++ b/src/lambda/lib/apollo.js @@ -10,7 +10,12 @@ exports.initialize = () => { }; const server = new ApolloServer(apolloServerConfig); - exports.handler = server.createHandler(); + exports.handler = server.createHandler({ + cors: { + origin: '*', + credentials: true + } + }); }; exports.handleRequest = (request, context) => { diff --git a/src/queries/foo.js b/src/queries/resources.js similarity index 74% rename from src/queries/foo.js rename to src/queries/resources.js index 285a85b..cee3f6a 100644 --- a/src/queries/foo.js +++ b/src/queries/resources.js @@ -1,7 +1,7 @@ import { gql } from 'apollo-boost'; -export const EXCHANGE_RATES = gql` +export const RESOURCES = gql` { resources { title From 1194a78d595b7c4cafeef0be6b79f0a154a3bcdb Mon Sep 17 00:00:00 2001 From: Gaurav Chikhale Date: Thu, 17 Oct 2019 20:53:39 -0400 Subject: [PATCH 7/7] Add config file --- src/config.js | 13 +++++++++++++ src/router.js | 4 ++-- 2 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 src/config.js diff --git a/src/config.js b/src/config.js new file mode 100644 index 0000000..21c8feb --- /dev/null +++ b/src/config.js @@ -0,0 +1,13 @@ +// env: local || development || production + +const local = { + graphUrl: 'http://localhost:8888/.netlify/functions/graphql', + env: 'local', +}; + +const config = { + graphUrl: process.env.REACT_APP_GRAPH_URL || local.graphUrl, + env: process.env.REACT_APP_ENV || local.env, +}; + +export default config; diff --git a/src/router.js b/src/router.js index 0cb4aa1..adf71f2 100644 --- a/src/router.js +++ b/src/router.js @@ -3,10 +3,10 @@ import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import HomeContainer from "./containers/home"; import ApolloClient from "apollo-boost"; import { ApolloProvider } from "@apollo/react-hooks"; +import config from './config' -// TODO: Move uri value to config file const client = new ApolloClient({ - uri: "https://hardcore-haibt-da9a6b.netlify.com/.netlify/functions/graphql" + uri: config.graphUrl }); const Routes = () => {