fix(front): fix discussion comment changed subscription done before having slug value

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2024-02-29 09:57:22 +01:00
parent a9b977540b
commit 067029705d
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
1 changed files with 48 additions and 42 deletions

View File

@ -179,6 +179,7 @@ import { MemberRole } from "@/types/enums";
import { PERSON_MEMBERSHIPS } from "@/graphql/actor"; import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
import { Dialog } from "@/plugins/dialog"; import { Dialog } from "@/plugins/dialog";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { watch } from "vue";
const props = defineProps<{ slug: string }>(); const props = defineProps<{ slug: string }>();
@ -187,6 +188,8 @@ const COMMENTS_PER_PAGE = 10;
const { currentActor } = useCurrentActorClient(); const { currentActor } = useCurrentActorClient();
const slug = computed(() => props.slug);
const { const {
result: discussionResult, result: discussionResult,
onError: onDiscussionError, onError: onDiscussionError,
@ -196,19 +199,21 @@ const {
} = useQuery<{ discussion: IDiscussion }>( } = useQuery<{ discussion: IDiscussion }>(
GET_DISCUSSION, GET_DISCUSSION,
() => ({ () => ({
slug: props.slug, slug: slug.value,
page: page.value, page: page.value,
limit: COMMENTS_PER_PAGE, limit: COMMENTS_PER_PAGE,
}), }),
() => ({ () => ({
enabled: props.slug !== undefined, enabled: slug.value !== undefined,
}) })
); );
subscribeToMore({ watch(slug, (newSlug: string | undefined | null) => {
if (!newSlug) return;
subscribeToMore({
document: DISCUSSION_COMMENT_CHANGED, document: DISCUSSION_COMMENT_CHANGED,
variables: () => ({ variables: () => ({
slug: props.slug, slug: slug.value,
page: page.value, page: page.value,
limit: COMMENTS_PER_PAGE, limit: COMMENTS_PER_PAGE,
}), }),
@ -242,6 +247,7 @@ subscribeToMore({
return previousDiscussion; return previousDiscussion;
}, },
});
}); });
const discussion = computed(() => discussionResult.value?.discussion); const discussion = computed(() => discussionResult.value?.discussion);
@ -271,7 +277,7 @@ const { mutate: replyToDiscussionMutation } = useMutation<{
}>({ }>({
query: GET_DISCUSSION, query: GET_DISCUSSION,
variables: { variables: {
slug: props.slug, slug: slug.value,
page: page.value, page: page.value,
}, },
}); });
@ -280,7 +286,7 @@ const { mutate: replyToDiscussionMutation } = useMutation<{
store.writeQuery({ store.writeQuery({
query: GET_DISCUSSION, query: GET_DISCUSSION,
variables: { slug: props.slug, page: page.value }, variables: { slug: slug.value, page: page.value },
data: { data: {
discussion: { discussion: {
...discussionCached, ...discussionCached,
@ -323,7 +329,7 @@ const { mutate: updateComment } = useMutation<
}>({ }>({
query: GET_DISCUSSION, query: GET_DISCUSSION,
variables: { variables: {
slug: props.slug, slug: slug.value,
page: page.value, page: page.value,
}, },
}); });
@ -338,7 +344,7 @@ const { mutate: updateComment } = useMutation<
} }
store.writeQuery({ store.writeQuery({
query: GET_DISCUSSION, query: GET_DISCUSSION,
variables: { slug: props.slug, page: page.value }, variables: { slug: slug.value, page: page.value },
data: { discussion: discussionCached }, data: { discussion: discussionCached },
}); });
}, },
@ -378,7 +384,7 @@ const loadMoreComments = async (): Promise<void> => {
await fetchMore({ await fetchMore({
// New variables // New variables
variables: { variables: {
slug: props.slug, slug: slug.value,
page: page.value, page: page.value,
limit: COMMENTS_PER_PAGE, limit: COMMENTS_PER_PAGE,
}, },