diff --git a/js/package.json b/js/package.json
index 13ad2a811..06c8c2d30 100644
--- a/js/package.json
+++ b/js/package.json
@@ -29,6 +29,7 @@
     "@tiptap/extension-underline": "^2.0.0-beta.7",
     "@tiptap/starter-kit": "^2.0.0-beta.37",
     "@tiptap/vue-2": "^2.0.0-beta.21",
+    "@vue/apollo-option": "^4.0.0-alpha.11",
     "apollo-absinthe-upload-link": "^1.5.0",
     "blurhash": "^1.1.3",
     "buefy": "^0.9.0",
@@ -50,7 +51,6 @@
     "unfetch": "^4.2.0",
     "v-tooltip": "^2.1.3",
     "vue": "^2.6.11",
-    "vue-apollo": "^3.0.3",
     "vue-class-component": "^7.2.3",
     "vue-i18n": "^8.14.0",
     "vue-meta": "^2.3.1",
diff --git a/js/src/components/Admin/Followings.vue b/js/src/components/Admin/Followings.vue
index e257c8fa2..46944e0cc 100644
--- a/js/src/components/Admin/Followings.vue
+++ b/js/src/components/Admin/Followings.vue
@@ -147,12 +147,7 @@ import RelayMixin from "../../mixins/relay";
 import { RELAY_FOLLOWINGS } from "@/graphql/admin";
 import { Paginate } from "@/types/paginate";
 import RouteName from "@/router/name";
-import {
-  ApolloCache,
-  FetchResult,
-  InMemoryCache,
-  Reference,
-} from "@apollo/client/core";
+import { ApolloCache, FetchResult, Reference } from "@apollo/client/core";
 import gql from "graphql-tag";
 
 const FOLLOWINGS_PER_PAGE = 10;
