Add: code examples & most remaining slideS

danieldanielecki · Jun 15, 2024 · e5a76db · e5a76db
1 parent 3162c94
commit e5a76db
Show file tree

Hide file tree

Showing 30 changed files with 15,729 additions and 32 deletions.
diff --git a/_code/README.md b/_code/README.md
@@ -0,0 +1,70 @@
+### Introspection
+
+(show basic introspection)
+
+```graphql
+{
+  __schema {
+    types {
+      name
+    }
+  }
+}
+```
+
+After that, show how `useDisableIntrospection()` works by simply uncommenting it and reloading the page.
+
+### Circular Queries
+
+(show users query with 5 fields and nested posts, author, posts and author)
+
+```graphql
+query {
+  users {
+    id
+    name
+    email
+    age
+    posts {
+      id
+      title
+      body
+      published
+      author {
+        id
+        name
+        email
+        age
+        posts {
+          id
+          title
+          author {
+            id
+            posts {
+              author {
+                id
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+### Apollo Client demo
+
+(little example how it looks in reality in frontend)
+
+1. `yarn start` in `graphql-prisma`
+2. `yarn start` in `apollo-client`
+3. Open `localhost:1234`
+
+### Testing demo
+
+(shortly show tested 1 of each: query, mutation, and subscription)
+
+1. `cd _code`
+2. `cd unit-testing`
+3. `yarn test`
diff --git a/_code/apollo-client/package.json b/_code/apollo-client/package.json
@@ -0,0 +1,15 @@
+{
+  "scripts": {
+    "start": "parcel src/index.html"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.12.5"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.8.8",
+    "apollo-boost": "^0.1.14",
+    "graphql": "^16.8.1",
+    "react": "^18.2.0"
+  },
+  "license": "ISC"
+}
diff --git a/_code/apollo-client/src/index.html b/_code/apollo-client/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+    <div id="users"></div>
+    <div id="posts"></div>
+    <script src="./index.js" type="application/javascript"></script>
+</body>
+</html>
diff --git a/_code/apollo-client/src/index.js b/_code/apollo-client/src/index.js
@@ -0,0 +1,33 @@
+import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
+
+const client = new ApolloClient({
+  uri: "http://localhost:4000/graphql",
+  cache: new InMemoryCache(),
+});
+
+const getUsers = gql`
+  query {
+    users {
+      id
+      name
+    }
+  }
+`;
+
+client
+  .query({
+    query: getUsers,
+  })
+  .then((response) => {
+    let html = "";
+
+    response.data.users.forEach((user) => {
+      html += `
+            <div>
+                <h3>${user.name}</h3>
+            </div>
+        `;
+    });
+
+    document.getElementById("users").innerHTML = html;
+  });