Fix followings/followers pagination

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/mixins/relay.ts

@@ -1,40 +1,100 @@
 import { Component, Vue, Ref } from "vue-property-decorator";
 import { ActorType, IActor } from "@/types/actor";
 import { IFollower } from "@/types/actor/follower.model";
+import { RELAY_FOLLOWERS, RELAY_FOLLOWINGS } from "@/graphql/admin";
+import { Paginate } from "@/types/paginate";
 
-@Component
+@Component({
+  apollo: {
+    relayFollowings: {
+      query: RELAY_FOLLOWINGS,
+      fetchPolicy: "cache-and-network",
+      variables() {
+        return {
+          page: this.followingsPage,
+          limit: this.perPage,
+        };
+      },
+    },
+    relayFollowers: {
+      query: RELAY_FOLLOWERS,
+      fetchPolicy: "cache-and-network",
+      variables() {
+        return {
+          page: this.followersPage,
+          limit: this.perPage,
+        };
+      },
+    },
+  },
+})
 export default class RelayMixin extends Vue {
   @Ref("table") readonly table!: any;
 
+  relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
+
+  relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
+
   checkedRows: IFollower[] = [];
 
-  page = 1;
+  followingsPage = 1;
 
-  perPage = 10;
+  followersPage = 1;
+
+  perPage = 1;
 
   toggle(row: Record<string, unknown>): void {
     this.table.toggleDetails(row);
   }
 
-  async onPageChange(page: number): Promise<void> {
-    this.page = page;
-    await this.$apollo.queries.relayFollowings.fetchMore({
-      variables: {
-        page: this.page,
-        limit: this.perPage,
-      },
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        if (!fetchMoreResult) return previousResult;
-        const newFollowings = fetchMoreResult.relayFollowings.elements;
-        return {
-          relayFollowings: {
-            __typename: previousResult.relayFollowings.__typename,
-            total: previousResult.relayFollowings.total,
-            elements: [...previousResult.relayFollowings.elements, ...newFollowings],
-          },
-        };
-      },
-    });
+  async onFollowingsPageChange(page: number): Promise<void> {
+    this.followingsPage = page;
+    try {
+      await this.$apollo.queries.relayFollowings.fetchMore({
+        variables: {
+          page: this.followingsPage,
+          limit: this.perPage,
+        },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return previousResult;
+          const newFollowings = fetchMoreResult.relayFollowings.elements;
+          return {
+            relayFollowings: {
+              __typename: previousResult.relayFollowings.__typename,
+              total: previousResult.relayFollowings.total,
+              elements: [...previousResult.relayFollowings.elements, ...newFollowings],
+            },
+          };
+        },
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  async onFollowersPageChange(page: number): Promise<void> {
+    this.followersPage = page;
+    try {
+      await this.$apollo.queries.relayFollowers.fetchMore({
+        variables: {
+          page: this.followersPage,
+          limit: this.perPage,
+        },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return previousResult;
+          const newFollowers = fetchMoreResult.relayFollowers.elements;
+          return {
+            relayFollowers: {
+              __typename: previousResult.relayFollowers.__typename,
+              total: previousResult.relayFollowers.total,
+              elements: [...previousResult.relayFollowers.elements, ...newFollowers],
+            },
+          };
+        },
+      });
+    } catch (err) {
+      console.error(err);
+    }
   }
 
   static isInstance(actor: IActor): boolean {