From 13763ba7f9d5a1f0300ec0967aac135a3161c02c Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Fri, 11 Jun 2021 14:21:27 +0200 Subject: [PATCH] Upgrade vue-apollo to @vue/apollo-option Signed-off-by: Thomas Citharel --- js/package.json | 2 +- js/src/components/Admin/Followings.vue | 16 +++++++--------- .../ParticipationWithoutAccount.vue | 4 ++-- js/src/mixins/event.ts | 7 ++++++- js/src/views/Account/Register.vue | 4 ++-- js/src/views/Admin/AdminGroupProfile.vue | 7 +++++-- js/src/views/Admin/AdminProfile.vue | 7 +++++-- js/src/views/Discussions/Discussion.vue | 14 ++++++++++---- js/src/views/Event/Edit.vue | 10 +++++----- js/src/views/Event/Event.vue | 9 +++++++-- js/src/views/Moderation/Report.vue | 14 ++++++++++---- js/src/views/Resources/ResourceFolder.vue | 7 +++++-- js/src/vue-apollo.ts | 2 +- .../components/Comment/CommentTree.spec.ts | 2 +- .../Participation/ParticipationSection.spec.ts | 2 +- .../ParticipationWithoutAccount.spec.ts | 2 +- .../components/User/PasswordReset.spec.ts | 2 +- .../unit/specs/components/User/login.spec.ts | 2 +- js/tests/unit/specs/components/navbar.spec.ts | 2 +- js/yarn.lock | 18 ++++++++---------- 20 files changed, 80 insertions(+), 53 deletions(-) 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, { data }: FetchResult) { + update( + cache: ApolloCache<{ relayFollowings: Paginate }>, + { data }: FetchResult + ) { cache.modify({ fields: { relayFollowings( @@ -274,12 +272,12 @@ export default class Followings extends Mixins(RelayMixin) { async removeRelay(follower: IFollower): Promise { 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) { + 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, + 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, { 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, + 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, { 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, { 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, { 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, { 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 { - await this.$apollo.mutate({ + await this.$apollo.mutate<{ updateDiscussion: IDiscussion }>({ mutation: UPDATE_DISCUSSION, variables: { discussionId: this.discussion.id, title: this.newTitle, }, update: ( - store: ApolloCache, + 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, + 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, + 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, { 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, { 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 { try { - await this.$apollo.mutate({ + await this.$apollo.mutate<{ updateReportStatus: IReport }>({ mutation: UPDATE_REPORT, variables: { reportId: this.report.id, status, }, - update: (store: ApolloCache, { 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, { 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"