fix(article): prevent TypeError on build

By switching to custom hooks for revalidating articles and comments,
everything was working on development mode but articles failed to build
for production.

3 files changed, 31 insertions, 11 deletions

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 572a5fc..5036b5b 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -56,8 +56,11 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
 }) => {
   const { isFallback } = useRouter();
   const intl = useIntl();
-  const article = useArticle(slug, post);
-  const commentsData = useComments(post.id, comments);
+  const article = useArticle({ slug, fallback: post });
+  const commentsData = useComments({
+    contentId: article?.id,
+    fallback: comments,
+  });
   const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
     title: article?.title || '',
     url: `/article/${slug}`,
@@ -69,7 +72,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
 
   if (isFallback) return <Spinner />;
 
-  const { content, id, intro, meta, title } = article;
+  const { content, id, intro, meta, title } = article!;
   const { author, commentsCount, cover, dates, seo, thematics, topics } = meta;
 
   const headerMeta: PageLayoutProps['headerMeta'] = {
diff --git a/src/utils/hooks/use-article.tsx b/src/utils/hooks/use-article.tsx
index 3a173dd..6281a54 100644
--- a/src/utils/hooks/use-article.tsx
+++ b/src/utils/hooks/use-article.tsx
@@ -5,16 +5,26 @@ import { Article } from '@ts/types/app';
 import { RawArticle } from '@ts/types/raw-data';
 import useSWR from 'swr';
 
+export type UseArticleConfig = {
+  fallback?: Article;
+  slug?: string;
+};
+
 /**
  * Retrieve an article by slug.
  *
  * @param {string} slug - The article slug.
  * @param {Article} fallback - A fallback article.
- * @returns {Article} The matching article.
+ * @returns {Article|undefined} The matching article if it exists.
  */
-const useArticle = (slug: string, fallback: Article): Article => {
+const useArticle = ({
+  slug,
+  fallback,
+}: UseArticleConfig): Article | undefined => {
   const { data } = useSWR(
-    { api: getAPIUrl(), query: articleBySlugQuery, variables: { slug } },
+    slug
+      ? { api: getAPIUrl(), query: articleBySlugQuery, variables: { slug } }
+      : null,
     fetchAPI<RawArticle, typeof articleBySlugQuery>
   );
 
diff --git a/src/utils/hooks/use-comments.tsx b/src/utils/hooks/use-comments.tsx
index f430f19..9076888 100644
--- a/src/utils/hooks/use-comments.tsx
+++ b/src/utils/hooks/use-comments.tsx
@@ -8,18 +8,25 @@ import { Comment } from '@ts/types/app';
 import { RawComment } from '@ts/types/raw-data';
 import useSWR from 'swr';
 
+export type UseCommentsConfig = {
+  contentId?: string | number;
+  fallback?: Comment[];
+};
+
 /**
  * Retrieve the comments of a page/article.
  *
  * @param {string | number} contentId - A page/article id.
  * @returns {Comment[]|undefined}
  */
-const useComments = (
-  contentId: string | number,
-  fallback?: Comment[]
-): Comment[] | undefined => {
+const useComments = ({
+  contentId,
+  fallback,
+}: UseCommentsConfig): Comment[] | undefined => {
   const { data } = useSWR(
-    { api: getAPIUrl(), query: commentsQuery, variables: { contentId } },
+    contentId
+      ? { api: getAPIUrl(), query: commentsQuery, variables: { contentId } }
+      : null,
     fetchAPI<RawComment, typeof commentsQuery>
   );