Move to Apollo v3

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2021-05-12 18:10:07 +02:00
parent 7cb40bd9e2
commit e96dcc42b9
51 changed files with 1247 additions and 817 deletions
--- a/js/src/views/Account/Register.vue
+++ b/js/src/views/Account/Register.vue
@@ -128,6 +128,7 @@ import { MOBILIZON_INSTANCE_HOST } from "../../api/_entrypoint";
 import RouteName from "../../router/name";
 import { changeIdentity } from "../../utils/auth";
 import identityEditionMixin from "../../mixins/identityEdition";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";

@Component({
  apollo: {
@@ -164,7 +165,10 @@ export default class Register extends mixins(identityEditionMixin) {
      const { data } = await this.$apollo.mutate<{ registerPerson: IPerson }>({
        mutation: REGISTER_PERSON,
        variables: { email: this.email, ...this.identity },
-        update: (store, { data: localData }) => {
+        update: (
+          store: ApolloCache<InMemoryCache>,
+          { data: localData }: FetchResult
+        ) => {
          if (this.userAlreadyActivated) {
            const identitiesData = store.readQuery<{ identities: IPerson[] }>({
              query: IDENTITIES,
--- a/js/src/views/Account/children/EditIdentity.vue
+++ b/js/src/views/Account/children/EditIdentity.vue
@@ -232,9 +232,10 @@ import {
  DELETE_FEED_TOKEN,
 } from "@/graphql/feed_tokens";
 import { IFeedToken } from "@/types/feedtoken.model";
-import { ServerParseError } from "apollo-link-http-common";
 import { IConfig } from "@/types/config.model";
 import { CONFIG } from "@/graphql/config";
+import { ServerParseError } from "@apollo/client/link/http";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";

@Component({
  components: {
@@ -324,7 +325,7 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
        variables: {
          id: this.identity.id,
        },
-        update: (store) => {
+        update: (store: ApolloCache<InMemoryCache>) => {
          const data = store.readQuery<{ identities: IPerson[] }>({
            query: IDENTITIES,
          });
@@ -368,18 +369,21 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
      await this.$apollo.mutate({
        mutation: UPDATE_PERSON,
        variables,
-        update: (store, { data: { updatePerson } }) => {
+        update: (
+          store: ApolloCache<InMemoryCache>,
+          { data: updateData }: FetchResult
+        ) => {
          const data = store.readQuery<{ identities: IPerson[] }>({
            query: IDENTITIES,
          });

-          if (data) {
+          if (data && updateData?.updatePerson) {
            const index = data.identities.findIndex(
              (i) => i.id === this.identity.id
            );

-            this.$set(data.identities, index, updatePerson);
-            this.maybeUpdateCurrentActorCache(updatePerson);
+            this.$set(data.identities, index, updateData?.updatePerson);
+            this.maybeUpdateCurrentActorCache(updateData?.updatePerson);

            store.writeQuery({ query: IDENTITIES, data });
          }
@@ -403,13 +407,16 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
      await this.$apollo.mutate({
        mutation: CREATE_PERSON,
        variables,
-        update: (store, { data: { createPerson } }) => {
+        update: (
+          store: ApolloCache<InMemoryCache>,
+          { data: updateData }: FetchResult
+        ) => {
          const data = store.readQuery<{ identities: IPerson[] }>({
            query: IDENTITIES,
          });

-          if (data) {
-            data.identities.push(createPerson);
+          if (data && updateData?.createPerson) {
+            data.identities.push(updateData?.createPerson);

            store.writeQuery({ query: IDENTITIES, data });
          }
--- a/js/src/views/Admin/AdminGroupProfile.vue
+++ b/js/src/views/Admin/AdminGroupProfile.vue
@@ -88,6 +88,11 @@
        :loading="$apollo.queries.group.loading"
        paginated
        backend-pagination
+        :current-page.sync="membersPage"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
        :total="group.members.total"
        :per-page="EVENTS_PER_PAGE"
        @page-change="onMembersPageChange"
@@ -119,8 +124,11 @@
                <span v-if="props.row.actor.name">{{
                  props.row.actor.name
                }}</span
+                ><span v-else>@{{ usernameWithDomain(props.row.actor) }}</span
                ><br />
-                <span class="is-size-7 has-text-grey"
+                <span
+                  v-if="props.row.actor.name"
+                  class="is-size-7 has-text-grey"
                  >@{{ usernameWithDomain(props.row.actor) }}</span
                >
              </div>
@@ -170,11 +178,9 @@
          </span>
        </b-table-column>
        <template slot="empty">
-          <section class="section">
-            <div class="content has-text-grey has-text-centered">
-              <p>{{ $t("Nothing to see here") }}</p>
-            </div>
-          </section>
+          <empty-content icon="account-group" :inline="true">
+            {{ $t("No members found") }}
+          </empty-content>
        </template>
      </b-table>
    </section>
@@ -191,6 +197,11 @@
        :loading="$apollo.queries.group.loading"
        paginated
        backend-pagination
+        :current-page.sync="organizedEventsPage"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
        :total="group.organizedEvents.total"
        :per-page="EVENTS_PER_PAGE"
        @page-change="onOrganizedEventsPageChange"
@@ -213,11 +224,9 @@
          {{ props.row.beginsOn | formatDateTimeString }}
        </b-table-column>
        <template slot="empty">
-          <section class="section">
-            <div class="content has-text-grey has-text-centered">
-              <p>{{ $t("Nothing to see here") }}</p>
-            </div>
-          </section>
+          <empty-content icon="account-group" :inline="true">
+            {{ $t("No organized events found") }}
+          </empty-content>
        </template>
      </b-table>
    </section>
@@ -234,8 +243,13 @@
        :loading="$apollo.queries.group.loading"
        paginated
        backend-pagination
+        :current-page.sync="postsPage"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
        :total="group.posts.total"
-        :per-page="EVENTS_PER_PAGE"
+        :per-page="POSTS_PER_PAGE"
        @page-change="onPostsPageChange"
      >
        <b-table-column field="title" :label="$t('Title')" v-slot="props">
@@ -256,11 +270,9 @@
          {{ props.row.publishAt | formatDateTimeString }}
        </b-table-column>
        <template slot="empty">
-          <section class="section">
-            <div class="content has-text-grey has-text-centered">
-              <p>{{ $t("Nothing to see here") }}</p>
-            </div>
-          </section>
+          <empty-content icon="bullhorn" :inline="true">
+            {{ $t("No posts found") }}
+          </empty-content>
        </template>
      </b-table>
    </section>
@@ -276,8 +288,14 @@ import { IGroup } from "../../types/actor";
 import { usernameWithDomain, IActor } from "../../types/actor/actor.model";
 import RouteName from "../../router/name";
 import ActorCard from "../../components/Account/ActorCard.vue";
+import EmptyContent from "../../components/Utils/EmptyContent.vue";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
+import VueRouter from "vue-router";
+const { isNavigationFailure, NavigationFailureType } = VueRouter;

-const EVENTS_PER_PAGE = 10;
+const EVENTS_PER_PAGE = 3;
+const POSTS_PER_PAGE = 1;
+const MEMBERS_PER_PAGE = 3;

@Component({
  apollo: {
@@ -287,8 +305,10 @@ const EVENTS_PER_PAGE = 10;
      variables() {
        return {
          id: this.id,
-          organizedEventsPage: 1,
+          organizedEventsPage: this.organizedEventsPage,
          organizedEventsLimit: EVENTS_PER_PAGE,
+          postsPage: this.postsPage,
+          postsLimit: POSTS_PER_PAGE,
        };
      },
      skip() {
@@ -299,6 +319,7 @@ const EVENTS_PER_PAGE = 10;
  },
  components: {
    ActorCard,
+    EmptyContent,
  },
 })
 export default class AdminGroupProfile extends Vue {
@@ -312,14 +333,39 @@ export default class AdminGroupProfile extends Vue {

  EVENTS_PER_PAGE = EVENTS_PER_PAGE;

-  organizedEventsPage = 1;
+  POSTS_PER_PAGE = POSTS_PER_PAGE;

-  membersPage = 1;
-
-  postsPage = 1;
+  MEMBERS_PER_PAGE = MEMBERS_PER_PAGE;

  MemberRole = MemberRole;

+  get organizedEventsPage(): number {
+    return parseInt(
+      (this.$route.query.organizedEventsPage as string) || "1",
+      10
+    );
+  }
+
+  set organizedEventsPage(page: number) {
+    this.pushRouter({ organizedEventsPage: page.toString() });
+  }
+
+  get membersPage(): number {
+    return parseInt((this.$route.query.membersPage as string) || "1", 10);
+  }
+
+  set membersPage(page: number) {
+    this.pushRouter({ membersPage: page.toString() });
+  }
+
+  get postsPage(): number {
+    return parseInt((this.$route.query.postsPage as string) || "1", 10);
+  }
+
+  set postsPage(page: number) {
+    this.pushRouter({ postsPage: page.toString() });
+  }
+
  get metadata(): Array<Record<string, string>> {
    if (!this.group) return [];
    const res: Record<string, string>[] = [
@@ -367,64 +413,85 @@ export default class AdminGroupProfile extends Vue {
  }

  async suspendProfile(): Promise<void> {
-    this.$apollo.mutate<{ suspendProfile: { id: string } }>({
-      mutation: SUSPEND_PROFILE,
-      variables: {
-        id: this.id,
-      },
-      update: (store, { data }) => {
-        if (data == null) return;
-        const profileId = this.id;
+    try {
+      await this.$apollo.mutate<{ suspendProfile: { id: string } }>({
+        mutation: SUSPEND_PROFILE,
+        variables: {
+          id: this.id,
+        },
+        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
+          if (data == null) return;
+          const profileId = this.id;

-        const profileData = store.readQuery<{ getGroup: IGroup }>({
-          query: GET_GROUP,
-          variables: {
-            id: profileId,
-          },
-        });
+          const profileData = store.readQuery<{ getGroup: IGroup }>({
+            query: GET_GROUP,
+            variables: {
+              id: profileId,
+            },
+          });

-        if (!profileData) return;
-        const { getGroup: group } = profileData;
-        group.suspended = true;
-        group.avatar = null;
-        group.name = "";
-        group.summary = "";
-        store.writeQuery({
-          query: GET_GROUP,
-          variables: {
-            id: profileId,
-          },
-          data: { getGroup: group },
-        });
-      },
-    });
+          if (!profileData) return;
+          store.writeQuery({
+            query: GET_GROUP,
+            variables: {
+              id: profileId,
+            },
+            data: {
+              getGroup: {
+                ...profileData.getGroup,
+                suspended: true,
+                avatar: null,
+                name: "",
+                summary: "",
+              },
+            },
+          });
+        },
+      });
+    } catch (e) {
+      console.error(e);
+      this.$notifier.error(this.$t("Error while suspending group") as string);
+    }
  }

  async unsuspendProfile(): Promise<void> {
-    const profileID = this.id;
-    await this.$apollo.mutate<{ unsuspendProfile: { id: string } }>({
-      mutation: UNSUSPEND_PROFILE,
-      variables: {
-        id: this.id,
-      },
-      refetchQueries: [
-        {
-          query: GET_GROUP,
-          variables: {
-            id: profileID,
-          },
+    try {
+      const profileID = this.id;
+      await this.$apollo.mutate<{ unsuspendProfile: { id: string } }>({
+        mutation: UNSUSPEND_PROFILE,
+        variables: {
+          id: this.id,
        },
-      ],
-    });
+        refetchQueries: [
+          {
+            query: GET_GROUP,
+            variables: {
+              id: profileID,
+            },
+          },
+        ],
+      });
+    } catch (e) {
+      console.error(e);
+      this.$notifier.error(this.$t("Error while suspending group") as string);
+    }
  }

  async refreshProfile(): Promise<void> {
-    this.$apollo.mutate<{ refreshProfile: IActor }>({
-      mutation: REFRESH_PROFILE,
-      variables: {
-        actorId: this.id,
-      },
-    });
+    try {
+      this.$apollo.mutate<{ refreshProfile: IActor }>({
+        mutation: REFRESH_PROFILE,
+        variables: {
+          actorId: this.id,
+        },
+      });
+      this.$notifier.success(
+        this.$t("Triggered profile refreshment") as string
+      );
+    } catch (e) {
+      console.error(e);
+      this.$notifier.error(this.$t("Error while suspending group") as string);
+    }
  }

  async onOrganizedEventsPageChange(page: number): Promise<void> {
@@ -435,24 +502,6 @@ export default class AdminGroupProfile extends Vue {
        organizedEventsPage: this.organizedEventsPage,
        organizedEventsLimit: EVENTS_PER_PAGE,
      },
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        if (!fetchMoreResult) return previousResult;
-        const newOrganizedEvents =
-          fetchMoreResult.group.organizedEvents.elements;
-        return {
-          group: {
-            ...previousResult.group,
-            organizedEvents: {
-              __typename: previousResult.group.organizedEvents.__typename,
-              total: previousResult.group.organizedEvents.total,
-              elements: [
-                ...previousResult.group.organizedEvents.elements,
-                ...newOrganizedEvents,
-              ],
-            },
-          },
-        };
-      },
    });
  }

@@ -464,23 +513,6 @@ export default class AdminGroupProfile extends Vue {
        memberPage: this.membersPage,
        memberLimit: EVENTS_PER_PAGE,
      },
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        if (!fetchMoreResult) return previousResult;
-        const newMembers = fetchMoreResult.group.members.elements;
-        return {
-          group: {
-            ...previousResult.group,
-            members: {
-              __typename: previousResult.group.members.__typename,
-              total: previousResult.group.members.total,
-              elements: [
-                ...previousResult.group.members.elements,
-                ...newMembers,
-              ],
-            },
-          },
-        };
-      },
    });
  }

@@ -490,24 +522,23 @@ export default class AdminGroupProfile extends Vue {
      variables: {
        actorId: this.id,
        postsPage: this.postsPage,
-        postLimit: EVENTS_PER_PAGE,
-      },
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        if (!fetchMoreResult) return previousResult;
-        const newPosts = fetchMoreResult.group.posts.elements;
-        return {
-          group: {
-            ...previousResult.group,
-            posts: {
-              __typename: previousResult.group.posts.__typename,
-              total: previousResult.group.posts.total,
-              elements: [...previousResult.group.posts.elements, ...newPosts],
-            },
-          },
-        };
+        postLimit: POSTS_PER_PAGE,
      },
    });
  }
+
+  private async pushRouter(args: Record<string, string>): Promise<void> {
+    try {
+      await this.$router.push({
+        name: RouteName.ADMIN_GROUP_PROFILE,
+        query: { ...this.$route.query, ...args },
+      });
+    } catch (e) {
+      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
+        throw Error(e.toString());
+      }
+    }
+  }
 }
 </script>

--- a/js/src/views/Admin/AdminProfile.vue
+++ b/js/src/views/Admin/AdminProfile.vue
@@ -74,6 +74,11 @@
        :loading="$apollo.queries.person.loading"
        paginated
        backend-pagination
+        :current-page.sync="organizedEventsPage"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
        :total="person.organizedEvents.total"
        :per-page="EVENTS_PER_PAGE"
        @page-change="onOrganizedEventsPageChange"
@@ -93,11 +98,9 @@
          </router-link>
        </b-table-column>
        <template slot="empty">
-          <section class="section">
-            <div class="content has-text-grey has-text-centered">
-              <p>{{ $t("Nothing to see here") }}</p>
-            </div>
-          </section>
+          <empty-content icon="account-group" :inline="true">
+            {{ $t("No organized events listed") }}
+          </empty-content>
        </template>
      </b-table>
    </section>
@@ -115,9 +118,14 @@
            (participation) => participation.event
          )
        "
-        :loading="$apollo.queries.person.loading"
+        :loading="$apollo.loading"
        paginated
        backend-pagination
+        :current-page.sync="participationsPage"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
        :total="person.participations.total"
        :per-page="EVENTS_PER_PAGE"
        @page-change="onParticipationsPageChange"
@@ -137,11 +145,115 @@
          </router-link>
        </b-table-column>
        <template slot="empty">
-          <section class="section">
-            <div class="content has-text-grey has-text-centered">
-              <p>{{ $t("Nothing to see here") }}</p>
+          <empty-content icon="account-group" :inline="true">
+            {{ $t("No participations listed") }}
+          </empty-content>
+        </template>
+      </b-table>
+    </section>
+    <section>
+      <h2 class="subtitle">
+        {{
+          $tc("{number} memberships", person.memberships.total, {
+            number: person.memberships.total,
+          })
+        }}
+      </h2>
+      <b-table
+        :data="person.memberships.elements"
+        :loading="$apollo.loading"
+        paginated
+        backend-pagination
+        :current-page.sync="membershipsPage"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
+        :total="person.memberships.total"
+        :per-page="EVENTS_PER_PAGE"
+        @page-change="onMembershipsPageChange"
+      >
+        <b-table-column
+          field="parent.preferredUsername"
+          :label="$t('Group')"
+          v-slot="props"
+        >
+          <article class="media">
+            <figure
+              class="media-left image is-48x48"
+              v-if="props.row.parent.avatar"
+            >
+              <img
+                class="is-rounded"
+                :src="props.row.parent.avatar.url"
+                alt=""
+              />
+            </figure>
+            <b-icon
+              class="media-left"
+              v-else
+              size="is-large"
+              icon="account-circle"
+            />
+            <div class="media-content">
+              <div class="content">
+                <span v-if="props.row.parent.name">{{
+                  props.row.parent.name
+                }}</span
+                ><br />
+                <span class="is-size-7 has-text-grey"
+                  >@{{ usernameWithDomain(props.row.parent) }}</span
+                >
+              </div>
            </div>
-          </section>
+          </article>
+        </b-table-column>
+        <b-table-column field="role" :label="$t('Role')" v-slot="props">
+          <b-tag
+            type="is-primary"
+            v-if="props.row.role === MemberRole.ADMINISTRATOR"
+          >
+            {{ $t("Administrator") }}
+          </b-tag>
+          <b-tag
+            type="is-primary"
+            v-else-if="props.row.role === MemberRole.MODERATOR"
+          >
+            {{ $t("Moderator") }}
+          </b-tag>
+          <b-tag v-else-if="props.row.role === MemberRole.MEMBER">
+            {{ $t("Member") }}
+          </b-tag>
+          <b-tag
+            type="is-warning"
+            v-else-if="props.row.role === MemberRole.NOT_APPROVED"
+          >
+            {{ $t("Not approved") }}
+          </b-tag>
+          <b-tag
+            type="is-danger"
+            v-else-if="props.row.role === MemberRole.REJECTED"
+          >
+            {{ $t("Rejected") }}
+          </b-tag>
+          <b-tag
+            type="is-danger"
+            v-else-if="props.row.role === MemberRole.INVITED"
+          >
+            {{ $t("Invited") }}
+          </b-tag>
+        </b-table-column>
+        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+          <span class="has-text-centered">
+            {{ props.row.insertedAt | formatDateString }}<br />{{
+              props.row.insertedAt | formatTimeString
+            }}
+          </span>
+        </b-table-column>
+        <template slot="empty">
+          <empty-content icon="account-group" :inline="true">
+            {{ $t("No memberships found") }}
+          </empty-content>
        </template>
      </b-table>
    </section>
@@ -159,8 +271,15 @@ import { IPerson } from "../../types/actor";
 import { usernameWithDomain } from "../../types/actor/actor.model";
 import RouteName from "../../router/name";
 import ActorCard from "../../components/Account/ActorCard.vue";
+import EmptyContent from "../../components/Utils/EmptyContent.vue";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
+import VueRouter from "vue-router";
+import { MemberRole } from "@/types/enums";
+const { isNavigationFailure, NavigationFailureType } = VueRouter;

 const EVENTS_PER_PAGE = 10;
+const PARTICIPATIONS_PER_PAGE = 10;
+const MEMBERSHIPS_PER_PAGE = 10;

@Component({
  apollo: {
@@ -170,8 +289,12 @@ const EVENTS_PER_PAGE = 10;
      variables() {
        return {
          actorId: this.id,
-          organizedEventsPage: 1,
+          organizedEventsPage: this.organizedEventsPage,
          organizedEventsLimit: EVENTS_PER_PAGE,
+          participationsPage: this.participationsPage,
+          participationLimit: PARTICIPATIONS_PER_PAGE,
+          membershipsPage: this.membershipsPage,
+          membershipsLimit: MEMBERSHIPS_PER_PAGE,
        };
      },
      skip() {
@@ -181,6 +304,7 @@ const EVENTS_PER_PAGE = 10;
  },
  components: {
    ActorCard,
+    EmptyContent,
  },
 })
 export default class AdminProfile extends Vue {
@@ -194,9 +318,41 @@ export default class AdminProfile extends Vue {

  EVENTS_PER_PAGE = EVENTS_PER_PAGE;

-  organizedEventsPage = 1;
+  PARTICIPATIONS_PER_PAGE = PARTICIPATIONS_PER_PAGE;

-  participationsPage = 1;
+  MEMBERSHIPS_PER_PAGE = MEMBERSHIPS_PER_PAGE;
+
+  MemberRole = MemberRole;
+
+  get organizedEventsPage(): number {
+    return parseInt(
+      (this.$route.query.organizedEventsPage as string) || "1",
+      10
+    );
+  }
+
+  set organizedEventsPage(page: number) {
+    this.pushRouter({ organizedEventsPage: page.toString() });
+  }
+
+  get participationsPage(): number {
+    return parseInt(
+      (this.$route.query.participationsPage as string) || "1",
+      10
+    );
+  }
+
+  set participationsPage(page: number) {
+    this.pushRouter({ participationsPage: page.toString() });
+  }
+
+  get membershipsPage(): number {
+    return parseInt((this.$route.query.membershipsPage as string) || "1", 10);
+  }
+
+  set membershipsPage(page: number) {
+    this.pushRouter({ membershipsPage: page.toString() });
+  }

  get metadata(): Array<Record<string, unknown>> {
    if (!this.person) return [];
@@ -233,7 +389,7 @@ export default class AdminProfile extends Vue {
      variables: {
        id: this.id,
      },
-      update: (store, { data }) => {
+      update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
        if (data == null) return;
        const profileId = this.id;

@@ -248,16 +404,20 @@ export default class AdminProfile extends Vue {

        if (!profileData) return;
        const { person } = profileData;
-        person.suspended = true;
-        person.avatar = null;
-        person.name = "";
-        person.summary = "";
        store.writeQuery({
          query: GET_PERSON,
          variables: {
            actorId: profileId,
          },
-          data: { person },
+          data: {
+            person: {
+              ...person,
+              suspended: true,
+              avatar: null,
+              name: "",
+              summary: "",
+            },
+          },
        });
      },
    });
@@ -283,63 +443,48 @@ export default class AdminProfile extends Vue {
    });
  }

-  async onOrganizedEventsPageChange(page: number): Promise<void> {
-    this.organizedEventsPage = page;
+  async onOrganizedEventsPageChange(): Promise<void> {
    await this.$apollo.queries.person.fetchMore({
      variables: {
        actorId: this.id,
        organizedEventsPage: this.organizedEventsPage,
        organizedEventsLimit: EVENTS_PER_PAGE,
      },
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        if (!fetchMoreResult) return previousResult;
-        const newOrganizedEvents =
-          fetchMoreResult.person.organizedEvents.elements;
-        return {
-          person: {
-            ...previousResult.person,
-            organizedEvents: {
-              __typename: previousResult.person.organizedEvents.__typename,
-              total: previousResult.person.organizedEvents.total,
-              elements: [
-                ...previousResult.person.organizedEvents.elements,
-                ...newOrganizedEvents,
-              ],
-            },
-          },
-        };
-      },
    });
  }

-  async onParticipationsPageChange(page: number): Promise<void> {
-    this.participationsPage = page;
+  async onParticipationsPageChange(): Promise<void> {
    await this.$apollo.queries.person.fetchMore({
      variables: {
        actorId: this.id,
        participationPage: this.participationsPage,
-        participationLimit: EVENTS_PER_PAGE,
-      },
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        if (!fetchMoreResult) return previousResult;
-        const newParticipations =
-          fetchMoreResult.person.participations.elements;
-        return {
-          person: {
-            ...previousResult.person,
-            participations: {
-              __typename: previousResult.person.participations.__typename,
-              total: previousResult.person.participations.total,
-              elements: [
-                ...previousResult.person.participations.elements,
-                ...newParticipations,
-              ],
-            },
-          },
-        };
+        participationLimit: PARTICIPATIONS_PER_PAGE,
      },
    });
  }
+
+  async onMembershipsPageChange(): Promise<void> {
+    await this.$apollo.queries.person.fetchMore({
+      variables: {
+        actorId: this.id,
+        membershipsPage: this.participationsPage,
+        membershipsLimit: MEMBERSHIPS_PER_PAGE,
+      },
+    });
+  }
+
+  private async pushRouter(args: Record<string, string>): Promise<void> {
+    try {
+      await this.$router.push({
+        name: RouteName.ADMIN_PROFILE,
+        query: { ...this.$route.query, ...args },
+      });
+    } catch (e) {
+      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
+        throw Error(e.toString());
+      }
+    }
+  }
 }
 </script>

--- a/js/src/views/Admin/Follows.vue
+++ b/js/src/views/Admin/Follows.vue
@@ -32,7 +32,6 @@
            tag="li"
            active-class="is-active"
            :to="{ name: RouteName.RELAY_FOLLOWINGS }"
-            exact
          >
            <a>
              <b-icon icon="inbox-arrow-down"></b-icon>
@@ -46,7 +45,6 @@
            tag="li"
            active-class="is-active"
            :to="{ name: RouteName.RELAY_FOLLOWERS }"
-            exact
          >
            <a>
              <b-icon icon="inbox-arrow-up"></b-icon>
--- a/js/src/views/Admin/GroupProfiles.vue
+++ b/js/src/views/Admin/GroupProfiles.vue
@@ -23,6 +23,12 @@
        paginated
        backend-pagination
        backend-filtering
+        :debounce-search="200"
+        :current-page.sync="page"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
        :total="groups.total"
        :per-page="PROFILES_PER_PAGE"
        @page-change="onPageChange"
@@ -81,20 +87,21 @@
          </template>
        </b-table-column>
        <template slot="empty">
-          <section class="section">
-            <div class="content has-text-grey has-text-centered">
-              <p>{{ $t("No profile matches the filters") }}</p>
-            </div>
-          </section>
+          <empty-content icon="account-group" :inline="true">
+            {{ $t("No group matches the filters") }}
+          </empty-content>
        </template>
      </b-table>
    </div>
  </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
+import { Component, Vue } from "vue-property-decorator";
 import { LIST_GROUPS } from "@/graphql/group";
 import RouteName from "../../router/name";
+import EmptyContent from "../../components/Utils/EmptyContent.vue";
+import VueRouter from "vue-router";
+const { isNavigationFailure, NavigationFailureType } = VueRouter;

 const PROFILES_PER_PAGE = 10;

@@ -102,7 +109,6 @@ const PROFILES_PER_PAGE = 10;
  apollo: {
    groups: {
      query: LIST_GROUPS,
-      fetchPolicy: "cache-and-network",
      variables() {
        return {
          preferredUsername: this.preferredUsername,
@@ -110,54 +116,65 @@ const PROFILES_PER_PAGE = 10;
          domain: this.domain,
          local: this.local,
          suspended: this.suspended,
-          page: 1,
+          page: this.page,
          limit: PROFILES_PER_PAGE,
        };
      },
    },
  },
+  components: {
+    EmptyContent,
+  },
 })
 export default class GroupProfiles extends Vue {
-  page = 1;
-
-  preferredUsername = "";
-
  name = "";

-  domain = "";
-
-  local = true;
-
-  suspended = false;
-
  PROFILES_PER_PAGE = PROFILES_PER_PAGE;

  RouteName = RouteName;

-  async onPageChange(page: number): Promise<void> {
-    this.page = page;
-    await this.$apollo.queries.groups.fetchMore({
-      variables: {
-        preferredUsername: this.preferredUsername,
-        name: this.name,
-        domain: this.domain,
-        local: this.local,
-        suspended: this.suspended,
-        page: this.page,
-        limit: PROFILES_PER_PAGE,
-      },
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        if (!fetchMoreResult) return previousResult;
-        const newProfiles = fetchMoreResult.groups.elements;
-        return {
-          groups: {
-            __typename: previousResult.groups.__typename,
-            total: previousResult.groups.total,
-            elements: [...previousResult.groups.elements, ...newProfiles],
-          },
-        };
-      },
-    });
+  async onPageChange(): Promise<void> {
+    await this.doFetchMore();
+  }
+
+  get page(): number {
+    return parseInt((this.$route.query.page as string) || "1", 10);
+  }
+
+  set page(page: number) {
+    this.pushRouter({ page: page.toString() });
+  }
+
+  get domain(): string {
+    return (this.$route.query.domain as string) || "";
+  }
+
+  set domain(domain: string) {
+    this.pushRouter({ domain });
+  }
+
+  get preferredUsername(): string {
+    return (this.$route.query.preferredUsername as string) || "";
+  }
+
+  set preferredUsername(preferredUsername: string) {
+    this.pushRouter({ preferredUsername });
+  }
+
+  get local(): boolean {
+    return this.$route.query.local === "1";
+  }
+
+  set local(local: boolean) {
+    this.pushRouter({ local: local ? "1" : "0" });
+  }
+
+  get suspended(): boolean {
+    return this.$route.query.suspended === "1";
+  }
+
+  set suspended(suspended: boolean) {
+    this.pushRouter({ suspended: suspended ? "1" : "0" });
  }

  onFiltersChange({
@@ -169,11 +186,34 @@ export default class GroupProfiles extends Vue {
  }): void {
    this.preferredUsername = preferredUsername;
    this.domain = domain;
+    this.doFetchMore();
  }

-  @Watch("domain")
-  domainNotLocal(): void {
-    this.local = this.domain === "";
+  private async pushRouter(args: Record<string, string>): Promise<void> {
+    try {
+      await this.$router.push({
+        name: RouteName.ADMIN_GROUPS,
+        query: { ...this.$route.query, ...args },
+      });
+    } catch (e) {
+      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
+        throw Error(e.toString());
+      }
+    }
+  }
+
+  private async doFetchMore(): Promise<void> {
+    await this.$apollo.queries.groups.fetchMore({
+      variables: {
+        preferredUsername: this.preferredUsername,
+        name: this.name,
+        domain: this.domain,
+        local: this.local,
+        suspended: this.suspended,
+        page: this.page,
+        limit: PROFILES_PER_PAGE,
+      },
+    });
  }
 }
 </script>
--- a/js/src/views/Admin/Profiles.vue
+++ b/js/src/views/Admin/Profiles.vue
@@ -23,6 +23,12 @@
        paginated
        backend-pagination
        backend-filtering
+        :debounce-search="200"
+        :current-page.sync="page"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
        :total="persons.total"
        :per-page="PROFILES_PER_PAGE"
        @page-change="onPageChange"
@@ -81,20 +87,21 @@
          </template>
        </b-table-column>
        <template slot="empty">
-          <section class="section">
-            <div class="content has-text-grey has-text-centered">
-              <p>{{ $t("No profile matches the filters") }}</p>
-            </div>
-          </section>
+          <empty-content icon="account" :inline="true">
+            {{ $t("No profile matches the filters") }}
+          </empty-content>
        </template>
      </b-table>
    </div>
  </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
+import { Component, Vue } from "vue-property-decorator";
 import { LIST_PROFILES } from "../../graphql/actor";
 import RouteName from "../../router/name";
+import EmptyContent from "../../components/Utils/EmptyContent.vue";
+import VueRouter from "vue-router";
+const { isNavigationFailure, NavigationFailureType } = VueRouter;

 const PROFILES_PER_PAGE = 10;

@@ -110,53 +117,88 @@ const PROFILES_PER_PAGE = 10;
          domain: this.domain,
          local: this.local,
          suspended: this.suspended,
-          page: 1,
+          page: this.page,
          limit: PROFILES_PER_PAGE,
        };
      },
    },
  },
+  components: {
+    EmptyContent,
+  },
 })
 export default class Profiles extends Vue {
-  page = 1;
-
-  preferredUsername = "";
-
-  name = "";
-
-  domain = "";
-
-  local = true;
-
-  suspended = false;
-
  PROFILES_PER_PAGE = PROFILES_PER_PAGE;

  RouteName = RouteName;

-  async onPageChange(page: number): Promise<void> {
-    this.page = page;
+  async onPageChange(): Promise<void> {
+    await this.doFetchMore();
+  }
+
+  get page(): number {
+    return parseInt((this.$route.query.page as string) || "1", 10);
+  }
+
+  set page(page: number) {
+    this.pushRouter({ page: page.toString() });
+  }
+
+  get domain(): string {
+    return (this.$route.query.domain as string) || "";
+  }
+
+  set domain(domain: string) {
+    this.pushRouter({ domain });
+  }
+
+  get preferredUsername(): string {
+    return (this.$route.query.preferredUsername as string) || "";
+  }
+
+  set preferredUsername(preferredUsername: string) {
+    this.pushRouter({ preferredUsername });
+  }
+
+  get local(): boolean {
+    return this.$route.query.local === "1";
+  }
+
+  set local(local: boolean) {
+    this.pushRouter({ local: local ? "1" : "0" });
+  }
+
+  get suspended(): boolean {
+    return this.$route.query.suspended === "1";
+  }
+
+  set suspended(suspended: boolean) {
+    this.pushRouter({ suspended: suspended ? "1" : "0" });
+  }
+
+  private async pushRouter(args: Record<string, string>): Promise<void> {
+    try {
+      await this.$router.push({
+        name: RouteName.PROFILES,
+        query: { ...this.$route.query, ...args },
+      });
+    } catch (e) {
+      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
+        throw Error(e.toString());
+      }
+    }
+  }
+
+  private async doFetchMore(): Promise<void> {
    await this.$apollo.queries.persons.fetchMore({
      variables: {
        preferredUsername: this.preferredUsername,
-        name: this.name,
        domain: this.domain,
        local: this.local,
        suspended: this.suspended,
        page: this.page,
        limit: PROFILES_PER_PAGE,
      },
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        if (!fetchMoreResult) return previousResult;
-        const newProfiles = fetchMoreResult.persons.elements;
-        return {
-          persons: {
-            __typename: previousResult.persons.__typename,
-            total: previousResult.persons.total,
-            elements: [...previousResult.persons.elements, ...newProfiles],
-          },
-        };
-      },
    });
  }

@@ -169,11 +211,7 @@ export default class Profiles extends Vue {
  }): void {
    this.preferredUsername = preferredUsername;
    this.domain = domain;
-  }
-
-  @Watch("domain")
-  domainNotLocal(): void {
-    this.local = this.domain === "";
+    this.doFetchMore();
  }
 }
 </script>
--- a/js/src/views/Admin/Users.vue
+++ b/js/src/views/Admin/Users.vue
@@ -22,6 +22,11 @@
        backend-pagination
        backend-filtering
        detailed
+        :current-page.sync="page"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
        :show-detail-icon="true"
        :total="users.total"
        :per-page="USERS_PER_PAGE"
@@ -108,6 +113,8 @@
 import { Component, Vue } from "vue-property-decorator";
 import { LIST_USERS } from "../../graphql/user";
 import RouteName from "../../router/name";
+import VueRouter from "vue-router";
+const { isNavigationFailure, NavigationFailureType } = VueRouter;

 const USERS_PER_PAGE = 10;

@@ -119,7 +126,7 @@ const USERS_PER_PAGE = 10;
      variables() {
        return {
          email: this.email,
-          page: 1,
+          page: this.page,
          limit: USERS_PER_PAGE,
        };
      },
@@ -127,14 +134,26 @@ const USERS_PER_PAGE = 10;
  },
 })
 export default class Users extends Vue {
-  page = 1;
-
-  email = "";
-
  USERS_PER_PAGE = USERS_PER_PAGE;

  RouteName = RouteName;

+  get page(): number {
+    return parseInt((this.$route.query.page as string) || "1", 10);
+  }
+
+  set page(page: number) {
+    this.pushRouter({ page: page.toString() });
+  }
+
+  get email(): string {
+    return (this.$route.query.email as string) || "";
+  }
+
+  set email(email: string) {
+    this.pushRouter({ email });
+  }
+
  async onPageChange(page: number): Promise<void> {
    this.page = page;
    await this.$apollo.queries.users.fetchMore({
@@ -143,23 +162,25 @@ export default class Users extends Vue {
        page: this.page,
        limit: USERS_PER_PAGE,
      },
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        if (!fetchMoreResult) return previousResult;
-        const newFollowings = fetchMoreResult.users.elements;
-        return {
-          users: {
-            __typename: previousResult.users.__typename,
-            total: previousResult.users.total,
-            elements: [...previousResult.users.elements, ...newFollowings],
-          },
-        };
-      },
    });
  }

  onFiltersChange({ email }: { email: string }): void {
    this.email = email;
  }
+
+  private async pushRouter(args: Record<string, string>): Promise<void> {
+    try {
+      await this.$router.push({
+        name: RouteName.USERS,
+        query: { ...this.$route.query, ...args },
+      });
+    } catch (e) {
+      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
+        throw Error(e.toString());
+      }
+    }
+  }
 }
 </script>

--- a/js/src/views/Discussions/Discussion.vue
+++ b/js/src/views/Discussions/Discussion.vue
@@ -143,6 +143,7 @@ import { DELETE_COMMENT, UPDATE_COMMENT } from "@/graphql/comment";
 import GroupMixin from "@/mixins/group";
 import RouteName from "../../router/name";
 import { IComment } from "../../types/comment.model";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";

@Component({
  apollo: {
@@ -168,24 +169,36 @@ import { IComment } from "../../types/comment.model";
        variables() {
          return {
            slug: this.slug,
+            page: this.page,
+            limit: this.COMMENTS_PER_PAGE,
          };
        },
-        updateQuery: (previousResult, { subscriptionData }) => {
+        updateQuery: function (
+          previousResult: any,
+          { subscriptionData }: { subscriptionData: any }
+        ) {
          const previousDiscussion = previousResult.discussion;
-          console.log("updating subscription with ", subscriptionData);
-          if (
-            !previousDiscussion.comments.elements.find(
-              (comment: IComment) =>
-                comment.id ===
-                subscriptionData.data.discussionCommentChanged.lastComment.id
-            )
-          ) {
-            previousDiscussion.lastComment =
-              subscriptionData.data.discussionCommentChanged.lastComment;
-            previousDiscussion.comments.elements.push(
-              subscriptionData.data.discussionCommentChanged.lastComment
-            );
-            previousDiscussion.comments.total += 1;
+          const lastComment =
+            subscriptionData.data.discussionCommentChanged.lastComment;
+          const canLoadMore = !previousDiscussion.comments.elements.find(
+            (comment: IComment) => comment.id === lastComment.id
+          );
+          if (canLoadMore) {
+            return {
+              discussion: {
+                ...previousDiscussion,
+                lastComment: lastComment,
+                comments: {
+                  elements: [
+                    ...previousDiscussion.comments.elements.filter(
+                      ({ id }: { id: string }) => id !== lastComment.id
+                    ),
+                    lastComment,
+                  ],
+                  total: previousDiscussion.comments.total + 1,
+                },
+              },
+            };
          }

          return previousDiscussion;
@@ -239,29 +252,6 @@ export default class discussion extends mixins(GroupMixin) {
        discussionId: this.discussion.id,
        text: this.newComment,
      },
-      update: (store, { data: { replyToDiscussion } }) => {
-        const discussionData = store.readQuery<{
-          discussion: IDiscussion;
-        }>({
-          query: GET_DISCUSSION,
-          variables: {
-            slug: this.slug,
-            page: this.page,
-          },
-        });
-        if (!discussionData) return;
-        const { discussion: discussionCached } = discussionData;
-        discussionCached.lastComment = replyToDiscussion.lastComment;
-        discussionCached.comments.elements.push(replyToDiscussion.lastComment);
-        discussionCached.comments.total += 1;
-        store.writeQuery({
-          query: GET_DISCUSSION,
-          variables: { slug: this.slug, page: this.page },
-          data: { discussion: discussionCached },
-        });
-      },
-      // We don't need to handle cache update since
-      // there's the subscription that handles this for us
    });
    this.newComment = "";
  }
@@ -273,7 +263,7 @@ export default class discussion extends mixins(GroupMixin) {
        commentId: comment.id,
        text: comment.text,
      },
-      update: (store, { data }) => {
+      update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
        if (!data || !data.deleteComment) return;
        const discussionData = store.readQuery<{
          discussion: IDiscussion;
@@ -308,7 +298,7 @@ export default class discussion extends mixins(GroupMixin) {
      variables: {
        commentId: comment.id,
      },
-      update: (store, { data }) => {
+      update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
        if (!data || !data.deleteComment) return;
        const discussionData = store.readQuery<{
          discussion: IDiscussion;
@@ -324,17 +314,30 @@ export default class discussion extends mixins(GroupMixin) {
        const index = discussionCached.comments.elements.findIndex(
          ({ id }) => id === data.deleteComment.id
        );
+        let discussionUpdated = discussionCached;
        if (index > -1) {
-          const updatedComment = discussionCached.comments.elements[index];
-          updatedComment.deletedAt = new Date();
-          updatedComment.actor = null;
-          updatedComment.text = "";
-          discussionCached.comments.elements.splice(index, 1, updatedComment);
+          const updatedComment = {
+            ...discussionCached.comments.elements[index],
+            deletedAt: new Date(),
+            actor: null,
+            updatedComment: {
+              text: "",
+            },
+          };
+          const elements = [...discussionCached.comments.elements];
+          elements.splice(index, 1, updatedComment);
+          discussionUpdated = {
+            ...discussionCached,
+            comments: {
+              total: discussionCached.comments.total,
+              elements,
+            },
+          };
        }
        store.writeQuery({
          query: GET_DISCUSSION,
          variables: { slug: this.slug, page: this.page },
-          data: { discussion: discussionCached },
+          data: { discussion: discussionUpdated },
        });
      },
    });
@@ -351,19 +354,6 @@ export default class discussion extends mixins(GroupMixin) {
          page: this.page,
          limit: this.COMMENTS_PER_PAGE,
        },
-        // Transform the previous result with new data
-        updateQuery: (previousResult, { fetchMoreResult }) => {
-          if (!fetchMoreResult) return previousResult;
-          const newComments = fetchMoreResult.discussion.comments.elements;
-          this.hasMoreComments = newComments.length === 1;
-          const { discussion: discussionCached } = previousResult;
-          discussionCached.comments.elements = [
-            ...previousResult.discussion.comments.elements,
-            ...newComments,
-          ];
-
-          return { discussion: discussionCached };
-        },
      });
    } catch (e) {
      console.error(e);
@@ -377,7 +367,10 @@ export default class discussion extends mixins(GroupMixin) {
        discussionId: this.discussion.id,
        title: this.newTitle,
      },
-      update: (store, { data: { updateDiscussion } }) => {
+      update: (
+        store: ApolloCache<InMemoryCache>,
+        { data }: FetchResult<{ updateDiscussion: IDiscussion }>
+      ) => {
        const discussionData = store.readQuery<{
          discussion: IDiscussion;
        }>({
@@ -387,14 +380,18 @@ export default class discussion extends mixins(GroupMixin) {
            page: this.page,
          },
        });
-        if (!discussionData) return;
-        const { discussion: discussionCached } = discussionData;
-        discussionCached.title = updateDiscussion.title;
-        store.writeQuery({
-          query: GET_DISCUSSION,
-          variables: { slug: this.slug, page: this.page },
-          data: { discussion: discussionCached },
-        });
+        if (discussionData && data?.updateDiscussion) {
+          store.writeQuery({
+            query: GET_DISCUSSION,
+            variables: { slug: this.slug, page: this.page },
+            data: {
+              discussion: {
+                ...discussionData.discussion,
+                title: data?.updateDiscussion.title,
+              },
+            },
+          });
+        }
      },
    });
    this.editTitleMode = false;
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -442,7 +442,7 @@ section {

 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { RefetchQueryDescription } from "apollo-client/core/watchQueryOptions";
+import { RefetchQueryDescription } from "@apollo/client/core/watchQueryOptions";
 import PictureUpload from "@/components/PictureUpload.vue";
 import EditorComponent from "@/components/Editor.vue";
 import TagInput from "@/components/Event/TagInput.vue";
@@ -485,6 +485,7 @@ import RouteName from "../../router/name";
 import "intersection-observer";
 import { CONFIG } from "../../graphql/config";
 import { IConfig } from "../../types/config.model";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";

 const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;

@@ -706,10 +707,12 @@ export default class EditEvent extends Vue {
      const { data } = await this.$apollo.mutate({
        mutation: CREATE_EVENT,
        variables,
-        update: (store, { data: { createEvent } }) =>
-          this.postCreateOrUpdate(store, createEvent),
-        refetchQueries: ({ data: { createEvent } }) =>
-          this.postRefetchQueries(createEvent),
+        update: (
+          store: ApolloCache<InMemoryCache>,
+          { data: updatedData }: FetchResult
+        ) => this.postCreateOrUpdate(store, updatedData?.createEvent),
+        refetchQueries: ({ data: updatedData }: FetchResult) =>
+          this.postRefetchQueries(updatedData?.createEvent),
      });

      this.$buefy.notification.open({
@@ -739,10 +742,12 @@ export default class EditEvent extends Vue {
      await this.$apollo.mutate({
        mutation: EDIT_EVENT,
        variables,
-        update: (store, { data: { updateEvent } }) =>
-          this.postCreateOrUpdate(store, updateEvent),
-        refetchQueries: ({ data: { updateEvent } }) =>
-          this.postRefetchQueries(updateEvent),
+        update: (
+          store: ApolloCache<InMemoryCache>,
+          { data: updatedData }: FetchResult
+        ) => this.postCreateOrUpdate(store, updatedData?.updateEvent),
+        refetchQueries: ({ data }: FetchResult) =>
+          this.postRefetchQueries(data?.updateEvent),
      });

      this.$buefy.notification.open({
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -665,6 +665,7 @@ import EventMetadataBlock from "../../components/Event/EventMetadataBlock.vue";
 import ActorCard from "../../components/Account/ActorCard.vue";
 import PopoverActorCard from "../../components/Account/PopoverActorCard.vue";
 import { IParticipant } from "../../types/participant.model";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";

 // noinspection TypeScriptValidateTypes
@Component({
@@ -1002,7 +1003,7 @@ export default class Event extends EventMixin {
          actorId: identity.id,
          message,
        },
-        update: (store, { data }) => {
+        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
          if (data == null) return;

          const participationCachedData = store.readQuery<{ person: IPerson }>({
--- a/js/src/views/Event/MyEvents.vue
+++ b/js/src/views/Event/MyEvents.vue
@@ -265,28 +265,6 @@ export default class MyEvents extends Vue {
        page: this.futurePage,
        limit: this.limit,
      },
-      // Transform the previous result with new data
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        const oldParticipations = previousResult.loggedUser.participations;
-        const newParticipations = fetchMoreResult.loggedUser.participations;
-        this.hasMoreFutureParticipations =
-          newParticipations.total ===
-          oldParticipations.length + newParticipations.length;
-
-        return {
-          loggedUser: {
-            __typename: previousResult.loggedUser.__typename,
-            participations: {
-              __typename: newParticipations.__typename,
-              total: newParticipations.total,
-              elements: [
-                ...oldParticipations.elements,
-                ...newParticipations.elements,
-              ],
-            },
-          },
-        };
-      },
    });
  }

@@ -298,28 +276,6 @@ export default class MyEvents extends Vue {
        page: this.pastPage,
        limit: this.limit,
      },
-      // Transform the previous result with new data
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        const oldParticipations = previousResult.loggedUser.participations;
-        const newParticipations = fetchMoreResult.loggedUser.participations;
-        this.hasMorePastParticipations =
-          newParticipations.total ===
-          oldParticipations.length + newParticipations.length;
-
-        return {
-          loggedUser: {
-            __typename: previousResult.loggedUser.__typename,
-            participations: {
-              __typename: newParticipations.__typename,
-              total: newParticipations.total,
-              elements: [
-                ...oldParticipations.elements,
-                ...newParticipations.elements,
-              ],
-            },
-          },
-        };
-      },
    });
  }

--- a/js/src/views/Event/Participants.vue
+++ b/js/src/views/Event/Participants.vue
@@ -308,25 +308,6 @@ export default class Participants extends Vue {
        page: this.page,
        limit: this.limit,
      },
-      // Transform the previous result with new data
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        const oldParticipants = previousResult.event.participants;
-        const newParticipants = fetchMoreResult.event.participants;
-
-        return {
-          event: {
-            ...previousResult.event,
-            participants: {
-              elements: [
-                ...oldParticipants.elements,
-                ...newParticipants.elements,
-              ],
-              total: newParticipants.total,
-              __typename: oldParticipants.__typename,
-            },
-          },
-        };
-      },
    });
  }

--- a/js/src/views/Group/Create.vue
+++ b/js/src/views/Group/Create.vue
@@ -92,10 +92,11 @@ import { MemberRole } from "@/types/enums";
 import RouteName from "../../router/name";
 import { convertToUsername } from "../../utils/username";
 import PictureUpload from "../../components/PictureUpload.vue";
-import { ErrorResponse } from "apollo-link-error";
-import { ServerParseError } from "apollo-link-http-common";
 import { CONFIG } from "@/graphql/config";
 import { IConfig } from "@/types/config.model";
+import { ErrorResponse } from "@apollo/client/link/error";
+import { ServerParseError } from "@apollo/client/link/http";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";

@Component({
  components: {
@@ -129,7 +130,7 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) {
      await this.$apollo.mutate({
        mutation: CREATE_GROUP,
        variables: this.buildVariables(),
-        update: (store, { data: { createGroup } }) => {
+        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
          const query = {
            query: PERSON_MEMBERSHIPS,
            variables: {
@@ -140,7 +141,7 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) {
          if (!membershipData) return;
          const { person } = membershipData;
          person.memberships.elements.push({
-            parent: createGroup,
+            parent: data?.createGroup,
            role: MemberRole.ADMINISTRATOR,
            actor: this.currentActor,
            insertedAt: new Date().toString(),
--- a/js/src/views/Group/GroupFollowers.vue
+++ b/js/src/views/Group/GroupFollowers.vue
@@ -209,17 +209,6 @@ export default class GroupFollowers extends mixins(GroupMixin) {
          approved: !pending,
        };
      },
-      // Transform the previous result with new data
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        if (!fetchMoreResult) return previousResult;
-        const oldFollowers = previousResult.group.followers;
-        const newFollowers = fetchMoreResult.group.followers;
-        return {
-          elements: [...oldFollowers.elements, ...newFollowers.elements],
-          total: newFollowers.total,
-          __typename: oldFollowers.__typename,
-        };
-      },
    });
  }

--- a/js/src/views/Group/GroupMembers.vue
+++ b/js/src/views/Group/GroupMembers.vue
@@ -360,17 +360,6 @@ export default class GroupMembers extends mixins(GroupMixin) {
          roles,
        };
      },
-      // Transform the previous result with new data
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        if (!fetchMoreResult) return previousResult;
-        const oldMembers = previousResult.group.members;
-        const newMembers = fetchMoreResult.group.members;
-        return {
-          elements: [...oldMembers.elements, ...newMembers.elements],
-          total: newMembers.total,
-          __typename: oldMembers.__typename,
-        };
-      },
    });
  }

--- a/js/src/views/Group/GroupSettings.vue
+++ b/js/src/views/Group/GroupSettings.vue
@@ -184,8 +184,8 @@ import { IGroup, usernameWithDomain } from "../../types/actor";
 import { Address, IAddress } from "../../types/address.model";
 import { CONFIG } from "@/graphql/config";
 import { IConfig } from "@/types/config.model";
-import { ErrorResponse } from "apollo-link-error";
-import { ServerParseError } from "apollo-link-http-common";
+import { ServerParseError } from "@apollo/client/link/http";
+import { ErrorResponse } from "@apollo/client/link/error";

@Component({
  components: {
--- a/js/src/views/Group/Timeline.vue
+++ b/js/src/views/Group/Timeline.vue
@@ -325,24 +325,6 @@ export default class Timeline extends Vue {
          page: this.page,
          limit: PAGINATION_LIMIT,
        },
-        updateQuery: (previousResult, { fetchMoreResult }) => {
-          if (!fetchMoreResult) return previousResult;
-          const newActivities = fetchMoreResult.group.activity.elements;
-          const newTotal = fetchMoreResult.group.activity.total;
-          return {
-            group: {
-              ...previousResult.group,
-              activity: {
-                __typename: previousResult.group.activity.__typename,
-                total: newTotal,
-                elements: [
-                  ...previousResult.group.activity.elements,
-                  ...newActivities,
-                ],
-              },
-            },
-          };
-        },
      });
    } catch (e) {
      console.error(e);
--- a/js/src/views/Interact.vue
+++ b/js/src/views/Interact.vue
@@ -33,6 +33,7 @@ import { INTERACT } from "@/graphql/search";
 import { IEvent } from "@/types/event.model";
 import { IGroup, usernameWithDomain } from "@/types/actor";
 import RouteName from "../router/name";
+import { GraphQLError } from "graphql";

@Component({
  apollo: {
@@ -56,7 +57,7 @@ import RouteName from "../router/name";
        if (networkError) {
          this.errors = [networkError.message];
        }
-        this.errors = graphQLErrors.map((error) => error.message);
+        this.errors = graphQLErrors.map((error: GraphQLError) => error.message);
      },
      async result({ data: { interact } }) {
        switch (interact.__typename) {
--- a/js/src/views/Moderation/Report.vue
+++ b/js/src/views/Moderation/Report.vue
@@ -301,6 +301,8 @@ import { DELETE_COMMENT } from "@/graphql/comment";
 import { IComment } from "@/types/comment.model";
 import { ActorType, ReportStatusEnum } from "@/types/enums";
 import RouteName from "../../router/name";
+import { GraphQLError } from "graphql";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";

@Component({
  apollo: {
@@ -313,7 +315,9 @@ import RouteName from "../../router/name";
        };
      },
      error({ graphQLErrors }) {
-        this.errors = uniq(graphQLErrors.map(({ message }) => message));
+        this.errors = uniq(
+          graphQLErrors.map(({ message }: GraphQLError) => message)
+        );
      },
    },
    currentActor: {
@@ -356,7 +360,7 @@ export default class Report extends Vue {
          reportId: this.report.id,
          content: this.noteContent,
        },
-        update: (store, { data }) => {
+        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
          if (data == null) return;
          const cachedData = store.readQuery<{ report: IReport }>({
            query: REPORT,
@@ -462,7 +466,7 @@ export default class Report extends Vue {
          reportId: this.report.id,
          status,
        },
-        update: (store, { data }) => {
+        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
          if (data == null) return;
          const reportCachedData = store.readQuery<{ report: IReport }>({
            query: REPORT,
--- a/js/src/views/Moderation/ReportList.vue
+++ b/js/src/views/Moderation/ReportList.vue
@@ -17,23 +17,23 @@
    <section>
      <b-field>
        <b-radio-button
-          v-model="filterReports"
+          v-model="status"
          :native-value="ReportStatusEnum.OPEN"
          >{{ $t("Open") }}</b-radio-button
        >
        <b-radio-button
-          v-model="filterReports"
+          v-model="status"
          :native-value="ReportStatusEnum.RESOLVED"
          >{{ $t("Resolved") }}</b-radio-button
        >
        <b-radio-button
-          v-model="filterReports"
+          v-model="status"
          :native-value="ReportStatusEnum.CLOSED"
          >{{ $t("Closed") }}</b-radio-button
        >
      </b-field>
-      <ul v-if="reports.length > 0">
-        <li v-for="report in reports" :key="report.id">
+      <ul v-if="reports.elements.length > 0">
+        <li v-for="report in reports.elements" :key="report.id">
          <router-link
            :to="{ name: RouteName.REPORT, params: { reportId: report.id } }"
          >
@@ -41,48 +41,70 @@
          </router-link>
        </li>
      </ul>
-      <div v-else>
-        <b-message
-          v-if="filterReports === ReportStatusEnum.OPEN"
-          type="is-info"
+      <div v-else class="no-reports">
+        <empty-content
+          icon="chat-alert"
+          inline
+          v-if="status === ReportStatusEnum.OPEN"
        >
          {{ $t("No open reports yet") }}
-        </b-message>
-        <b-message
-          v-if="filterReports === ReportStatusEnum.RESOLVED"
-          type="is-info"
+        </empty-content>
+        <empty-content
+          icon="chat-alert"
+          inline
+          v-if="status === ReportStatusEnum.RESOLVED"
        >
          {{ $t("No resolved reports yet") }}
-        </b-message>
-        <b-message
-          v-if="filterReports === ReportStatusEnum.CLOSED"
-          type="is-info"
+        </empty-content>
+        <empty-content
+          icon="chat-alert"
+          inline
+          v-if="status === ReportStatusEnum.CLOSED"
        >
          {{ $t("No closed reports yet") }}
-        </b-message>
+        </empty-content>
      </div>
+      <b-pagination
+        :total="reports.total"
+        v-model="page"
+        :simple="true"
+        :per-page="REPORT_PAGE_LIMIT"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
+      >
+      </b-pagination>
    </section>
  </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
+import { Component, Vue } from "vue-property-decorator";
 import { IReport } from "@/types/report.model";
 import { REPORTS } from "@/graphql/report";
 import ReportCard from "@/components/Report/ReportCard.vue";
+import EmptyContent from "@/components/Utils/EmptyContent.vue";
 import { ReportStatusEnum } from "@/types/enums";
 import RouteName from "../../router/name";
+import VueRouter from "vue-router";
+import { Paginate } from "@/types/paginate";
+const { isNavigationFailure, NavigationFailureType } = VueRouter;
+
+const REPORT_PAGE_LIMIT = 1;

@Component({
  components: {
    ReportCard,
+    EmptyContent,
  },
  apollo: {
    reports: {
      query: REPORTS,
-      fetchPolicy: "cache-and-network",
      variables() {
        return {
-          status: this.filterReports,
+          page: this.page,
+          status: this.status,
+          limit: REPORT_PAGE_LIMIT,
        };
      },
      pollInterval: 120000, // 2 minutes
@@ -90,7 +112,7 @@ import RouteName from "../../router/name";
  },
 })
 export default class ReportList extends Vue {
-  reports?: IReport[] = [];
+  reports?: Paginate<IReport> = { elements: [], total: 0 };

  RouteName = RouteName;

@@ -98,27 +120,63 @@ export default class ReportList extends Vue {

  filterReports: ReportStatusEnum = ReportStatusEnum.OPEN;

-  @Watch("$route.params.filter", { immediate: true })
-  onRouteFilterChanged(val: string): void {
-    if (!val) return;
-    const filter = val.toUpperCase();
-    if (filter in ReportStatusEnum) {
-      this.filterReports = filter as ReportStatusEnum;
-    }
+  REPORT_PAGE_LIMIT = REPORT_PAGE_LIMIT;
+
+  get page(): number {
+    return parseInt((this.$route.query.page as string) || "1", 10);
  }

-  @Watch("filterReports", { immediate: true })
-  async onFilterChanged(val: string): Promise<void> {
-    await this.$router.push({
-      name: RouteName.REPORTS,
-      params: { filter: val.toLowerCase() },
+  set page(page: number) {
+    this.pushRouter(RouteName.REPORTS, {
+      page: page.toString(),
    });
  }
+
+  get status(): ReportStatusEnum {
+    const filter = this.$route.params.filter?.toUpperCase();
+    if (filter in ReportStatusEnum) {
+      return filter as ReportStatusEnum;
+    }
+    return ReportStatusEnum.OPEN;
+  }
+
+  set status(status: ReportStatusEnum) {
+    this.$router.push({
+      name: RouteName.REPORTS,
+      params: { filter: status.toLowerCase() },
+    });
+  }
+
+  protected async pushRouter(
+    routeName: string,
+    args: Record<string, string>
+  ): Promise<void> {
+    try {
+      await this.$router.push({
+        name: routeName,
+        params: this.$route.params,
+        query: { ...this.$route.query, ...args },
+      });
+    } catch (e) {
+      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
+        throw Error(e.toString());
+      }
+    }
+  }
 }
 </script>

 <style lang="scss" scoped>
-section > ul li > a {
-  text-decoration: none;
+section {
+  .no-reports {
+    margin-bottom: 2rem;
+  }
+  & > ul li {
+    margin: 0.5rem auto;
+
+    & > a {
+      text-decoration: none;
+    }
+  }
 }
 </style>
--- a/js/src/views/Resources/ResourceFolder.vue
+++ b/js/src/views/Resources/ResourceFolder.vue
@@ -229,7 +229,7 @@ import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
 import ResourceItem from "@/components/Resource/ResourceItem.vue";
 import FolderItem from "@/components/Resource/FolderItem.vue";
 import Draggable from "vuedraggable";
-import { RefetchQueryDescription } from "apollo-client/core/watchQueryOptions";
+import { RefetchQueryDescription } from "@apollo/client/core/watchQueryOptions";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 import { IActor, usernameWithDomain } from "../../types/actor";
 import RouteName from "../../router/name";
@@ -249,6 +249,7 @@ import { CONFIG } from "../../graphql/config";
 import { IConfig } from "../../types/config.model";
 import ResourceMixin from "../../mixins/resource";
 import ResourceSelector from "../../components/Resource/ResourceSelector.vue";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";

@Component({
  components: { FolderItem, ResourceItem, Draggable, ResourceSelector },
@@ -538,7 +539,7 @@ export default class Resources extends Mixins(ResourceMixin) {
          path: resource.path,
        },
        refetchQueries: () => this.postRefreshQueries(),
-        update: (store, { data }) => {
+        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
          if (!data || data.updateResource == null || parentPath == null)
            return;
          if (!this.resource.actor) return;
--- a/js/src/views/Todos/TodoList.vue
+++ b/js/src/views/Todos/TodoList.vue
@@ -51,6 +51,7 @@ import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
 import { IActor } from "@/types/actor";
 import { ITodoList } from "@/types/todolist";
 import RouteName from "../../router/name";
+import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";

@Component({
  components: {
@@ -88,7 +89,7 @@ export default class TodoList extends Vue {
        status: this.newTodo.status,
        todoListId: this.id,
      },
-      update: (store, { data }) => {
+      update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
        if (data == null) return;
        const cachedData = store.readQuery<{ todoList: ITodoList }>({
          query: FETCH_TODO_LIST,