diff --git a/graphql/UserProfileQuery.js b/graphql/UserProfileQuery.js
index 68fa1c52c..bd90eaadf 100644
--- a/graphql/UserProfileQuery.js
+++ b/graphql/UserProfileQuery.js
@@ -1,7 +1,7 @@
import gql from 'graphql-tag'
export default gql(`
- query User($slug: String!) {
+ query User($slug: String!, $offset: Int, $first: Int) {
User(slug: $slug) {
id
name
@@ -52,7 +52,7 @@ export default gql(`
}
}
contributionsCount
- contributions(first: 6) {
+ contributions(first: $first, offset: $offset) {
id
slug
title
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index bc9880087..bd2b1bb67 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -15,11 +15,18 @@
:name="user.name || 'Anonymus'"
class="profile-avatar"
size="120px" />
-
{{ user.name }}
-
+ {{ user.name }}
+
+
+ margin="x-small">
+
+
@@ -181,11 +188,13 @@
+ ghost
+ @click="showMoreContributions">
mehr laden
@@ -216,7 +225,9 @@ export default {
data() {
return {
User: [],
- voted: false
+ voted: false,
+ page: 1,
+ pageSize: 6
}
},
computed: {
@@ -233,6 +244,15 @@ export default {
},
user() {
return this.User ? this.User[0] : {}
+ },
+ offset() {
+ return (this.page - 1) * this.pageSize
+ },
+ hasMore() {
+ return (
+ this.user.contributions &&
+ this.user.contributions.length < this.user.contributionsCount
+ )
}
},
watch: {
@@ -246,6 +266,27 @@ export default {
fetchUser() {
// TODO: we should use subscriptions instead of fetching the whole user again
this.$apollo.queries.User.refetch()
+ },
+ showMoreContributions() {
+ // this.page++
+ // Fetch more data and transform the original result
+ this.page++
+ this.$apollo.queries.User.fetchMore({
+ variables: {
+ slug: this.$route.params.slug,
+ first: this.pageSize,
+ offset: this.offset
+ },
+ // Transform the previous result with new data
+ updateQuery: (previousResult, { fetchMoreResult }) => {
+ let output = { User: this.User }
+ output.User[0].contributions = [
+ ...previousResult.User[0].contributions,
+ ...fetchMoreResult.User[0].contributions
+ ]
+ return output
+ }
+ })
}
},
apollo: {
@@ -253,7 +294,9 @@ export default {
query: require('~/graphql/UserProfileQuery.js').default,
variables() {
return {
- slug: this.$route.params.slug
+ slug: this.$route.params.slug,
+ first: this.pageSize,
+ offset: 0
}
}
}