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 } } }