graphql add reqiuest

package-lock.json

@@ -7,10 +7,13 @@
     "": {
       "version": "0.1.0",
       "dependencies": {
+        "@apollo/react-hooks": "^4.0.0",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^12.8.3",
+        "apollo-boost": "^0.4.9",
         "classnames": "^2.3.1",
+        "graphql": "^15.5.3",
         "hook-easy-form": "^2.7.2",
         "jwt-decode": "^3.1.2",
         "node-sass": "^6.0.1",
@@ -26,6 +29,46 @@
         "web-vitals": "^1.1.2"
       }
     },
+    "node_modules/@apollo/client": {
+      "version": "3.4.10",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.4.10.tgz",
+      "integrity": "sha512-b+8TT3jBM2BtEJi+V2FuLpvoYDZCY3baNYrgAgEyw4fjnuBCSRPY7qVjqriZAwMaGiTLtyVifGhmdeICQs4Eow==",
+      "dependencies": {
+        "@graphql-typed-document-node/core": "^3.0.0",
+        "@wry/context": "^0.6.0",
+        "@wry/equality": "^0.5.0",
+        "@wry/trie": "^0.3.0",
+        "graphql-tag": "^2.12.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "optimism": "^0.16.1",
+        "prop-types": "^15.7.2",
+        "symbol-observable": "^4.0.0",
+        "ts-invariant": "^0.9.0",
+        "tslib": "^2.3.0",
+        "zen-observable-ts": "^1.1.0"
+      },
+      "peerDependencies": {
+        "graphql": "^14.0.0 || ^15.0.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "subscriptions-transport-ws": "^0.9.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "subscriptions-transport-ws": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@apollo/react-hooks": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@apollo/react-hooks/-/react-hooks-4.0.0.tgz",
+      "integrity": "sha512-fCu0cbne3gbUl0QbA8X4L33iuuFVQbC5Jo2MIKRK8CyawR6PoxDpFdFA1kc6033ODZuZZ9Eo4RdeJFlFIIYcLA==",
+      "dependencies": {
+        "@apollo/client": "latest"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
@@ -1844,6 +1887,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@graphql-typed-document-node/core": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.0.tgz",
+      "integrity": "sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg==",
+      "peerDependencies": {
+        "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
     "node_modules/@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -3898,6 +3949,11 @@
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.1.tgz",
       "integrity": "sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw=="
     },
+    "node_modules/@types/zen-observable": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.3.tgz",
+      "integrity": "sha512-fbF6oTd4sGGy0xjHPKAt+eS2CrxJ3+6gQ3FGcBoIJR2TLAyCkCyI8JqZNy+FeON0AhVgNJoUumVoZQjBFUqHkw=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "4.29.3",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.29.3.tgz",
@@ -4232,6 +4288,39 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@wry/context": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.6.1.tgz",
+      "integrity": "sha512-LOmVnY1iTU2D8tv4Xf6MVMZZ+juIJ87Kt/plMijjN20NMAXGmH4u8bS1t0uT74cZ5gwpocYueV58YwyI8y+GKw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@wry/equality": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.5.2.tgz",
+      "integrity": "sha512-oVMxbUXL48EV/C0/M7gLVsoK6qRHPS85x8zECofEZOVvxGmIPLA9o5Z27cc2PoAyZz1S2VoM2A7FLAnpfGlneA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@wry/trie": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.3.1.tgz",
+      "integrity": "sha512-WwB53ikYudh9pIorgxrkHKrQZcCqNM/Q/bDzZBffEaGUKGuHrRb3zZUT9Sh2qw9yogC7SsdRmQ1ER0pqvd3bfw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -4451,6 +4540,269 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apollo-boost": {
+      "version": "0.4.9",
+      "resolved": "https://registry.npmjs.org/apollo-boost/-/apollo-boost-0.4.9.tgz",
+      "integrity": "sha512-05y5BKcDaa8w47f8d81UVwKqrAjn8uKLv6QM9fNdldoNzQ+rnOHgFlnrySUZRz9QIT3vPftQkEz2UEASp1Mi5g==",
+      "dependencies": {
+        "apollo-cache": "^1.3.5",
+        "apollo-cache-inmemory": "^1.6.6",
+        "apollo-client": "^2.6.10",
+        "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.10.0"
+      },
+      "peerDependencies": {
+        "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
+    "node_modules/apollo-boost/node_modules/ts-invariant": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
+      "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+      "dependencies": {
+        "tslib": "^1.9.3"
+      }
+    },
+    "node_modules/apollo-boost/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/apollo-cache": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.3.5.tgz",
+      "integrity": "sha512-1XoDy8kJnyWY/i/+gLTEbYLnoiVtS8y7ikBr/IfmML4Qb+CM7dEEbIUOjnY716WqmZ/UpXIxTfJsY7rMcqiCXA==",
+      "dependencies": {
+        "apollo-utilities": "^1.3.4",
+        "tslib": "^1.10.0"
+      },
+      "peerDependencies": {
+        "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
+    "node_modules/apollo-cache-inmemory": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.6.tgz",
+      "integrity": "sha512-L8pToTW/+Xru2FFAhkZ1OA9q4V4nuvfoPecBM34DecAugUZEBhI2Hmpgnzq2hTKZ60LAMrlqiASm0aqAY6F8/A==",
+      "dependencies": {
+        "apollo-cache": "^1.3.5",
+        "apollo-utilities": "^1.3.4",
+        "optimism": "^0.10.0",
+        "ts-invariant": "^0.4.0",
+        "tslib": "^1.10.0"
+      },
+      "peerDependencies": {
+        "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
+    "node_modules/apollo-cache-inmemory/node_modules/@wry/context": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.4.4.tgz",
+      "integrity": "sha512-LrKVLove/zw6h2Md/KZyWxIkFM6AoyKp71OqpH9Hiip1csjPVoD3tPxlbQUNxEnHENks3UGgNpSBCAfq9KWuag==",
+      "dependencies": {
+        "@types/node": ">=6",
+        "tslib": "^1.9.3"
+      }
+    },
+    "node_modules/apollo-cache-inmemory/node_modules/optimism": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.10.3.tgz",
+      "integrity": "sha512-9A5pqGoQk49H6Vhjb9kPgAeeECfUDF6aIICbMDL23kDLStBn1MWk3YvcZ4xWF9CsSf6XEgvRLkXy4xof/56vVw==",
+      "dependencies": {
+        "@wry/context": "^0.4.0"
+      }
+    },
+    "node_modules/apollo-cache-inmemory/node_modules/ts-invariant": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
+      "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+      "dependencies": {
+        "tslib": "^1.9.3"
+      }
+    },
+    "node_modules/apollo-cache-inmemory/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/apollo-cache/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/apollo-client": {
+      "version": "2.6.10",
+      "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.6.10.tgz",
+      "integrity": "sha512-jiPlMTN6/5CjZpJOkGeUV0mb4zxx33uXWdj/xQCfAMkuNAC3HN7CvYDyMHHEzmcQ5GV12LszWoQ/VlxET24CtA==",
+      "dependencies": {
+        "@types/zen-observable": "^0.8.0",
+        "apollo-cache": "1.3.5",
+        "apollo-link": "^1.0.0",
+        "apollo-utilities": "1.3.4",
+        "symbol-observable": "^1.0.2",
+        "ts-invariant": "^0.4.0",
+        "tslib": "^1.10.0",
+        "zen-observable": "^0.8.0"
+      },
+      "peerDependencies": {
+        "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
+    "node_modules/apollo-client/node_modules/symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/apollo-client/node_modules/ts-invariant": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
+      "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+      "dependencies": {
+        "tslib": "^1.9.3"
+      }
+    },
+    "node_modules/apollo-client/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/apollo-link": {
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.14.tgz",
+      "integrity": "sha512-p67CMEFP7kOG1JZ0ZkYZwRDa369w5PIjtMjvrQd/HnIV8FRsHRqLqK+oAZQnFa1DDdZtOtHTi+aMIW6EatC2jg==",
+      "dependencies": {
+        "apollo-utilities": "^1.3.0",
+        "ts-invariant": "^0.4.0",
+        "tslib": "^1.9.3",
+        "zen-observable-ts": "^0.8.21"
+      },
+      "peerDependencies": {
+        "graphql": "^0.11.3 || ^0.12.3 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
+    "node_modules/apollo-link-error": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/apollo-link-error/-/apollo-link-error-1.1.13.tgz",
+      "integrity": "sha512-jAZOOahJU6bwSqb2ZyskEK1XdgUY9nkmeclCrW7Gddh1uasHVqmoYc4CKdb0/H0Y1J9lvaXKle2Wsw/Zx1AyUg==",
+      "dependencies": {
+        "apollo-link": "^1.2.14",
+        "apollo-link-http-common": "^0.2.16",
+        "tslib": "^1.9.3"
+      }
+    },
+    "node_modules/apollo-link-error/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/apollo-link-http": {
+      "version": "1.5.17",
+      "resolved": "https://registry.npmjs.org/apollo-link-http/-/apollo-link-http-1.5.17.tgz",
+      "integrity": "sha512-uWcqAotbwDEU/9+Dm9e1/clO7hTB2kQ/94JYcGouBVLjoKmTeJTUPQKcJGpPwUjZcSqgYicbFqQSoJIW0yrFvg==",
+      "dependencies": {
+        "apollo-link": "^1.2.14",
+        "apollo-link-http-common": "^0.2.16",
+        "tslib": "^1.9.3"
+      },
+      "peerDependencies": {
+        "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
+    "node_modules/apollo-link-http-common": {
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/apollo-link-http-common/-/apollo-link-http-common-0.2.16.tgz",
+      "integrity": "sha512-2tIhOIrnaF4UbQHf7kjeQA/EmSorB7+HyJIIrUjJOKBgnXwuexi8aMecRlqTIDWcyVXCeqLhUnztMa6bOH/jTg==",
+      "dependencies": {
+        "apollo-link": "^1.2.14",
+        "ts-invariant": "^0.4.0",
+        "tslib": "^1.9.3"
+      },
+      "peerDependencies": {
+        "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
+    "node_modules/apollo-link-http-common/node_modules/ts-invariant": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
+      "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+      "dependencies": {
+        "tslib": "^1.9.3"
+      }
+    },
+    "node_modules/apollo-link-http-common/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/apollo-link-http/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/apollo-link/node_modules/ts-invariant": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
+      "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+      "dependencies": {
+        "tslib": "^1.9.3"
+      }
+    },
+    "node_modules/apollo-link/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/apollo-link/node_modules/zen-observable-ts": {
+      "version": "0.8.21",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.21.tgz",
+      "integrity": "sha512-Yj3yXweRc8LdRMrCC8nIc4kkjWecPAUVh0TI0OUrWXx6aX790vLcDlWca6I4vsyCGH3LpWxq0dJRcMOFoVqmeg==",
+      "dependencies": {
+        "tslib": "^1.9.3",
+        "zen-observable": "^0.8.0"
+      }
+    },
+    "node_modules/apollo-utilities": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.3.4.tgz",
+      "integrity": "sha512-pk2hiWrCXMAy2fRPwEyhvka+mqwzeP60Jr1tRYi5xru+3ko94HI9o6lK0CT33/w4RDlxWchmdhDCrvdr+pHCig==",
+      "dependencies": {
+        "@wry/equality": "^0.1.2",
+        "fast-json-stable-stringify": "^2.0.0",
+        "ts-invariant": "^0.4.0",
+        "tslib": "^1.10.0"
+      },
+      "peerDependencies": {
+        "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
+    "node_modules/apollo-utilities/node_modules/@wry/equality": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.1.11.tgz",
+      "integrity": "sha512-mwEVBDUVODlsQQ5dfuLUS5/Tf7jqUKyhKYHmVi4fPB6bDMOfWvUPJmKgS1Z7Za/sOI3vzWt4+O7yCiL/70MogA==",
+      "dependencies": {
+        "tslib": "^1.9.3"
+      }
+    },
+    "node_modules/apollo-utilities/node_modules/ts-invariant": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
+      "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+      "dependencies": {
+        "tslib": "^1.9.3"
+      }
+    },
+    "node_modules/apollo-utilities/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -9995,6 +10347,28 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
       "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
     },
