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

@@ -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',
     },

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() {