From f111685c5886f3e77edfd3621c98d8ac1b9bcce4 Mon Sep 17 00:00:00 2001 From: Armand Philippot 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/404.tsx | 37 +++++++++---------- src/pages/article/[slug].tsx | 39 +++++++++++--------- src/pages/blog/index.tsx | 69 ++++++++++++++++++----------------- src/pages/blog/page/[number].tsx | 77 ++++++++++++++++++++-------------------- src/pages/index.tsx | 17 +++++---- src/pages/projets/[slug].tsx | 4 +-- src/pages/projets/index.tsx | 4 +-- src/pages/recherche/index.tsx | 57 +++++++++++++++-------------- src/pages/sujet/[slug].tsx | 20 +++++------ src/pages/thematique/[slug].tsx | 22 ++++++------ 10 files changed, 174 insertions(+), 172 deletions(-) (limited to 'src/pages') diff --git a/src/pages/404.tsx b/src/pages/404.tsx index d6785b6..5f4f89d 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -18,25 +18,26 @@ import { type SearchFormSubmit, } from '../components'; import { - getThematicsPreview, - getTopicsPreview, - getTotalThematics, - getTotalTopics, + convertTaxonomyToPageLink, + fetchThematicsCount, + fetchThematicsList, + fetchTopicsCount, + fetchTopicsList, } from '../services/graphql'; import type { NextPageWithLayout, - RawThematicPreview, - RawTopicPreview, + WPThematicPreview, + WPTopicPreview, } from '../types'; import { CONFIG } from '../utils/config'; import { ROUTES } from '../utils/constants'; -import { getLinksItemData, getPageLinkFromRawData } from '../utils/helpers'; +import { getLinksItemData } from '../utils/helpers'; import { loadTranslation, type Messages } from '../utils/helpers/server'; import { useBreadcrumb } from '../utils/hooks'; type Error404PageProps = { - thematicsList: RawThematicPreview[]; - topicsList: RawTopicPreview[]; + thematicsList: WPThematicPreview[]; + topicsList: WPTopicPreview[]; translation: Messages; }; @@ -146,11 +147,7 @@ const Error404Page: NextPageWithLayout = ({ {thematicsListTitle} } - items={getLinksItemData( - thematicsList.map((thematic) => - getPageLinkFromRawData(thematic, 'thematic') - ) - )} + items={getLinksItemData(thematicsList.map(convertTaxonomyToPageLink))} /> = ({ {topicsListTitle} } - items={getLinksItemData( - topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic')) - )} + items={getLinksItemData(topicsList.map(convertTaxonomyToPageLink))} /> @@ -172,10 +167,10 @@ Error404Page.getLayout = (page) => getLayout(page); export const getStaticProps: GetStaticProps = async ({ locale, }) => { - const totalThematics = await getTotalThematics(); - const thematics = await getThematicsPreview({ first: totalThematics }); - const totalTopics = await getTotalTopics(); - const topics = await getTopicsPreview({ first: totalTopics }); + const totalThematics = await fetchThematicsCount(); + const thematics = await fetchThematicsList({ first: totalThematics }); + const totalTopics = await fetchTopicsCount(); + const topics = await fetchTopicsList({ first: totalTopics }); const translation = await loadTranslation(locale); return { 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 = ({ 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 = ({ 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 = ({ heading={title} intro={intro} meta={{ - author: author?.name, + author, publicationDate: dates.publication, thematics, updateDate: dates.update, @@ -292,11 +297,7 @@ const ArticlePage: NextPageWithLayout = ({ ]} /> - + ); }; @@ -311,14 +312,20 @@ export const getStaticProps: GetStaticProps = 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 = async ({ }; export const getStaticPaths: GetStaticPaths = async () => { - const slugs = await getAllArticlesSlugs(); + const slugs = await fetchAllPostsSlugs(); const paths = slugs.map((slug) => { return { params: { slug } }; }); diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index 0de5523..56cbb02 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -20,27 +20,28 @@ import { PageSidebar, } from '../../components'; import { - getArticles, - getThematicsPreview, - getTopicsPreview, - getTotalArticles, - getTotalThematics, - getTotalTopics, + convertTaxonomyToPageLink, + fetchPostsCount, + fetchPostsList, + fetchThematicsCount, + fetchThematicsList, + fetchTopicsCount, + fetchTopicsList, } from '../../services/graphql'; import styles from '../../styles/pages/blog.module.scss'; import type { - EdgesResponse, + GraphQLConnection, NextPageWithLayout, - RawArticle, - RawThematicPreview, - RawTopicPreview, + WPPostPreview, + WPThematicPreview, + WPTopicPreview, } from '../../types'; import { CONFIG } from '../../utils/config'; import { ROUTES } from '../../utils/constants'; import { getBlogSchema, getLinksItemData, - getPageLinkFromRawData, + getPostsWithUrl, getSchemaJson, getWebPageSchema, } from '../../utils/helpers'; @@ -48,9 +49,9 @@ import { loadTranslation, type Messages } from '../../utils/helpers/server'; import { useBreadcrumb, useIsMounted, usePostsList } from '../../utils/hooks'; type BlogPageProps = { - articles: EdgesResponse; - thematicsList: RawThematicPreview[]; - topicsList: RawTopicPreview[]; + posts: GraphQLConnection; + thematicsList: WPThematicPreview[]; + topicsList: WPTopicPreview[]; totalArticles: number; translation: Messages; }; @@ -59,7 +60,7 @@ type BlogPageProps = { * Blog index page. */ const BlogPage: NextPageWithLayout = ({ - articles, + posts, thematicsList, topicsList, totalArticles, @@ -111,6 +112,7 @@ const BlogPage: NextPageWithLayout = ({ const schemaJsonLd = getSchemaJson([webpageSchema, blogSchema]); const { + articles, error, firstNewResultIndex, isLoading, @@ -118,10 +120,9 @@ const BlogPage: NextPageWithLayout = ({ isRefreshing, hasNextPage, loadMore, - posts, } = usePostsList({ - fallback: [articles], - fetcher: getArticles, + fallback: [posts], + fetcher: fetchPostsList, perPage: CONFIG.postsPerPage, }); @@ -191,6 +192,10 @@ const BlogPage: NextPageWithLayout = ({ id: 'AXe1Iz', }); + const blogArticles = articles?.flatMap((p) => + p.edges.map((edge) => edge.node) + ); + return ( @@ -218,13 +223,13 @@ const BlogPage: NextPageWithLayout = ({ /> - {posts ? ( + {blogArticles ? ( = ({ {thematicsListTitle} } - items={getLinksItemData( - thematicsList.map((thematic) => - getPageLinkFromRawData(thematic, 'thematic') - ) - )} + items={getLinksItemData(thematicsList.map(convertTaxonomyToPageLink))} /> = ({ {topicsListTitle} } - items={getLinksItemData( - topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic')) - )} + items={getLinksItemData(topicsList.map(convertTaxonomyToPageLink))} /> @@ -286,17 +285,17 @@ BlogPage.getLayout = (page) => getLayout(page); export const getStaticProps: GetStaticProps = async ({ locale, }) => { - const articles = await getArticles({ first: CONFIG.postsPerPage }); - const totalArticles = await getTotalArticles(); - const totalThematics = await getTotalThematics(); - const thematics = await getThematicsPreview({ first: totalThematics }); - const totalTopics = await getTotalTopics(); - const topics = await getTopicsPreview({ first: totalTopics }); + const posts = await fetchPostsList({ first: CONFIG.postsPerPage }); + const totalArticles = await fetchPostsCount(); + const totalThematics = await fetchThematicsCount(); + const thematics = await fetchThematicsList({ first: totalThematics }); + const totalTopics = await fetchTopicsCount(); + const topics = await fetchTopicsList({ first: totalTopics }); const translation = await loadTranslation(locale); return { props: { - articles: JSON.parse(JSON.stringify(articles)), + posts: JSON.parse(JSON.stringify(posts)), thematicsList: thematics.edges.map((edge) => edge.node), topicsList: topics.edges.map((edge) => edge.node), totalArticles, diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx index b254603..d6071d1 100644 --- a/src/pages/blog/page/[number].tsx +++ b/src/pages/blog/page/[number].tsx @@ -20,27 +20,28 @@ import { PageSidebar, } from '../../../components'; import { - getArticles, - getArticlesEndCursor, - getThematicsPreview, - getTopicsPreview, - getTotalArticles, - getTotalThematics, - getTotalTopics, + convertTaxonomyToPageLink, + fetchLastPostCursor, + fetchPostsCount, + fetchPostsList, + fetchThematicsCount, + fetchThematicsList, + fetchTopicsCount, + fetchTopicsList, } from '../../../services/graphql'; import type { - EdgesResponse, + GraphQLConnection, NextPageWithLayout, - RawArticle, - RawThematicPreview, - RawTopicPreview, + WPPostPreview, + WPThematicPreview, + WPTopicPreview, } from '../../../types'; import { CONFIG } from '../../../utils/config'; import { ROUTES } from '../../../utils/constants'; import { getBlogSchema, getLinksItemData, - getPageLinkFromRawData, + getPostsWithUrl, getSchemaJson, getWebPageSchema, } from '../../../utils/helpers'; @@ -52,10 +53,10 @@ import { } from '../../../utils/hooks'; type BlogPageProps = { - articles: EdgesResponse; pageNumber: number; - thematicsList: RawThematicPreview[]; - topicsList: RawTopicPreview[]; + posts: GraphQLConnection; + thematicsList: WPThematicPreview[]; + topicsList: WPTopicPreview[]; totalArticles: number; translation: Messages; }; @@ -64,8 +65,8 @@ type BlogPageProps = { * Blog index page. */ const BlogPage: NextPageWithLayout = ({ - articles, pageNumber, + posts, thematicsList, topicsList, totalArticles, @@ -75,9 +76,9 @@ const BlogPage: NextPageWithLayout = ({ redirectTo: ROUTES.BLOG, }); - const { posts } = usePostsList({ - fallback: [articles], - fetcher: getArticles, + const { articles } = usePostsList({ + fallback: [posts], + fetcher: fetchPostsList, perPage: CONFIG.postsPerPage, }); const intl = useIntl(); @@ -195,6 +196,10 @@ const BlogPage: NextPageWithLayout = ({ id: 'AXe1Iz', }); + const blogPageArticles = articles?.flatMap((p) => + p.edges.map((edge) => edge.node) + ); + return ( @@ -225,7 +230,7 @@ const BlogPage: NextPageWithLayout = ({ meta={{ total: totalArticles }} /> - + = ({ {thematicsListTitle} } - items={getLinksItemData( - thematicsList.map((thematic) => - getPageLinkFromRawData(thematic, 'thematic') - ) - )} + items={getLinksItemData(thematicsList.map(convertTaxonomyToPageLink))} /> = ({ {topicsListTitle} } - items={getLinksItemData( - topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic')) - )} + items={getLinksItemData(topicsList.map(convertTaxonomyToPageLink))} /> @@ -274,23 +273,23 @@ export const getStaticProps: GetStaticProps = async ({ params, }) => { const pageNumber = Number((params as BlogPageParams).number); - const lastCursor = await getArticlesEndCursor({ - first: CONFIG.postsPerPage * pageNumber, - }); - const articles = await getArticles({ + const lastCursor = await fetchLastPostCursor( + CONFIG.postsPerPage * pageNumber + ); + const posts = await fetchPostsList({ first: CONFIG.postsPerPage, after: lastCursor, }); - const totalArticles = await getTotalArticles(); - const totalThematics = await getTotalThematics(); - const thematics = await getThematicsPreview({ first: totalThematics }); - const totalTopics = await getTotalTopics(); - const topics = await getTopicsPreview({ first: totalTopics }); + const totalArticles = await fetchPostsCount(); + const totalThematics = await fetchThematicsCount(); + const thematics = await fetchThematicsList({ first: totalThematics }); + const totalTopics = await fetchTopicsCount(); + const topics = await fetchTopicsList({ first: totalTopics }); const translation = await loadTranslation(locale); return { props: { - articles: JSON.parse(JSON.stringify(articles)), + posts: JSON.parse(JSON.stringify(posts)), pageNumber, thematicsList: thematics.edges.map((edge) => edge.node), topicsList: topics.edges.map((edge) => edge.node), @@ -301,7 +300,7 @@ export const getStaticProps: GetStaticProps = async ({ }; export const getStaticPaths: GetStaticPaths = async () => { - const totalArticles = await getTotalArticles(); + const totalArticles = await fetchPostsCount(); const totalPages = Math.ceil(totalArticles / CONFIG.postsPerPage); const pagesArray = Array.from( { length: totalPages }, diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 56de5b5..7bd8aec 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -26,9 +26,12 @@ import { } from '../components'; import { mdxComponents } from '../components/mdx'; import HomePageContent from '../content/pages/homepage.mdx'; -import { getArticlesCard } from '../services/graphql'; +import { + convertRecentPostToRecentArticle, + fetchRecentPosts, +} from '../services/graphql'; import styles from '../styles/pages/home.module.scss'; -import type { ArticleCard, NextPageWithLayout } from '../types'; +import type { NextPageWithLayout, RecentArticle } from '../types'; import { CONFIG } from '../utils/config'; import { PERSONAL_LINKS, ROUTES } from '../utils/constants'; import { getSchemaJson, getWebPageSchema } from '../utils/helpers'; @@ -229,7 +232,7 @@ const HomePageSection: FC = ({ ); type HomeProps = { - recentPosts: ArticleCard[]; + recentPosts: RecentArticle[]; translation?: Messages; }; @@ -277,7 +280,7 @@ const HomePage: NextPageWithLayout = ({ recentPosts }) => { hasBorderedValues isCentered label={publicationDate} - value={