refactor(article): wrap useSWR with a custom hook to revalidate article

3 files changed, 31 insertions, 9 deletions

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index f720fa6..572a5fc 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -25,6 +25,7 @@ import {
   getSinglePageSchema,
   getWebPageSchema,
 } from '@utils/helpers/schema-org';
+import useArticle from '@utils/hooks/use-article';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useComments from '@utils/hooks/use-comments';
 import usePrism, { type OptionalPrismPlugin } from '@utils/hooks/use-prism';
@@ -37,7 +38,6 @@ import Script from 'next/script';
 import { ParsedUrlQuery } from 'querystring';
 import { HTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
-import useSWR from 'swr';
 
 type ArticlePageProps = {
   comments: Comment[];
@@ -56,9 +56,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
 }) => {
   const { isFallback } = useRouter();
   const intl = useIntl();
-  const { data: article } = useSWR(() => slug, getArticleBySlug, {
-    fallbackData: post,
-  });
+  const article = useArticle(slug, post);
   const commentsData = useComments(post.id, comments);
   const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
     title: article?.title || '',
@@ -71,7 +69,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
new file mode 100644
index 0000000..3a173dd
--- /dev/null
+++ b/src/utils/hooks/use-article.tsx
@@ -0,0 +1,24 @@
+import { fetchAPI, getAPIUrl } from '@services/graphql/api';
+import { getArticleFromRawData } from '@services/graphql/articles';
+import { articleBySlugQuery } from '@services/graphql/articles.query';
+import { Article } from '@ts/types/app';
+import { RawArticle } from '@ts/types/raw-data';
+import useSWR from 'swr';
+
+/**
+ * Retrieve an article by slug.
+ *
+ * @param {string} slug - The article slug.
+ * @param {Article} fallback - A fallback article.
+ * @returns {Article} The matching article.
+ */
+const useArticle = (slug: string, fallback: Article): Article => {
+  const { data } = useSWR(
+    { api: getAPIUrl(), query: articleBySlugQuery, variables: { slug } },
+    fetchAPI<RawArticle, typeof articleBySlugQuery>
+  );
+
+  return data ? getArticleFromRawData(data.post) : fallback;
+};
+
+export default useArticle;
diff --git a/src/utils/hooks/use-comments.tsx b/src/utils/hooks/use-comments.tsx
index cc9e560..f430f19 100644
--- a/src/utils/hooks/use-comments.tsx
+++ b/src/utils/hooks/use-comments.tsx
@@ -10,7 +10,8 @@ import useSWR from 'swr';
 
 /**
  * Retrieve the comments of a page/article.
- * @param contentId - A page/article id.
+ *
+ * @param {string | number} contentId - A page/article id.
  * @returns {Comment[]|undefined}
  */
 const useComments = (
@@ -19,15 +20,14 @@ const useComments = (
 ): Comment[] | undefined => {
   const { data } = useSWR(
     { api: getAPIUrl(), query: commentsQuery, variables: { contentId } },
-    fetchAPI<RawComment, typeof commentsQuery>,
-    { fallback }
+    fetchAPI<RawComment, typeof commentsQuery>
   );
 
   const comments = data?.comments.nodes.map((comment) =>
     getCommentFromRawData(comment)
   );
 
-  return comments ? buildCommentsTree(comments) : undefined;
+  return comments ? buildCommentsTree(comments) : fallback;
 };
 
 export default useComments;