+    "node_modules/graphql": {
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.5.3.tgz",
+      "integrity": "sha512-sM+jXaO5KinTui6lbK/7b7H/Knj9BpjGxZ+Ki35v7YbUJxxdBCUqNM0h3CRVU1ZF9t5lNiBzvBCSYPvIwxPOQA==",
+      "engines": {
+        "node": ">= 10.x"
+      }
+    },
+    "node_modules/graphql-tag": {
+      "version": "2.12.5",
+      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.5.tgz",
+      "integrity": "sha512-5xNhP4063d16Pz3HBtKprutsPrmHZi5IdUGOWRxA2B6VF7BIRGOHZ5WQvDmJXZuPcBg7rYwaFxvQYjqkSdR3TQ==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0"
+      }
+    },
     "node_modules/growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
@@ -15125,6 +15499,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/optimism": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.16.1.tgz",
+      "integrity": "sha512-64i+Uw3otrndfq5kaoGNoY7pvOhSsjFEN4bdEFh80MWVk/dbgJfMv7VFDeCT8LxNAlEVhQmdVEbfE7X2nWNIIg==",
+      "dependencies": {
+        "@wry/context": "^0.6.0",
+        "@wry/trie": "^0.3.0"
+      }
+    },
     "node_modules/optimize-css-assets-webpack-plugin": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.4.tgz",
