Fix a couple of Apollo cache issues

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-11-13 11:47:56 +01:00
parent 18cd7c11f1
commit e6b186026d
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
2 changed files with 20 additions and 84 deletions

View File

@ -145,8 +145,10 @@ export default class DiscussionComment extends Vue {
} }
updateComment(): void { updateComment(): void {
this.comment.text = this.updatedComment; this.$emit("update-comment", {
this.$emit("update-comment", this.comment); ...this.comment,
text: this.updatedComment,
});
this.toggleEditMode(); this.toggleEditMode();
} }
} }

View File

@ -154,7 +154,7 @@ import { GraphQLError } from "graphql";
import { DELETE_COMMENT, UPDATE_COMMENT } from "@/graphql/comment"; import { DELETE_COMMENT, UPDATE_COMMENT } from "@/graphql/comment";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { IComment } from "../../types/comment.model"; import { IComment } from "../../types/comment.model";
import { ApolloCache, FetchResult } from "@apollo/client/core"; import { ApolloCache, FetchResult, gql, Reference } from "@apollo/client/core";
import { mixins } from "vue-class-component"; import { mixins } from "vue-class-component";
import GroupMixin from "@/mixins/group"; import GroupMixin from "@/mixins/group";
@ -310,49 +310,23 @@ export default class Discussion extends mixins(GroupMixin) {
variables: { variables: {
commentId: comment.id, commentId: comment.id,
}, },
update: ( update: (store: ApolloCache<{ deleteComment: IComment }>) => {
store: ApolloCache<{ deleteComment: IComment }>, store.writeFragment({
{ data }: FetchResult id: store.identify(comment as unknown as Reference),
) => { fragment: gql`
if (!data || !data.deleteComment) return; fragment CommentDeleted on Comment {
const discussionData = store.readQuery<{ deletedAt
discussion: IDiscussion; actor {
}>({ id
query: GET_DISCUSSION,
variables: {
slug: this.slug,
page: this.page,
},
});
if (!discussionData) return;
const { discussion: discussionCached } = discussionData;
const index = discussionCached.comments.elements.findIndex(
({ id }) => id === data.deleteComment.id
);
let discussionUpdated = discussionCached;
if (index > -1) {
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({ text
query: GET_DISCUSSION, }
variables: { slug: this.slug, page: this.page }, `,
data: { discussion: discussionUpdated }, data: {
deletedAt: new Date(),
text: "",
actor: null,
},
}); });
}, },
}); });
@ -369,20 +343,6 @@ export default class Discussion extends mixins(GroupMixin) {
page: this.page, page: this.page,
limit: this.COMMENTS_PER_PAGE, limit: this.COMMENTS_PER_PAGE,
}, },
updateQuery: (previousResult, { fetchMoreResult }) => {
return {
discussion: {
...previousResult.discussion,
comments: {
...fetchMoreResult.discussion.comments,
elements: [
...previousResult.discussion.comments.elements,
...fetchMoreResult.discussion.comments.elements,
],
},
},
};
},
}); });
this.hasMoreComments = !this.discussion.comments.elements this.hasMoreComments = !this.discussion.comments.elements
.map(({ id }) => id) .map(({ id }) => id)
@ -399,32 +359,6 @@ export default class Discussion extends mixins(GroupMixin) {
discussionId: this.discussion.id, discussionId: this.discussion.id,
title: this.newTitle, title: this.newTitle,
}, },
update: (
store: ApolloCache<{ updateDiscussion: IDiscussion }>,
{ data }: FetchResult<{ updateDiscussion: IDiscussion }>
) => {
const discussionData = store.readQuery<{
discussion: IDiscussion;
}>({
query: GET_DISCUSSION,
variables: {
slug: this.slug,
page: this.page,
},
});
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; this.editTitleMode = false;
} }