aboutsummaryrefslogtreecommitdiffstats
path: root/src/pages/blog
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-11-24 20:00:08 +0100
committerArmand Philippot <git@armandphilippot.com>2023-11-27 14:47:51 +0100
commitf111685c5886f3e77edfd3621c98d8ac1b9bcce4 (patch)
tree62a541fe3afeb64bf745443706fbfb02e96c5230 /src/pages/blog
parentbee515641cb144be9a855ff2cac258d2fedab21d (diff)
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
Diffstat (limited to 'src/pages/blog')
-rw-r--r--src/pages/blog/index.tsx69
-rw-r--r--src/pages/blog/page/[number].tsx77
2 files changed, 72 insertions, 74 deletions
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<RawArticle>;
- thematicsList: RawThematicPreview[];
- topicsList: RawTopicPreview[];
+ posts: GraphQLConnection<WPPostPreview>;
+ thematicsList: WPThematicPreview[];
+ topicsList: WPTopicPreview[];
totalArticles: number;
translation: Messages;
};
@@ -59,7 +60,7 @@ type BlogPageProps = {
* Blog index page.
*/
const BlogPage: NextPageWithLayout<BlogPageProps> = ({
- articles,
+ posts,
thematicsList,
topicsList,
totalArticles,
@@ -111,6 +112,7 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
const schemaJsonLd = getSchemaJson([webpageSchema, blogSchema]);
const {
+ articles,
error,
firstNewResultIndex,
isLoading,
@@ -118,10 +120,9 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
isRefreshing,
hasNextPage,
loadMore,
- posts,
} = usePostsList({
- fallback: [articles],
- fetcher: getArticles,
+ fallback: [posts],
+ fetcher: fetchPostsList,
perPage: CONFIG.postsPerPage,
});
@@ -191,6 +192,10 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
id: 'AXe1Iz',
});
+ const blogArticles = articles?.flatMap((p) =>
+ p.edges.map((edge) => edge.node)
+ );
+
return (
<Page breadcrumbs={breadcrumbItems} isBodyLastChild>
<Head>
@@ -218,13 +223,13 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
/>
<PageHeader heading={title} meta={{ total: totalArticles }} />
<PageBody className={styles.body}>
- {posts ? (
+ {blogArticles ? (
<PostsList
className={styles.list}
firstNewResult={firstNewResultIndex}
isLoading={isLoading || isLoadingMore || isRefreshing}
onLoadMore={hasNextPage && isMounted ? loadMore : undefined}
- posts={posts}
+ posts={getPostsWithUrl(blogArticles)}
ref={postsListRef}
sortByYear
total={isMounted ? totalArticles : undefined}
@@ -260,11 +265,7 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
{thematicsListTitle}
</Heading>
}
- items={getLinksItemData(
- thematicsList.map((thematic) =>
- getPageLinkFromRawData(thematic, 'thematic')
- )
- )}
+ items={getLinksItemData(thematicsList.map(convertTaxonomyToPageLink))}
/>
<LinksWidget
heading={
@@ -272,9 +273,7 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
{topicsListTitle}
</Heading>
}
- items={getLinksItemData(
- topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic'))
- )}
+ items={getLinksItemData(topicsList.map(convertTaxonomyToPageLink))}
/>
</PageSidebar>
</Page>
@@ -286,17 +285,17 @@ BlogPage.getLayout = (page) => getLayout(page);
export const getStaticProps: GetStaticProps<BlogPageProps> = 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<RawArticle>;
pageNumber: number;
- thematicsList: RawThematicPreview[];
- topicsList: RawTopicPreview[];
+ posts: GraphQLConnection<WPPostPreview>;
+ thematicsList: WPThematicPreview[];
+ topicsList: WPTopicPreview[];
totalArticles: number;
translation: Messages;
};
@@ -64,8 +65,8 @@ type BlogPageProps = {
* Blog index page.
*/
const BlogPage: NextPageWithLayout<BlogPageProps> = ({
- articles,
pageNumber,
+ posts,
thematicsList,
topicsList,
totalArticles,
@@ -75,9 +76,9 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
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<BlogPageProps> = ({
id: 'AXe1Iz',
});
+ const blogPageArticles = articles?.flatMap((p) =>
+ p.edges.map((edge) => edge.node)
+ );
+
return (
<Page breadcrumbs={breadcrumbItems} isBodyLastChild>
<Head>
@@ -225,7 +230,7 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
meta={{ total: totalArticles }}
/>
<PageBody>
- <PostsList posts={posts ?? []} sortByYear />
+ <PostsList posts={getPostsWithUrl(blogPageArticles ?? [])} sortByYear />
<Pagination
aria-label={paginationAriaLabel}
current={pageNumber}
@@ -242,11 +247,7 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
{thematicsListTitle}
</Heading>
}
- items={getLinksItemData(
- thematicsList.map((thematic) =>
- getPageLinkFromRawData(thematic, 'thematic')
- )
- )}
+ items={getLinksItemData(thematicsList.map(convertTaxonomyToPageLink))}
/>
<LinksWidget
heading={
@@ -254,9 +255,7 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
{topicsListTitle}
</Heading>
}
- items={getLinksItemData(
- topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic'))
- )}
+ items={getLinksItemData(topicsList.map(convertTaxonomyToPageLink))}
/>
</PageSidebar>
</Page>
@@ -274,23 +273,23 @@ export const getStaticProps: GetStaticProps<BlogPageProps> = 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<BlogPageProps> = 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 },
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-26 23:09:02 +0000