@@ -20241,6 +20624,14 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/symbol-observable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",
+      "integrity": "sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -20722,6 +21113,17 @@
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
     },
+    "node_modules/ts-invariant": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.9.1.tgz",
+      "integrity": "sha512-hSeYibh29ULlHkuEfukcoiyTct+s2RzczMLTv4x3NWC/YrBy7x7ps5eYq/b4Y3Sb9/uAlf54+/5CAEMVxPhuQw==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ts-pnp": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
@@ -23200,9 +23602,50 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zen-observable": {
+      "version": "0.8.15",
+      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
+      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "node_modules/zen-observable-ts": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.1.0.tgz",
+      "integrity": "sha512-1h4zlLSqI2cRLPJUHJFL8bCWHhkpuXkF+dbGkRaWjgDIG26DmzyshUMrdV/rL3UnR+mhaX4fRq8LPouq0MYYIA==",
+      "dependencies": {
+        "@types/zen-observable": "0.8.3",
+        "zen-observable": "0.8.15"
+      }
     }
   },
   "dependencies": {
+    "@apollo/client": {
+      "version": "3.4.10",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.4.10.tgz",
+      "integrity": "sha512-b+8TT3jBM2BtEJi+V2FuLpvoYDZCY3baNYrgAgEyw4fjnuBCSRPY7qVjqriZAwMaGiTLtyVifGhmdeICQs4Eow==",
+      "requires": {
+        "@graphql-typed-document-node/core": "^3.0.0",
+        "@wry/context": "^0.6.0",
+        "@wry/equality": "^0.5.0",
+        "@wry/trie": "^0.3.0",
+        "graphql-tag": "^2.12.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "optimism": "^0.16.1",
+        "prop-types": "^15.7.2",
+        "symbol-observable": "^4.0.0",
+        "ts-invariant": "^0.9.0",
+        "tslib": "^2.3.0",
+        "zen-observable-ts": "^1.1.0"
+      }
+    },
+    "@apollo/react-hooks": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@apollo/react-hooks/-/react-hooks-4.0.0.tgz",
+      "integrity": "sha512-fCu0cbne3gbUl0QbA8X4L33iuuFVQbC5Jo2MIKRK8CyawR6PoxDpFdFA1kc6033ODZuZZ9Eo4RdeJFlFIIYcLA==",
+      "requires": {
+        "@apollo/client": "latest"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.14.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
@@ -24432,6 +24875,12 @@
         }
       }
     },
