Test fetchMore - broken

fetchMore operates on the raw query result
query update fn is then called on the combined result
this result is then propagated through the page

aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue

@@ -6,7 +6,6 @@
     :enable-create="false"
     :enable-edit="false"
     :elevated="false"
-    @items="docsByDay = groupDocsByDay($event)"
     @lastQuery="lastQuery = $event"
     ref="iterator"
     disable-pagination
@@ -57,9 +56,9 @@
         </div>
       </div>
     </template>
-    <template #default>
+    <template #default="{ items }">
       <v-list-item
-        v-for="day in listDocsByDay(docsByDay)"
+        v-for="day in groupDocsByDay(items)"
         two-line
         :key="'day-' + day[0]"
         :id="'documentation_' + day[0].toISODate()"
@@ -199,6 +198,7 @@ export default {
     },
   },
   methods: {
+    // TODO: Scroll to actual first date!
     resetDate() {
       // Assure current date
       console.log('Resetting date range', this.$route.hash);
@@ -229,21 +229,20 @@ export default {
       });
       this.resetDate();
     },
-    // => {dt: [dt doc ...] ...}
     groupDocsByDay(docs) {
-      return docs.reduce((byDay, doc) => {
+      // => {dt: [dt doc ...] ...}
+      this.docsByDay = docs.reduce((byDay, doc) => {
         // This works with dummy. Does actual doc have dateStart instead?
         const day = DateTime.fromISO(doc.datetimeStart).startOf("day");
         byDay[day] ??= [day];
         byDay[day].push(doc);
         return byDay;
       }, {});
-    },
-    // => [[dt doc ...] ...]
-    listDocsByDay(docsByDay) {
-      return Object.keys(docsByDay)
+      // => [[dt doc ...] ...]
+      return Object.keys(this.docsByDay)
         .sort()
-        .map((key) => docsByDay[key]);
+        .map((key) => this.docsByDay[key]);
+      // sorting is necessary since backend can send docs unordered
     },
     debounce(fn, delay) {
       let timer;
@@ -347,8 +346,11 @@ export default {
     // docsByDay: {dt: [dt doc ...] ...}
     assureDate(date) {
       if (!this.knownDates[date]) {
+        console.log(this.lastQuery);
+        console.log('unknown date', date.toISODate());
         // find missing & fetch missing range
-        const missing = this.dateRange(date).filter((ts) => !this.docsByDay[ts] );
+        const missing = this.dateRange(date)
+              .filter((ts) => !this.docsByDay[ts]);
         // ask for first to last
         this.lastQuery.fetchMore({
           variables: {
@@ -357,18 +359,17 @@ export default {
           },
           // Transform the previous result with new data
           updateQuery: (previousResult, { fetchMoreResult }) => {
-
+            console.log('previousResult', previousResult);
+            console.log('fetchMoreResult', fetchMoreResult);
             return {
-              tagsPage: {
-                __typename: previousResult.tagsPage.__typename,
-                // Merging the tag list
-                tags: [...previousResult.tagsPage.tags, ...newTags],
-                hasMore,
-              },
-            }
-          },
+              items: [...previousResult.items,
+                      ...fetchMoreResult.items.filter((doc) => {
+                        return previousResult.items.find((prev) => prev.id === doc.id)
+                      }),
+                     ],
+            };
+          }
         })
-
         // integrate into docsByDay
       }
     },