Add: notes for first demo

danieldanielecki · Jul 1, 2024 · d49dd48 · d49dd48
1 parent 9ea6f41
commit d49dd48
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 10 deletions.
diff --git a/_code/README.md b/_code/README.md
@@ -1,3 +1,139 @@
+# Demo part instructions
+
+## Demo optional
+
+### Simplest example of GraphQL query
+
+#### Show basic dummy query
+
+```graphql
+query {
+  users {
+    id
+  }
+}
+```
+
+#### Show one more field having also name (as per how it's written in schema definition)
+
+```graphql
+query {
+  users {
+    id
+    name
+  }
+}
+```
+
+#### Show one more field having also email (as per how it's written in schema definition)
+
+```graphql
+query {
+  users {
+    id
+    name
+    email
+  }
+}
+```
+
+#### Show one more field having also optional age (as per how it's written in schema definition)
+
+```graphql
+query {
+  users {
+    id
+    name
+    email
+    age
+  }
+}
+```
+
+#### Show one more field having nested posts (as per how it's written in schema definition)
+
+```graphql
+query {
+  users {
+    id
+    name
+    email
+    age
+    posts {
+      id
+    }
+  }
+}
+```
+
+#### Show one nested field inside already nested posts (as per how it's written in schema definition)
+
+```graphql
+query {
+  users {
+    id
+    name
+    email
+    age
+    posts {
+      id
+      title
+    }
+  }
+}
+```
+
+#### Show one last nested field inside already nested posts (as per how it's written in schema definition)
+
+```graphql
+query {
+  users {
+    id
+    name
+    email
+    age
+    posts {
+      id
+      title
+      published
+    }
+  }
+}
+```
+
+#### Show real use case in index.html/js
+
+```graphql
+query {
+  users {
+    id
+    name
+  }
+}
+```
+
+##### Show network tab with the data under `Preview` of request
+
+#### Show real use case in index.html/js with one extra field
+
+```graphql
+query {
+  users {
+    id
+    name
+    email
+  }
+}
+```
+
+##### Show network tab with the data under `Preview` of request having also email
+
+##### Print to HTML the email
+
+##### Revert it back not to have in query `email` and show `undefined` on HTML/under `Preview` of request
+
+##### Show `200 OK` Status Code under `Preview` of request even if this resource doesn't return anything
+
 ### Introspection
 
 #### Show basic introspection

diff --git a/_code/apollo-client/src/index.js b/_code/apollo-client/src/index.js
@@ -24,7 +24,7 @@ client
     response.data.users.forEach((user) => {
       html += `
             <div>
-                <h3>${user.name}</h3>
+                <h3>${user.email}</h3>
             </div>
         `;
     });

diff --git a/_code/apollo-client/yarn.lock b/_code/apollo-client/yarn.lock
@@ -41,7 +41,7 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz"
   integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==
 
-"@babel/core@^7.4.4":
+"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.0.0-0 || ^8.0.0-0 <8.0.0", "@babel/core@^7.12.0", "@babel/core@^7.13.0", "@babel/core@^7.4.0 || ^8.0.0-0 <8.0.0", "@babel/core@^7.4.4":
   version "7.23.6"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.23.6.tgz"
   integrity sha512-FxpRyGjrMJXh7X3wGLGhNDCRiwpWEF74sKjTLDJSG5Kyvow3QZaG0Adbqzi9ZrVjTWpsX+2cxWXD71NMg93kdw==
@@ -1715,7 +1715,7 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.22.2:
+browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.22.2, "browserslist@>= 4.21.0":
   version "4.22.2"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz"
   integrity sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==
@@ -3019,7 +3019,7 @@ graphql-tag@^2.12.6, graphql-tag@^2.4.2:
   dependencies:
     tslib "^2.1.0"
 
-graphql@^16.8.1:
+"graphql@^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0", "graphql@^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0", "graphql@^0.11.3 || ^0.12.3 || ^0.13.0 || ^14.0.0 || ^15.0.0", "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 || ^16.0.0 || ^17.0.0", "graphql@^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0", "graphql@^14.0.0 || ^15.0.0 || ^16.0.0", graphql@^16.8.1, "graphql@>= 0.11.0":
   version "16.8.1"
   resolved "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz"
   integrity sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==
@@ -4869,7 +4869,7 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react@^18.2.0:
+"react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -5026,7 +5026,7 @@ request-promise-native@^1.0.5:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
-request@^2.88.0:
+request@^2.34, request@^2.88.0:
   version "2.88.2"
   resolved "https://registry.npmjs.org/request/-/request-2.88.2.tgz"
   integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==

diff --git a/index.html b/index.html
@@ -100,7 +100,7 @@ <h2>Why GraphQL?</h2>
 				<ul>
 					<li>No Over/Under-Fetching</li>
 					<li>Non-null</li>
-					<li>Performance</li>
+					<li>Performance*</li>
 					<li>Single Endpoint</li>
 					<li>Strong Typing</li>
 					<li>Subscriptions</li>
@@ -180,7 +180,7 @@ <h2>GraphQL Basics: Query</h2>
 			</section>
 			<section>
 				<span>(optional)</span>
-				<h2>GraphQL Query == REST "GET"</h2>
+				<h2>GraphQL Query == "GET"</h2>
 			</section>
 			<section>
 				<span>(optional)</span>
@@ -218,7 +218,7 @@ <h2>GraphQL Mutations</h2>
 			</section>
 			<section>
 				<span>(optional)</span>
-				<h3>GraphQL Mutation<br>==<br>REST "POST", "PUT", "PATCH", "DELETE" (C<s>R</s>UD)</h3>
+				<h3>GraphQL Mutation<br>==<br>"POST", "PUT", "PATCH", "DELETE" (C<s>R</s>UD)</h3>
 			</section>
 			<section>
 				<span>(optional)</span>
@@ -244,7 +244,7 @@ <h2>GraphQL Subscriptions</h2>
 			</section>
 			<section>
 				<span>(optional)</span>
-				<h2>GraphQL Subscription<br>==<br>REST WebSockets</h2>
+				<h2>GraphQL Subscription<br>==<br>WebSockets</h2>
 			</section>
 			<section>
 				<span>(optional)</span>