+    "@graphql-typed-document-node/core": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.0.tgz",
+      "integrity": "sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg==",
+      "requires": {}
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -25998,6 +26447,11 @@
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.1.tgz",
       "integrity": "sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw=="
     },
+    "@types/zen-observable": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.3.tgz",
+      "integrity": "sha512-fbF6oTd4sGGy0xjHPKAt+eS2CrxJ3+6gQ3FGcBoIJR2TLAyCkCyI8JqZNy+FeON0AhVgNJoUumVoZQjBFUqHkw=="
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "4.29.3",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.29.3.tgz",
@@ -26250,6 +26704,30 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@wry/context": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.6.1.tgz",
+      "integrity": "sha512-LOmVnY1iTU2D8tv4Xf6MVMZZ+juIJ87Kt/plMijjN20NMAXGmH4u8bS1t0uT74cZ5gwpocYueV58YwyI8y+GKw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
+    "@wry/equality": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.5.2.tgz",
+      "integrity": "sha512-oVMxbUXL48EV/C0/M7gLVsoK6qRHPS85x8zECofEZOVvxGmIPLA9o5Z27cc2PoAyZz1S2VoM2A7FLAnpfGlneA==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
+    "@wry/trie": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.3.1.tgz",
+      "integrity": "sha512-WwB53ikYudh9pIorgxrkHKrQZcCqNM/Q/bDzZBffEaGUKGuHrRb3zZUT9Sh2qw9yogC7SsdRmQ1ER0pqvd3bfw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -26408,6 +26886,260 @@
         "picomatch": "^2.0.4"
       }
     },
