Upgrade vue-apollo to @vue/apollo-option

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

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

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) {

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;
 

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) {

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;
 

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;
 

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

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) =>

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

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,

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;

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 {