Update examples with @appendEdge and @prependEdge directives

Author: wadamek65

example-hooks/package.json

@@ -15,14 +15,14 @@
     "classnames": "2.2.5",
     "express": "^4.15.2",
     "express-graphql": "^0.7.1",
-    "graphql": "^14.5.8",
+    "graphql": "^15.3.0",
     "graphql-compiler": "^1.7.0",
     "graphql-relay": "^0.6.0",
     "prop-types": "^15.6.2",
     "react": "0.0.0-experimental-f42431abe",
     "react-dom": "0.0.0-experimental-f42431abe",
-    "react-relay": "0.0.0-experimental-8cc94ddc",
-    "relay-runtime": "^9.0.0",
+    "react-relay": "0.0.0-experimental-8058ef82",
+    "relay-runtime": "^10.0.1",
     "todomvc-app-css": "^2.1.0",
     "todomvc-common": "^1.0.3",
     "webpack": "^4.41.2",
@@ -35,13 +35,13 @@
     "@types/prop-types": "^15.5.5",
     "@types/react": "^16.4.12",
     "@types/react-dom": "^16.0.7",
-    "@types/react-relay": "^7.0.3",
-    "@types/relay-runtime": "^8.0.6",
+    "@types/react-relay": "^7.0.8",
+    "@types/relay-runtime": "^10.0.1",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "6.1.2",
     "babel-loader": "^7.1.2",
-    "babel-plugin-relay": "^9.0.0",
+    "babel-plugin-relay": "^10.0.1",
     "babel-plugin-transform-runtime": "^6.12.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.11.1",
@@ -51,7 +51,7 @@
     "fork-ts-checker-webpack-plugin": "^3.1.1",
     "patch-package": "^6.2.0",
     "postinstall-postinstall": "^2.0.0",
-    "relay-compiler": "^9.0.0",
+    "relay-compiler": "^10.0.1",
     "relay-compiler-language-typescript": "file:../lib",
     "ts-loader": "^6.2.0",
     "tslint": "^5.20.0",

example-hooks/public/index.css

@@ -246,6 +246,8 @@ label[for='toggle-all'] {
 	height: 20px;
 	text-align: center;
 	border-top: 1px solid #e6e6e6;
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
 }
 
 .footer:before {
@@ -263,9 +265,20 @@ label[for='toggle-all'] {
 	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
 }
 
+.footer label {
+	align-content: center;
+	display: flex;
+	justify-self: center;
+	cursor: pointer;
+	position: relative;
+}
+
+.footer label input {
+	cursor: pointer;
+}
+
 .todo-count {
-	float: left;
-	text-align: left;
+	justify-self: start;
 }
 
 .todo-count strong {
@@ -304,11 +317,11 @@ label[for='toggle-all'] {
 
 .clear-completed,
 html .clear-completed:active {
-	float: right;
 	position: relative;
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
+	justify-self: end;
 }
 
 .clear-completed:hover {