+    "apollo-boost": {
+      "version": "0.4.9",
+      "resolved": "https://registry.npmjs.org/apollo-boost/-/apollo-boost-0.4.9.tgz",
+      "integrity": "sha512-05y5BKcDaa8w47f8d81UVwKqrAjn8uKLv6QM9fNdldoNzQ+rnOHgFlnrySUZRz9QIT3vPftQkEz2UEASp1Mi5g==",
+      "requires": {
+        "apollo-cache": "^1.3.5",
+        "apollo-cache-inmemory": "^1.6.6",
+        "apollo-client": "^2.6.10",
+        "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.10.0"
+      },
+      "dependencies": {
+        "ts-invariant": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
+          "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+          "requires": {
+            "tslib": "^1.9.3"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "apollo-cache": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.3.5.tgz",
+      "integrity": "sha512-1XoDy8kJnyWY/i/+gLTEbYLnoiVtS8y7ikBr/IfmML4Qb+CM7dEEbIUOjnY716WqmZ/UpXIxTfJsY7rMcqiCXA==",
+      "requires": {
+        "apollo-utilities": "^1.3.4",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "apollo-cache-inmemory": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.6.tgz",
+      "integrity": "sha512-L8pToTW/+Xru2FFAhkZ1OA9q4V4nuvfoPecBM34DecAugUZEBhI2Hmpgnzq2hTKZ60LAMrlqiASm0aqAY6F8/A==",
+      "requires": {
+        "apollo-cache": "^1.3.5",
+        "apollo-utilities": "^1.3.4",
+        "optimism": "^0.10.0",
+        "ts-invariant": "^0.4.0",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "@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"
+          }
+        },
+        "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"
+          }
+        },
+        "ts-invariant": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
+          "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+          "requires": {
+            "tslib": "^1.9.3"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "apollo-client": {
+      "version": "2.6.10",
+      "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.6.10.tgz",
+      "integrity": "sha512-jiPlMTN6/5CjZpJOkGeUV0mb4zxx33uXWdj/xQCfAMkuNAC3HN7CvYDyMHHEzmcQ5GV12LszWoQ/VlxET24CtA==",
+      "requires": {
+        "@types/zen-observable": "^0.8.0",
+        "apollo-cache": "1.3.5",
+        "apollo-link": "^1.0.0",
+        "apollo-utilities": "1.3.4",
+        "symbol-observable": "^1.0.2",
+        "ts-invariant": "^0.4.0",
+        "tslib": "^1.10.0",
+        "zen-observable": "^0.8.0"
+      },
+      "dependencies": {
+        "symbol-observable": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+          "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+        },
+        "ts-invariant": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
+          "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+          "requires": {
+            "tslib": "^1.9.3"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "apollo-link": {
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.14.tgz",
+      "integrity": "sha512-p67CMEFP7kOG1JZ0ZkYZwRDa369w5PIjtMjvrQd/HnIV8FRsHRqLqK+oAZQnFa1DDdZtOtHTi+aMIW6EatC2jg==",
+      "requires": {
+        "apollo-utilities": "^1.3.0",
+        "ts-invariant": "^0.4.0",
+        "tslib": "^1.9.3",
+        "zen-observable-ts": "^0.8.21"
+      },
+      "dependencies": {
+        "ts-invariant": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
+          "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+          "requires": {
+            "tslib": "^1.9.3"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        },
+        "zen-observable-ts": {
+          "version": "0.8.21",
+          "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.21.tgz",
+          "integrity": "sha512-Yj3yXweRc8LdRMrCC8nIc4kkjWecPAUVh0TI0OUrWXx6aX790vLcDlWca6I4vsyCGH3LpWxq0dJRcMOFoVqmeg==",
+          "requires": {
+            "tslib": "^1.9.3",
+            "zen-observable": "^0.8.0"
+          }
+        }
+      }
+    },
+    "apollo-link-error": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/apollo-link-error/-/apollo-link-error-1.1.13.tgz",
+      "integrity": "sha512-jAZOOahJU6bwSqb2ZyskEK1XdgUY9nkmeclCrW7Gddh1uasHVqmoYc4CKdb0/H0Y1J9lvaXKle2Wsw/Zx1AyUg==",
+      "requires": {
+        "apollo-link": "^1.2.14",
+        "apollo-link-http-common": "^0.2.16",
+        "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "apollo-link-http": {
+      "version": "1.5.17",
+      "resolved": "https://registry.npmjs.org/apollo-link-http/-/apollo-link-http-1.5.17.tgz",
+      "integrity": "sha512-uWcqAotbwDEU/9+Dm9e1/clO7hTB2kQ/94JYcGouBVLjoKmTeJTUPQKcJGpPwUjZcSqgYicbFqQSoJIW0yrFvg==",
+      "requires": {
+        "apollo-link": "^1.2.14",
+        "apollo-link-http-common": "^0.2.16",
+        "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "apollo-link-http-common": {
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/apollo-link-http-common/-/apollo-link-http-common-0.2.16.tgz",
+      "integrity": "sha512-2tIhOIrnaF4UbQHf7kjeQA/EmSorB7+HyJIIrUjJOKBgnXwuexi8aMecRlqTIDWcyVXCeqLhUnztMa6bOH/jTg==",
+      "requires": {
+        "apollo-link": "^1.2.14",
+        "ts-invariant": "^0.4.0",
+        "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "ts-invariant": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
+          "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+          "requires": {
+            "tslib": "^1.9.3"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "apollo-utilities": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.3.4.tgz",
+      "integrity": "sha512-pk2hiWrCXMAy2fRPwEyhvka+mqwzeP60Jr1tRYi5xru+3ko94HI9o6lK0CT33/w4RDlxWchmdhDCrvdr+pHCig==",
+      "requires": {
+        "@wry/equality": "^0.1.2",
+        "fast-json-stable-stringify": "^2.0.0",
+        "ts-invariant": "^0.4.0",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "@wry/equality": {
+          "version": "0.1.11",
+          "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.1.11.tgz",
+          "integrity": "sha512-mwEVBDUVODlsQQ5dfuLUS5/Tf7jqUKyhKYHmVi4fPB6bDMOfWvUPJmKgS1Z7Za/sOI3vzWt4+O7yCiL/70MogA==",
+          "requires": {
+            "tslib": "^1.9.3"
+          }
+        },
+        "ts-invariant": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
+          "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+          "requires": {
+            "tslib": "^1.9.3"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -30732,6 +31464,19 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
       "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg=="
     },
+    "graphql": {
+      "version": "15.5.3",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.5.3.tgz",
+      "integrity": "sha512-sM+jXaO5KinTui6lbK/7b7H/Knj9BpjGxZ+Ki35v7YbUJxxdBCUqNM0h3CRVU1ZF9t5lNiBzvBCSYPvIwxPOQA=="
+    },
+    "graphql-tag": {
+      "version": "2.12.5",
+      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.5.tgz",
+      "integrity": "sha512-5xNhP4063d16Pz3HBtKprutsPrmHZi5IdUGOWRxA2B6VF7BIRGOHZ5WQvDmJXZuPcBg7rYwaFxvQYjqkSdR3TQ==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
@@ -34589,6 +35334,15 @@
         }
       }
     },
+    "optimism": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.16.1.tgz",
+      "integrity": "sha512-64i+Uw3otrndfq5kaoGNoY7pvOhSsjFEN4bdEFh80MWVk/dbgJfMv7VFDeCT8LxNAlEVhQmdVEbfE7X2nWNIIg==",
+      "requires": {
+        "@wry/context": "^0.6.0",
+        "@wry/trie": "^0.3.0"
+      }
+    },
     "optimize-css-assets-webpack-plugin": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.4.tgz",
@@ -38694,6 +39448,11 @@
         }
       }
     },
