From da57e9391c47af802d98768a6b9f37541782c55f Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Thu, 5 Sep 2019 01:15:23 +0200
Subject: [PATCH 1/2] Fix #1394

It seems that we weren't using the API of `vue-apollo` in the right way.
The `update` callback is to transform the results (e.g. to map between
the server response and a `data` attribute with a different name). For
pagination there is a dedicated procedure called `fetchMore`. See:

* https://vue-apollo.netlify.com/guide/apollo/pagination.html
* https://vue-apollo.netlify.com/guide/components/query.html#query-operations
---
 webapp/pages/index.vue             | 28 ++++++++++++++++++++--------
 webapp/pages/profile/_id/_slug.vue | 30 +++++++++++++++++++++---------
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 8dad24b65..e34a22373 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -61,7 +61,6 @@
 
 <script>
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
-import uniqBy from 'lodash/uniqBy'
 import HcEmpty from '~/components/Empty'
 import HcPostCard from '~/components/PostCard'
 import HcLoadMore from '~/components/LoadMore.vue'
@@ -151,6 +150,23 @@ export default {
     },
     showMoreContributions() {
       this.offset += this.pageSize
+      this.$apollo.queries.Post.fetchMore({
+        variables: {
+          offset: this.offset,
+          filter: this.finalFilters,
+          first: this.pageSize,
+          orderBy: this.sorting,
+        },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          if (!fetchMoreResult || fetchMoreResult.Post.length < this.pageSize) {
+            this.hasMore = false
+          }
+          const result = Object.assign({}, previousResult, {
+            Post: [...previousResult.Post, ...fetchMoreResult.Post],
+          })
+          return result
+        },
+      })
     },
     deletePost(deletedPost) {
       this.posts = this.posts.filter(post => {
@@ -164,19 +180,15 @@ export default {
         return filterPosts(this.$i18n)
       },
       variables() {
-        const result = {
+        return {
           filter: this.finalFilters,
           first: this.pageSize,
-          offset: this.offset,
           orderBy: this.sorting,
+          offset: 0,
         }
-        return result
       },
       update({ Post }) {
-        this.hasMore = Post && Post.length >= this.pageSize
-        if (!Post) return
-        const posts = uniqBy([...this.posts, ...Post], 'id')
-        this.posts = posts
+        this.posts = Post
       },
       fetchPolicy: 'cache-and-network',
     },
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 40e588d9a..996d4477d 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -307,7 +307,7 @@ export default {
     return {
       User: [],
       posts: [],
-      hasMore: false,
+      hasMore: true,
       offset: 0,
       pageSize: 6,
       tabActive: 'post',
@@ -364,6 +364,23 @@ export default {
     },
     showMoreContributions() {
       this.offset += this.pageSize
+      this.$apollo.queries.Post.fetchMore({
+        variables: {
+          offset: this.offset,
+          filter: this.filter,
+          first: this.pageSize,
+          orderBy: this.sorting,
+        },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          if (!fetchMoreResult || fetchMoreResult.Post.length < this.pageSize) {
+            this.hasMore = false
+          }
+          const result = Object.assign({}, previousResult, {
+            Post: [...previousResult.Post, ...fetchMoreResult.Post],
+          })
+          return result
+        },
+      })
     },
     resetPostList() {
       this.offset = 0
@@ -392,19 +409,14 @@ export default {
         return {
           filter: this.filter,
           first: this.pageSize,
-          offset: this.offset,
+          offset: 0,
           orderBy: 'createdAt_desc',
         }
       },
-      fetchPolicy: 'cache-and-network',
       update({ Post }) {
-        this.hasMore = Post && Post.length >= this.pageSize
-        if (!Post) return
-        // TODO: find out why `update` gets called twice initially.
-        // We have to filter for uniq posts only because we get the same
-        // result set twice.
-        this.posts = this.uniq([...this.posts, ...Post])
+        this.posts = Post
       },
+      fetchPolicy: 'cache-and-network',
     },
     User: {
       query() {

From 0fca14a29e1a1c33334edb2ad848cc92ce0ef4de Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Thu, 5 Sep 2019 11:52:19 +0200
Subject: [PATCH 2/2] Fix nullpointer issues

It seems that `this.$apollo.queries.Post` can be undefined sometimes.
Honestly I don't know why but I could imagine that it might happen on
subpages and when the cypress test triggers the infinite loader, we
face this bug.
---
 webapp/pages/index.vue             | 11 ++++-------
 webapp/pages/profile/_id/_slug.vue |  5 ++++-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index e34a22373..09270f936 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -125,12 +125,6 @@ export default {
       return this.$apollo.loading || (this.posts && this.posts.length > 0)
     },
   },
-  watch: {
-    postsFilter() {
-      this.offset = 0
-      this.posts = []
-    },
-  },
   methods: {
     toggleOnlySorting(x) {
       this.offset = 0
@@ -149,8 +143,11 @@ export default {
       }).href
     },
     showMoreContributions() {
+      const { Post: PostQuery } = this.$apollo.queries
+      if (!PostQuery) return // seems this can be undefined on subpages
+
       this.offset += this.pageSize
-      this.$apollo.queries.Post.fetchMore({
+      PostQuery.fetchMore({
         variables: {
           offset: this.offset,
           filter: this.finalFilters,
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 996d4477d..edefe6be0 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -363,8 +363,11 @@ export default {
       this.$apollo.queries.User.refetch()
     },
     showMoreContributions() {
+      const { Post: PostQuery } = this.$apollo.queries
+      if (!PostQuery) return // seems this can be undefined on subpages
+
       this.offset += this.pageSize
-      this.$apollo.queries.Post.fetchMore({
+      PostQuery.fetchMore({
         variables: {
           offset: this.offset,
           filter: this.filter,