diff options
| -rw-r--r-- | src/pages/article/[slug].tsx | 9 | ||||
| -rw-r--r-- | src/utils/hooks/use-article.tsx | 16 | ||||
| -rw-r--r-- | src/utils/hooks/use-comments.tsx | 17 |
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> ); |