+    "symbol-observable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz",
+      "integrity": "sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -39059,6 +39818,14 @@
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
     },
+    "ts-invariant": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.9.1.tgz",
+      "integrity": "sha512-hSeYibh29ULlHkuEfukcoiyTct+s2RzczMLTv4x3NWC/YrBy7x7ps5eYq/b4Y3Sb9/uAlf54+/5CAEMVxPhuQw==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "ts-pnp": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
@@ -41049,6 +41816,20 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "zen-observable": {
+      "version": "0.8.15",
+      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
+      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
+    },
+    "zen-observable-ts": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-1.1.0.tgz",
+      "integrity": "sha512-1h4zlLSqI2cRLPJUHJFL8bCWHhkpuXkF+dbGkRaWjgDIG26DmzyshUMrdV/rL3UnR+mhaX4fRq8LPouq0MYYIA==",
+      "requires": {
+        "@types/zen-observable": "0.8.3",
+        "zen-observable": "0.8.15"
+      }
     }
   }
 }

package.json

@@ -3,10 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/react-hooks": "^4.0.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "apollo-boost": "^0.4.9",
     "classnames": "^2.3.1",
+    "graphql": "^15.5.3",
     "hook-easy-form": "^2.7.2",
     "jwt-decode": "^3.1.2",
     "node-sass": "^6.0.1",

