diff --git a/js/src/views/PageNotFound.vue b/js/src/views/PageNotFound.vue index 84dcd656e..ebbee571e 100644 --- a/js/src/views/PageNotFound.vue +++ b/js/src/views/PageNotFound.vue @@ -1,5 +1,5 @@ <template> - <section class="container mx-auto pt-4 is-max-desktop max-w-2xl"> + <section class="container mx-auto py-4 is-max-desktop max-w-2xl"> <div class=""> <div class=""> <picture> diff --git a/js/src/views/Posts/PostView.vue b/js/src/views/Posts/PostView.vue index 59ac9500e..c6d6e76f3 100644 --- a/js/src/views/Posts/PostView.vue +++ b/js/src/views/Posts/PostView.vue @@ -282,6 +282,7 @@ import Link from "vue-material-design-icons/Link.vue"; import { Dialog } from "@/plugins/dialog"; import { useI18n } from "vue-i18n"; import { Notifier } from "@/plugins/notifier"; +import { AbsintheGraphQLErrors } from "@/types/errors.model"; const props = defineProps<{ slug: string; @@ -303,10 +304,27 @@ const { result: membershipsResult, loading: membershipsLoading } = useQuery<{ ); const memberships = computed(() => membershipsResult.value?.person.memberships); -const { result: postResult, loading: postLoading } = useQuery<{ +const { + result: postResult, + loading: postLoading, + onError: onFetchPostError, +} = useQuery<{ post: IPost; }>(FETCH_POST, () => ({ slug: props.slug })); +const handleErrors = (errors: AbsintheGraphQLErrors): void => { + if ( + errors.some((error) => error.status_code === 404) || + errors.some(({ message }) => message.includes("has invalid value $uuid")) + ) { + router.replace({ name: RouteName.PAGE_NOT_FOUND }); + } +}; + +onFetchPostError(({ graphQLErrors }) => + handleErrors(graphQLErrors as AbsintheGraphQLErrors) +); + const post = computed(() => postResult.value?.post); usePersonStatusGroup(usernameWithDomain(post.value?.attributedTo as IGroup));