From f111685c5886f3e77edfd3621c98d8ac1b9bcce4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 24 Nov 2023 20:00:08 +0100
Subject: refactor(services, types): reorganize GraphQL fetchers and data types

The Typescript mapped types was useful for autocompletion in fetchers
but their are harder to maintain. I think it's better to keep each
query close to its fetcher to have a better understanding of the
fetched data. So I:
* colocate queries with their own fetcher
* colocate mutations with their own mutator
* remove Typescript mapped types for queries and mutations
* move data convertors inside graphql services
* rename most of data types and fetchers
---
 src/pages/article/[slug].tsx | 39 +++++++++++++++++++++++----------------
 1 file changed, 23 insertions(+), 16 deletions(-)

(limited to 'src/pages/article')

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 224b1c5..f228ff0 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -21,9 +21,11 @@ import {
   TocWidget,
 } from '../../components';
 import {
-  getAllArticlesSlugs,
-  getAllComments,
-  getArticleBySlug,
+  convertPostToArticle,
+  convertWPCommentToComment,
+  fetchAllPostsSlugs,
+  fetchCommentsList,
+  fetchPost,
 } from '../../services/graphql';
 import styles from '../../styles/pages/article.module.scss';
 import type { Article, NextPageWithLayout, SingleComment } from '../../types';
@@ -63,8 +65,11 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
   const intl = useIntl();
   const article = useArticle({ slug, fallback: post });
   const commentsData = useComments({
-    contentId: article?.id,
     fallback: comments,
+    first: article?.meta.commentsCount,
+    where: {
+      contentId: article?.id ?? post.id,
+    },
   });
 
   const getComments = (data?: SingleComment[]) =>
@@ -73,7 +78,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
         author: comment.meta.author,
         content: comment.content,
         id: comment.id,
-        isApproved: comment.approved,
+        isApproved: comment.isApproved,
         publicationDate: comment.meta.date,
         replies: getComments(comment.replies),
       };
@@ -255,7 +260,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
         heading={title}
         intro={intro}
         meta={{
-          author: author?.name,
+          author,
           publicationDate: dates.publication,
           thematics,
           updateDate: dates.update,
@@ -292,11 +297,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
           ]}
         />
       </PageSidebar>
-      <PageComments
-        comments={articleComments ?? []}
-        depth={2}
-        pageId={id as number}
-      />
+      <PageComments comments={articleComments ?? []} depth={2} pageId={id} />
     </Page>
   );
 };
@@ -311,14 +312,20 @@ export const getStaticProps: GetStaticProps<ArticlePageProps> = async ({
   locale,
   params,
 }) => {
-  const post = await getArticleBySlug((params as PostParams).slug);
-  const comments = await getAllComments({ contentId: post.id as number });
+  const post = await fetchPost((params as PostParams).slug);
+  const article = await convertPostToArticle(post);
+  const comments = await fetchCommentsList({
+    first: post.commentCount ?? 1,
+    where: { contentId: post.databaseId },
+  });
   const translation = await loadTranslation(locale);
 
   return {
     props: {
-      comments: JSON.parse(JSON.stringify(comments)),
-      post: JSON.parse(JSON.stringify(post)),
+      comments: JSON.parse(
+        JSON.stringify(comments.map(convertWPCommentToComment))
+      ),
+      post: JSON.parse(JSON.stringify(article)),
       slug: post.slug,
       translation,
     },
@@ -326,7 +333,7 @@ export const getStaticProps: GetStaticProps<ArticlePageProps> = async ({
 };
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const slugs = await getAllArticlesSlugs();
+  const slugs = await fetchAllPostsSlugs();
   const paths = slugs.map((slug) => {
     return { params: { slug } };
   });
-- 
cgit v1.2.3