diff --git a/backend/graphql/Completion/index.ts b/backend/graphql/Completion/index.ts
index 8a66e27d7..e617b1941 100644
--- a/backend/graphql/Completion/index.ts
+++ b/backend/graphql/Completion/index.ts
@@ -1,4 +1,4 @@
-// generated Mon Jul 11 2022 17:59:37 GMT+0300 (Itä-Euroopan kesäaika)
+// generated Thu Aug 11 2022 17:12:07 GMT+0300 (Itä-Euroopan kesäaika)
 
 export * from "./input"
 export * from "./model"
diff --git a/backend/graphql/Course/index.ts b/backend/graphql/Course/index.ts
index 8a66e27d7..e617b1941 100644
--- a/backend/graphql/Course/index.ts
+++ b/backend/graphql/Course/index.ts
@@ -1,4 +1,4 @@
-// generated Mon Jul 11 2022 17:59:37 GMT+0300 (Itä-Euroopan kesäaika)
+// generated Thu Aug 11 2022 17:12:07 GMT+0300 (Itä-Euroopan kesäaika)
 
 export * from "./input"
 export * from "./model"
diff --git a/backend/graphql/StudyModule/index.ts b/backend/graphql/StudyModule/index.ts
index 8a66e27d7..e617b1941 100644
--- a/backend/graphql/StudyModule/index.ts
+++ b/backend/graphql/StudyModule/index.ts
@@ -1,4 +1,4 @@
-// generated Mon Jul 11 2022 17:59:37 GMT+0300 (Itä-Euroopan kesäaika)
+// generated Thu Aug 11 2022 17:12:07 GMT+0300 (Itä-Euroopan kesäaika)
 
 export * from "./input"
 export * from "./model"
diff --git a/backend/graphql/User/index.ts b/backend/graphql/User/index.ts
index 8a66e27d7..e617b1941 100644
--- a/backend/graphql/User/index.ts
+++ b/backend/graphql/User/index.ts
@@ -1,4 +1,4 @@
-// generated Mon Jul 11 2022 17:59:37 GMT+0300 (Itä-Euroopan kesäaika)
+// generated Thu Aug 11 2022 17:12:07 GMT+0300 (Itä-Euroopan kesäaika)
 
 export * from "./input"
 export * from "./model"
diff --git a/backend/graphql/index.ts b/backend/graphql/index.ts
index 177e86aea..4e792c5e6 100644
--- a/backend/graphql/index.ts
+++ b/backend/graphql/index.ts
@@ -1,4 +1,4 @@
-// generated Mon Jul 11 2022 17:59:37 GMT+0300 (Itä-Euroopan kesäaika)
+// generated Thu Aug 11 2022 17:12:07 GMT+0300 (Itä-Euroopan kesäaika)
 
 export * from "./ABEnrollment"
 export * from "./ABStudy"
diff --git a/docs/graphql.md b/docs/graphql.md
index fef7093e5..8b71b3cca 100644
--- a/docs/graphql.md
+++ b/docs/graphql.md
@@ -8,7 +8,7 @@ If you make changes to the GraphQL schema, resolvers etc. in the backend and/or
 
 Ensure you have a fresh GraphQL schema by running `npm run generate` in the backend folder.
 
-Then run `npm run graphql-codegen` in the frontend folder. You can also run `npm run graphql-codegen --watch` to watch for changes and regenerate the frontend types automatically.
+Then run `npm run graphql-codegen` in the frontend folder. You can also run `npm run graphql-codegen:watch` to watch for changes and regenerate the frontend types automatically.
 
 ## Detailed example from backend to frontend:
 