@@ -221,7 +216,10 @@ export default class Followings extends Mixins(RelayMixin) {
         variables: {
           address: this.newRelayAddress.trim(), // trim to fix copy and paste domain name spaces and tabs
         },
-        update(cache: ApolloCache<InMemoryCache>, { data }: FetchResult) {
+        update(
+          cache: ApolloCache<{ relayFollowings: Paginate<IFollower> }>,
+          { data }: FetchResult
+        ) {
           cache.modify({
             fields: {
               relayFollowings(
@@ -274,12 +272,12 @@ export default class Followings extends Mixins(RelayMixin) {
   async removeRelay(follower: IFollower): Promise<void> {
     const address = `${follower.targetActor.preferredUsername}@${follower.targetActor.domain}`;
     try {
-      await this.$apollo.mutate({
+      await this.$apollo.mutate<{ removeRelay: IFollower }>({
         mutation: REMOVE_RELAY,
         variables: {
           address,
         },
-        update(cache: ApolloCache<InMemoryCache>) {
+        update(cache: ApolloCache<{ removeRelay: IFollower }>) {
           cache.modify({
             fields: {
               relayFollowings(existingFollowingRefs, { readField }) {
diff --git a/js/src/components/Participation/ParticipationWithoutAccount.vue b/js/src/components/Participation/ParticipationWithoutAccount.vue
index e7ec23932..0a6410be9 100644
--- a/js/src/components/Participation/ParticipationWithoutAccount.vue
+++ b/js/src/components/Participation/ParticipationWithoutAccount.vue
@@ -134,7 +134,7 @@ import { addLocalUnconfirmedAnonymousParticipation } from "@/services/AnonymousP
 import { EventJoinOptions, ParticipantRole } from "@/types/enums";
 import RouteName from "@/router/name";
 import { IParticipant } from "../../types/participant.model";
-import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
+import { ApolloCache, FetchResult } from "@apollo/client/core";
 
 @Component({
   apollo: {
@@ -197,7 +197,7 @@ export default class ParticipationWithoutAccount extends Vue {
           locale: this.$i18n.locale,
         },
         update: (
-          store: ApolloCache<InMemoryCache>,
+          store: ApolloCache<{ joinEvent: IParticipant }>,
           { data: updateData }: FetchResult
         ) => {
           if (updateData == null) {
diff --git a/js/src/mixins/event.ts b/js/src/mixins/event.ts
index b0a742855..213db15e3 100644
--- a/js/src/mixins/event.ts
+++ b/js/src/mixins/event.ts
@@ -31,7 +31,12 @@ export default class EventMixin extends mixins(Vue) {
           actorId,
           token,
         },
-        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
+        update: (
+          store: ApolloCache<{
+            leaveEvent: IParticipant;
+          }>,
+          { data }: FetchResult
+        ) => {
           if (data == null) return;
           let participation;
 
diff --git a/js/src/views/Account/Register.vue b/js/src/views/Account/Register.vue
index c6477c653..8dc97b895 100644
--- a/js/src/views/Account/Register.vue
+++ b/js/src/views/Account/Register.vue
@@ -128,7 +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";
+import { ApolloCache, FetchResult } from "@apollo/client/core";
 
 @Component({
   apollo: {
@@ -171,7 +171,7 @@ export default class Register extends mixins(identityEditionMixin) {
         mutation: REGISTER_PERSON,
         variables: { email: this.email, ...this.identity },
         update: (
-          store: ApolloCache<InMemoryCache>,
+          store: ApolloCache<{ registerPerson: IPerson }>,
           { data: localData }: FetchResult
         ) => {
           if (this.userAlreadyActivated) {
diff --git a/js/src/views/Admin/AdminGroupProfile.vue b/js/src/views/Admin/AdminGroupProfile.vue
index e4bae72db..9a8e8a18b 100644
--- a/js/src/views/Admin/AdminGroupProfile.vue
+++ b/js/src/views/Admin/AdminGroupProfile.vue
@@ -289,7 +289,7 @@ 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 { ApolloCache, FetchResult } from "@apollo/client/core";
 import VueRouter from "vue-router";
 const { isNavigationFailure, NavigationFailureType } = VueRouter;
 
@@ -427,7 +427,10 @@ export default class AdminGroupProfile extends Vue {
         variables: {
           id: this.id,
         },
-        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
+        update: (
+          store: ApolloCache<{ suspendProfile: { id: string } }>,
+          { data }: FetchResult
+        ) => {
           if (data == null) return;
           const profileId = this.id;
 
diff --git a/js/src/views/Admin/AdminProfile.vue b/js/src/views/Admin/AdminProfile.vue
index 84e909ffb..8f30cfa36 100644
--- a/js/src/views/Admin/AdminProfile.vue
+++ b/js/src/views/Admin/AdminProfile.vue
@@ -272,7 +272,7 @@ 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 { ApolloCache, FetchResult } from "@apollo/client/core";
 import VueRouter from "vue-router";
 import { MemberRole } from "@/types/enums";
 const { isNavigationFailure, NavigationFailureType } = VueRouter;
@@ -389,7 +389,10 @@ export default class AdminProfile extends Vue {
       variables: {
         id: this.id,
       },
-      update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
+      update: (
+        store: ApolloCache<{ suspendProfile: { id: string } }>,
+        { data }: FetchResult
+      ) => {
         if (data == null) return;
         const profileId = this.id;
 
diff --git a/js/src/views/Discussions/Discussion.vue b/js/src/views/Discussions/Discussion.vue
index eeff5c07d..12b506568 100644
--- a/js/src/views/Discussions/Discussion.vue
+++ b/js/src/views/Discussions/Discussion.vue
@@ -261,7 +261,10 @@ export default class discussion extends mixins(GroupMixin) {
         commentId: comment.id,
         text: comment.text,
       },
-      update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
+      update: (
+        store: ApolloCache<{ deleteComment: IComment }>,
+        { data }: FetchResult
+      ) => {
         if (!data || !data.deleteComment) return;
         const discussionData = store.readQuery<{
           discussion: IDiscussion;
@@ -296,7 +299,10 @@ export default class discussion extends mixins(GroupMixin) {
       variables: {
         commentId: comment.id,
       },
-      update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
+      update: (
+        store: ApolloCache<{ deleteComment: IComment }>,
+        { data }: FetchResult
+      ) => {
         if (!data || !data.deleteComment) return;
         const discussionData = store.readQuery<{
           discussion: IDiscussion;
@@ -359,14 +365,14 @@ export default class discussion extends mixins(GroupMixin) {
   }
 
   async updateDiscussion(): Promise<void> {
-    await this.$apollo.mutate({
+    await this.$apollo.mutate<{ updateDiscussion: IDiscussion }>({
       mutation: UPDATE_DISCUSSION,
       variables: {
         discussionId: this.discussion.id,
         title: this.newTitle,
       },
       update: (
-        store: ApolloCache<InMemoryCache>,
+        store: ApolloCache<{ updateDiscussion: IDiscussion }>,
         { data }: FetchResult<{ updateDiscussion: IDiscussion }>
       ) => {
         const discussionData = store.readQuery<{
diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue
index eaf969b63..0c769129a 100644
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -485,7 +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";
+import { ApolloCache, FetchResult } from "@apollo/client/core";
 
 const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
 
@@ -684,11 +684,11 @@ export default class EditEvent extends Vue {
     const variables = await this.buildVariables();
 
     try {
-      const { data } = await this.$apollo.mutate({
+      const { data } = await this.$apollo.mutate<{ createEvent: IEvent }>({
         mutation: CREATE_EVENT,
         variables,
         update: (
-          store: ApolloCache<InMemoryCache>,
+          store: ApolloCache<{ createEvent: IEvent }>,
           { data: updatedData }: FetchResult
         ) => this.postCreateOrUpdate(store, updatedData?.createEvent),
         refetchQueries: ({ data: updatedData }: FetchResult) =>
@@ -719,11 +719,11 @@ export default class EditEvent extends Vue {
     const variables = await this.buildVariables();
 
     try {
-      await this.$apollo.mutate({
+      await this.$apollo.mutate<{ updateEvent: IEvent }>({
         mutation: EDIT_EVENT,
         variables,
         update: (
-          store: ApolloCache<InMemoryCache>,
+          store: ApolloCache<{ updateEvent: IEvent }>,
           { data: updatedData }: FetchResult
         ) => this.postCreateOrUpdate(store, updatedData?.updateEvent),
         refetchQueries: ({ data }: FetchResult) =>
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index a9e390f67..9578bfd4a 100755
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -663,7 +663,7 @@ import EventBanner from "../../components/Event/EventBanner.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";
+import { ApolloCache, FetchResult } from "@apollo/client/core";
 
 // noinspection TypeScriptValidateTypes
 @Component({
@@ -1001,7 +1001,12 @@ export default class Event extends EventMixin {
           actorId: identity.id,
           message,
         },
-        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
+        update: (
+          store: ApolloCache<{
+            joinEvent: IParticipant;
+          }>,
+          { data }: FetchResult
+        ) => {
           if (data == null) return;
 
           const participationCachedData = store.readQuery<{ person: IPerson }>({
diff --git a/js/src/views/Moderation/Report.vue b/js/src/views/Moderation/Report.vue
index 29682b941..59a94bf8b 100644
--- a/js/src/views/Moderation/Report.vue
+++ b/js/src/views/Moderation/Report.vue
@@ -302,7 +302,7 @@ 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";
+import { ApolloCache, FetchResult } from "@apollo/client/core";
 
 @Component({
   apollo: {
@@ -360,7 +360,10 @@ export default class Report extends Vue {
           reportId: this.report.id,
           content: this.noteContent,
         },
-        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
+        update: (
+          store: ApolloCache<{ createReportNote: IReportNote }>,
+          { data }: FetchResult
+        ) => {
           if (data == null) return;
           const cachedData = store.readQuery<{ report: IReport }>({
             query: REPORT,
@@ -460,13 +463,16 @@ export default class Report extends Vue {
 
   async updateReport(status: ReportStatusEnum): Promise<void> {
     try {
-      await this.$apollo.mutate({
+      await this.$apollo.mutate<{ updateReportStatus: IReport }>({
         mutation: UPDATE_REPORT,
         variables: {
           reportId: this.report.id,
           status,
         },
-        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
+        update: (
+          store: ApolloCache<{ updateReportStatus: IReport }>,
+          { data }: FetchResult
+        ) => {
           if (data == null) return;
           const reportCachedData = store.readQuery<{ report: IReport }>({
             query: REPORT,
diff --git a/js/src/views/Resources/ResourceFolder.vue b/js/src/views/Resources/ResourceFolder.vue
index a321666ca..337b757d8 100644
--- a/js/src/views/Resources/ResourceFolder.vue
+++ b/js/src/views/Resources/ResourceFolder.vue
@@ -249,7 +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";
+import { ApolloCache, FetchResult } from "@apollo/client/core";
 
 @Component({
   components: { FolderItem, ResourceItem, Draggable, ResourceSelector },
@@ -560,7 +560,10 @@ export default class Resources extends Mixins(ResourceMixin) {
           path: resource.path,
         },
         refetchQueries: () => this.postRefreshQueries(),
-        update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
+        update: (
+          store: ApolloCache<{ updateResource: IResource }>,
+          { data }: FetchResult
+        ) => {
           if (!data || data.updateResource == null || parentPath == null)
             return;
           if (!this.resource.actor) return;
diff --git a/js/src/vue-apollo.ts b/js/src/vue-apollo.ts
index f3c4d93d1..b1dd2e8de 100644
--- a/js/src/vue-apollo.ts
+++ b/js/src/vue-apollo.ts
@@ -1,5 +1,5 @@
 import Vue from "vue";
-import VueApollo from "vue-apollo";
+import VueApollo from "@vue/apollo-option";
 import { onError } from "@apollo/client/link/error";
 import { createLink } from "apollo-absinthe-upload-link";
 import {
diff --git a/js/tests/unit/specs/components/Comment/CommentTree.spec.ts b/js/tests/unit/specs/components/Comment/CommentTree.spec.ts
index d3c32adfd..6bdad5ef4 100644
--- a/js/tests/unit/specs/components/Comment/CommentTree.spec.ts
+++ b/js/tests/unit/specs/components/Comment/CommentTree.spec.ts
@@ -6,7 +6,7 @@ import {
   MockApolloClient,
   RequestHandler,
 } from "mock-apollo-client";
-import VueApollo from "vue-apollo";
+import VueApollo from "@vue/apollo-option";
 import {
   COMMENTS_THREADS_WITH_REPLIES,
   CREATE_COMMENT_FROM_EVENT,
diff --git a/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts b/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
index e9e137b13..3e443c352 100644
--- a/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
+++ b/js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
@@ -10,7 +10,7 @@ import {
   RequestHandler,
 } from "mock-apollo-client";
 import { CONFIG } from "@/graphql/config";
-import VueApollo from "vue-apollo";
+import VueApollo from "@vue/apollo-option";
 import { configMock } from "../../mocks/config";
 import { InMemoryCache } from "@apollo/client/cache";
 import { defaultResolvers } from "../../common";
diff --git a/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts b/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts
index bbda6f500..4f36f5357 100644
--- a/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts
+++ b/js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts
@@ -14,7 +14,7 @@ import {
   RequestHandler,
 } from "mock-apollo-client";
 import { CONFIG } from "@/graphql/config";
-import VueApollo from "vue-apollo";
+import VueApollo from "@vue/apollo-option";
 import { FETCH_EVENT_BASIC, JOIN_EVENT } from "@/graphql/event";
 import { IEvent } from "@/types/event.model";
 import { i18n } from "@/utils/i18n";
diff --git a/js/tests/unit/specs/components/User/PasswordReset.spec.ts b/js/tests/unit/specs/components/User/PasswordReset.spec.ts
index d6b24689b..7fc4fb630 100644
--- a/js/tests/unit/specs/components/User/PasswordReset.spec.ts
+++ b/js/tests/unit/specs/components/User/PasswordReset.spec.ts
@@ -3,7 +3,7 @@ import PasswordReset from "@/views/User/PasswordReset.vue";
 import Buefy from "buefy";
 import { createMockClient, RequestHandler } from "mock-apollo-client";
 import { RESET_PASSWORD } from "@/graphql/auth";
-import VueApollo from "vue-apollo";
+import VueApollo from "@vue/apollo-option";
 import { resetPasswordResponseMock } from "../../mocks/auth";
 import RouteName from "@/router/name";
 import flushPromises from "flush-promises";
diff --git a/js/tests/unit/specs/components/User/login.spec.ts b/js/tests/unit/specs/components/User/login.spec.ts
index 13a6e8e5b..1769be71c 100644
--- a/js/tests/unit/specs/components/User/login.spec.ts
+++ b/js/tests/unit/specs/components/User/login.spec.ts
@@ -6,7 +6,7 @@ import {
   MockApolloClient,
   RequestHandler,
 } from "mock-apollo-client";
-import VueApollo from "vue-apollo";
+import VueApollo from "@vue/apollo-option";
 import buildCurrentUserResolver from "@/apollo/user";
 import { configMock } from "../../mocks/config";
 import { i18n } from "@/utils/i18n";
diff --git a/js/tests/unit/specs/components/navbar.spec.ts b/js/tests/unit/specs/components/navbar.spec.ts
index 54cd4d366..98e18767e 100644
--- a/js/tests/unit/specs/components/navbar.spec.ts
+++ b/js/tests/unit/specs/components/navbar.spec.ts
@@ -5,7 +5,7 @@ import {
   MockApolloClient,
   RequestHandler,
 } from "mock-apollo-client";
-import VueApollo from "vue-apollo";
+import VueApollo from "@vue/apollo-option";
 import { CONFIG } from "@/graphql/config";
 import { USER_SETTINGS } from "@/graphql/user";
 import buildCurrentUserResolver from "@/apollo/user";
diff --git a/js/yarn.lock b/js/yarn.lock
index ed73c971a..7f58b9944 100644
--- a/js/yarn.lock
+++ b/js/yarn.lock
@@ -2313,6 +2313,13 @@
     "@typescript-eslint/types" "4.26.0"
     eslint-visitor-keys "^2.0.0"
 
+"@vue/apollo-option@^4.0.0-alpha.11":
+  version "4.0.0-alpha.11"
+  resolved "https://registry.yarnpkg.com/@vue/apollo-option/-/apollo-option-4.0.0-alpha.11.tgz#b4ecac2d1ac40271cb7f20683fb8e4c85974329a"
+  integrity sha512-IU458Y2cH/eo3RYXyoEoozyRxEgUz/BLC96DQAQKiEc7hFkE6I0g/VZu4tVIP0Od1/ivezdGaAPEVPA2AxE1ug==
+  dependencies:
+    throttle-debounce "^2.3.0"
+
 "@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81"
@@ -10642,7 +10649,7 @@ throat@^5.0.0:
   resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
   integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
 
-throttle-debounce@^2.1.0:
+throttle-debounce@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
   integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
@@ -11131,15 +11138,6 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vue-apollo@^3.0.3:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/vue-apollo/-/vue-apollo-3.0.7.tgz#97a031d45641faa4888a6d5a7f71c40834359704"
-  integrity sha512-EUfIn4cJmoflnDJiSNP8gH4fofIEzd0I2AWnd9nhHB8mddmzIfgSNjIRihDcRB10wypYG1OG0GcU335CFgZRfA==
-  dependencies:
-    chalk "^2.4.2"
-    serialize-javascript "^4.0.0"
-    throttle-debounce "^2.1.0"
-
 vue-class-component@^7.2.3:
   version "7.2.6"
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4"