src/index.js

@@ -5,15 +5,24 @@ import { Provider } from 'react-redux';
 import App from './routes/app';
 import reportWebVitals from './reportWebVitals';
 
+import { ApolloProvider } from '@apollo/react-hooks';
+import ApolloClient from 'apollo-boost'
+
 import store from './store';
 import './styles/index.scss';
 
+const clientParam = { uri: 'http://player.asmer.fs.a-level.com.ua/graphql' };
+const client = new ApolloClient(clientParam);
+
+
 ReactDOM.render(
   <React.StrictMode>
     <BrowserRouter>
-      <Provider store={store}>
-        <App />
-      </Provider>
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <App />
+        </Provider>
+      </ApolloProvider>
     </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')

src/routes/graph-ql/index.jsx

@@ -0,0 +1,42 @@
+import { useQuery, useMutation, useLazyQuery } from '@apollo/react-hooks';
+import { gql } from 'apollo-boost';
+
+
+const GQL = () => {
+  const query = gql`
+  query Login($login: String!, $password: String!) {
+      login(login: $login, password: $password)  
+  }
+`;
+
+const foo = gql`
+mutation CreateUser($login: String!, $password: String!) {
+  createUser(login: $login, password: $password) {
+    _id
+    login
+  }
+}
+`
+// refetch - метод для повторного запроса
+const [mutateFunction, { data, loading, error }]  = useMutation(foo);
+// const [login, { data }] = useLazyQuery(query);
+const go = () => {
+  mutateFunction({ variables: { login: "test1@test.com", password: 'qwerty' } })
+}
+
+const lgn = () => {
+  // login({ variables: { login: "test@test.com", password: 'qwerty' } })
+}
+
+console.log('data', data)
+  return (
+    <div>
+      Hello
+
+      <button onClick={lgn}>lgn</button>
+      <button onClick={go}>GO</button>
+    </div>
+  )
+}
+
+export default GQL;

src/routes/index.js

@@ -15,4 +15,11 @@ export const ROUTES = [
     path: '/auth',
     component: lazy(() => import('./auth')),
   },
+  {
+    id: 2,
+    exact: true,
+    private: false,
+    path: '/graph-ql',
+    component: lazy(() => import('./graph-ql')),
+  },
 ]