@@ -49,7 +49,7 @@ query StaffMemberDetails($id: ID!) {
 }
 ```
 
-Note that even if you could leave the query unnamed, it would then be assigned a random name that's not very helpful in the context.
+Note that even if you could leave the query unnamed, it would then be assigned a random type name which would be less helpful.
 
 Run `npm run graphql-codegen` in the frontend folder. This will generate a bucketload of useful typings and other code.
 
@@ -72,7 +72,7 @@ function SayHello(id: string) {
     <div>
       {loading && <p>Loading...</p>}
       {error && <p>Error: {error.message}</p>}
-      {data && <p>Hello, {data.staffMember?.user.name ?? "stranger"}</p>}
+      {data(<p>Hello, {data.staffMember?.user.name ?? "stranger"}</p>}
     </div>
   )
 }
diff --git a/frontend/apollo.config.js b/frontend/apollo.config.js
index 55315592a..ceb8e5925 100644
--- a/frontend/apollo.config.js
+++ b/frontend/apollo.config.js
@@ -1,16 +1,7 @@
 const path = require("path")
 module.exports = {
   client: {
-    tagName: "gql",
-    includes: [
-      "./components/**/*.tsx",
-      "./pages/**/*.tsx",
-      "./components/**/*.ts",
-      "./pages/**/*.ts",
-      "./graphql/**/*.ts",
-      "./lib/**/*.tsx",
-      "./lib/**/*.ts",
-    ],
+    includes: ["./graphql/**/*.graphql"],
     excludes: ["node_modules"],
     service: {
       name: "backend",
diff --git a/frontend/codegen.yml b/frontend/codegen.yml
index d1da0943d..3770903ef 100644
--- a/frontend/codegen.yml
+++ b/frontend/codegen.yml
@@ -6,19 +6,26 @@ config:
   avoidOptionals:
     field: true
   nonOptionalTypeName: true
+  dedupeFragments: true
+hooks:
+  afterAllFileWrite:
+    - prettier --write
 generates:
   ./graphql/generated/index.ts:
     pluckConfig:
       modules:
         - name: "@apollo/client"
           identifier: gql
-    config:
-      dedupeFragments: true
     plugins:
+      - add:
+          placement: "prepend"
+          content:
+            - "/**"
+            - " * This is an automatically generated file."
+            - " * Run `npm run graphql-codegen` to regenerate."
+            - " **/"
+      - time
       - typescript
       - typescript-operations
       - fragment-matcher
       - typed-document-node
-    hooks:
-      afterOneFileWrite:
-        - prettier --write
diff --git a/frontend/graphql/generated/index.ts b/frontend/graphql/generated/index.ts
index fbc178c58..a57f95709 100644
--- a/frontend/graphql/generated/index.ts
+++ b/frontend/graphql/generated/index.ts
@@ -1,3 +1,8 @@
+/**
+ * This is an automatically generated file.
+ * Run `npm run graphql-codegen` to regenerate.
+ **/
+
 import { TypedDocumentNode as DocumentNode } from "@graphql-typed-document-node/core"
 
 export type Maybe<T> = T | null
@@ -11,6 +16,8 @@ export type MakeOptional<T, K extends keyof T> = Omit<T, K> & {
 export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & {
   [SubKey in K]: Maybe<T[SubKey]>
 }
+// Generated on 2022-08-12T12:58:30+03:00
+
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
   ID: string
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b46efd997..4f30f35ef 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -83,9 +83,11 @@
         "yup": "^0.32.11"
       },
       "devDependencies": {
+        "@graphql-codegen/add": "^3.2.1",
         "@graphql-codegen/cli": "2.11.3",
         "@graphql-codegen/fragment-matcher": "^3.3.0",
         "@graphql-codegen/gql-tag-operations-preset": "^1.5.3",
+        "@graphql-codegen/time": "^3.2.1",
         "@graphql-codegen/typescript": "2.7.2",
         "@graphql-codegen/typescript-document-nodes": "^2.3.2",
         "@graphql-codegen/typescript-operations": "^2.5.2",
@@ -1975,12 +1977,12 @@
       }
     },
     "node_modules/@graphql-codegen/add": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/add/-/add-3.2.0.tgz",
-      "integrity": "sha512-8hyr5XvTDGnpiT4nH2yH8PP4SWtUEIUdkFaZbkpkFkU0Ud9dplvSviOCdxdArffZ1FHy0XYLTMa2it+UJOtszg==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/add/-/add-3.2.1.tgz",
+      "integrity": "sha512-w82H/evh8SSGoD3K6K/Oh3kqSdbuU+TgHqMYmmHFxtH692v2xhN/cu1s/TotBQ7r4mO7OQutze7dde2tZEXGEQ==",
       "dev": true,
       "dependencies": {
-        "@graphql-codegen/plugin-helpers": "^2.5.0",
+        "@graphql-codegen/plugin-helpers": "^2.6.2",
         "tslib": "~2.4.0"
       },
       "peerDependencies": {
@@ -2381,9 +2383,9 @@
       "dev": true
     },
     "node_modules/@graphql-codegen/plugin-helpers": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-2.6.1.tgz",
-      "integrity": "sha512-RbkCPu8rZo+d3tWPUzqnZhgGutp15GVcs9UhaOcenKpCDDQxNxqGGTn76LuAAymT9y7BSnXdY20k1CW59z4nTw==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-2.6.2.tgz",
+      "integrity": "sha512-bt5PNix0MwzWP53UdaYm6URrVMWU8RlQhrTSLFjxQ8ShS5zoTlQtpZJGZc5ONqFgKa83qbUmzXUtP8oRVVn8zw==",
       "dev": true,
       "dependencies": {
         "@graphql-tools/utils": "^8.8.0",
@@ -2423,6 +2425,19 @@
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
       "dev": true
     },
+    "node_modules/@graphql-codegen/time": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/time/-/time-3.2.1.tgz",
+      "integrity": "sha512-BQ7LSOC+bHphKLoJtggK2xwkf2fWDMj6cVlqVBFHlSrjMMERCYK8QivZm3PSnmXrfxDUErQPqdxRZr61RQU5yg==",
+      "dev": true,
+      "dependencies": {
+        "@graphql-codegen/plugin-helpers": "^2.6.2",
+        "moment": "~2.29.1"
+      },
+      "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 || ^16.0.0"
+      }
+    },
     "node_modules/@graphql-codegen/typed-document-node": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/@graphql-codegen/typed-document-node/-/typed-document-node-2.3.2.tgz",
@@ -24910,12 +24925,12 @@
       }
     },
     "@graphql-codegen/add": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/add/-/add-3.2.0.tgz",
-      "integrity": "sha512-8hyr5XvTDGnpiT4nH2yH8PP4SWtUEIUdkFaZbkpkFkU0Ud9dplvSviOCdxdArffZ1FHy0XYLTMa2it+UJOtszg==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/add/-/add-3.2.1.tgz",
+      "integrity": "sha512-w82H/evh8SSGoD3K6K/Oh3kqSdbuU+TgHqMYmmHFxtH692v2xhN/cu1s/TotBQ7r4mO7OQutze7dde2tZEXGEQ==",
       "dev": true,
       "requires": {
-        "@graphql-codegen/plugin-helpers": "^2.5.0",
+        "@graphql-codegen/plugin-helpers": "^2.6.2",
         "tslib": "~2.4.0"
       },
       "dependencies": {
@@ -25225,9 +25240,9 @@
       }
     },
     "@graphql-codegen/plugin-helpers": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-2.6.1.tgz",
-      "integrity": "sha512-RbkCPu8rZo+d3tWPUzqnZhgGutp15GVcs9UhaOcenKpCDDQxNxqGGTn76LuAAymT9y7BSnXdY20k1CW59z4nTw==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/plugin-helpers/-/plugin-helpers-2.6.2.tgz",
+      "integrity": "sha512-bt5PNix0MwzWP53UdaYm6URrVMWU8RlQhrTSLFjxQ8ShS5zoTlQtpZJGZc5ONqFgKa83qbUmzXUtP8oRVVn8zw==",
       "dev": true,
       "requires": {
         "@graphql-tools/utils": "^8.8.0",
@@ -25265,6 +25280,16 @@
         }
       }
     },
+    "@graphql-codegen/time": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@graphql-codegen/time/-/time-3.2.1.tgz",
+      "integrity": "sha512-BQ7LSOC+bHphKLoJtggK2xwkf2fWDMj6cVlqVBFHlSrjMMERCYK8QivZm3PSnmXrfxDUErQPqdxRZr61RQU5yg==",
+      "dev": true,
+      "requires": {
+        "@graphql-codegen/plugin-helpers": "^2.6.2",
+        "moment": "~2.29.1"
+      }
+    },
     "@graphql-codegen/typed-document-node": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/@graphql-codegen/typed-document-node/-/typed-document-node-2.3.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 94e35ef70..48414cc9c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -93,9 +93,11 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
+    "@graphql-codegen/add": "^3.2.1",
     "@graphql-codegen/cli": "2.11.3",
     "@graphql-codegen/fragment-matcher": "^3.3.0",
     "@graphql-codegen/gql-tag-operations-preset": "^1.5.3",
+    "@graphql-codegen/time": "^3.2.1",
     "@graphql-codegen/typescript": "2.7.2",
     "@graphql-codegen/typescript-document-nodes": "^2.3.2",
     "@graphql-codegen/typescript-operations": "^2.5.2",