chore: display initial posts, thematics & topics

By fetching the data in getStaticProps, I can display the data even
for users with Javascript disabled.

3 files changed, 47 insertions, 17 deletions

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 51db760..e725ea8 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -6,7 +6,12 @@ import PostsList from '@components/PostsList/PostsList';
 import Sidebar from '@components/Sidebar/Sidebar';
 import Spinner from '@components/Spinner/Spinner';
 import { ThematicsList, TopicsList } from '@components/Widgets';
-import { getPublishedPosts } from '@services/graphql/queries';
+import {
+  getAllThematics,
+  getAllTopics,
+  getPostsTotal,
+  getPublishedPosts,
+} from '@services/graphql/queries';
 import styles from '@styles/pages/Page.module.scss';
 import { NextPageWithLayout } from '@ts/types/app';
 import { BlogPageProps, PostsList as PostsListData } from '@ts/types/blog';
@@ -20,7 +25,12 @@ import { useIntl } from 'react-intl';
 import { Blog as BlogSchema, Graph, WebPage } from 'schema-dts';
 import useSWRInfinite from 'swr/infinite';
 
-const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
+const Blog: NextPageWithLayout<BlogPageProps> = ({
+  allThematics,
+  allTopics,
+  firstPosts,
+  totalPosts,
+}) => {
   const intl = useIntl();
   const lastPostRef = useRef<HTMLSpanElement>(null);
   const router = useRouter();
@@ -39,9 +49,9 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
   const { data, error, size, setSize } = useSWRInfinite(
     getKey,
     getPublishedPosts,
-    { fallback }
+    { fallbackData: [firstPosts] }
   );
-  const [totalPostsCount, setTotalPostsCount] = useState<number>(0);
+  const [totalPostsCount, setTotalPostsCount] = useState<number>(totalPosts);
 
   useEffect(() => {
     if (data) setTotalPostsCount(data[0].pageInfo.total);
@@ -158,12 +168,6 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
       >
         <PostHeader title={title} meta={{ results: totalPostsCount }} />
         <div className={styles.body}>
-          <noscript>
-            {intl.formatMessage({
-              defaultMessage: 'Javascript is required to load the posts.',
-              description: 'BlogPage: noscript tag',
-            })}
-          </noscript>
           {getPostsList()}
           {hasNextPage && (
             <>
@@ -182,6 +186,12 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
                   description: 'BlogPage: load more text',
                 })}
               </Button>
+              <noscript>
+                {intl.formatMessage({
+                  defaultMessage: 'Javascript is required to load more posts.',
+                  description: 'BlogPage: noscript tag',
+                })}
+              </noscript>
             </>
           )}
         </div>
@@ -193,12 +203,14 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
           })}
         >
           <ThematicsList
+            initialData={allThematics}
             title={intl.formatMessage({
               defaultMessage: 'Thematics',
               description: 'BlogPage: thematics list widget title',
             })}
           />
           <TopicsList
+            initialData={allTopics}
             title={intl.formatMessage({
               defaultMessage: 'Topics',
               description: 'BlogPage: topics list widget title',
@@ -220,17 +232,21 @@ export const getStaticProps: GetStaticProps = async (
     defaultMessage: 'Blog',
     description: 'BlogPage: breadcrumb item',
   });
-  const data = await getPublishedPosts({ first: settings.postsPerPage });
+  const firstPosts = await getPublishedPosts({ first: settings.postsPerPage });
+  const totalPosts = await getPostsTotal();
+  const allThematics = await getAllThematics();
+  const allTopics = await getAllTopics();
   const { locale } = context;
   const translation = await loadTranslation(locale);
 
   return {
     props: {
+      allThematics,
+      allTopics,
       breadcrumbTitle,
-      fallback: {
-        '/api/posts': data,
-      },
+      firstPosts,
       locale,
+      totalPosts,
       translation,
     },
   };
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 910c02c..82af2ff 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -4,7 +4,11 @@ import PostPreview from '@components/PostPreview/PostPreview';
 import Sidebar from '@components/Sidebar/Sidebar';
 import Spinner from '@components/Spinner/Spinner';
 import { RelatedThematics, ToC, TopicsList } from '@components/Widgets';
-import { getAllTopicsSlug, getTopicBySlug } from '@services/graphql/queries';
+import {
+  getAllTopics,
+  getAllTopicsSlug,
+  getTopicBySlug,
+} from '@services/graphql/queries';
 import styles from '@styles/pages/Page.module.scss';
 import { NextPageWithLayout } from '@ts/types/app';
 import { ArticleMeta } from '@ts/types/articles';
@@ -20,7 +24,7 @@ import { useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { Article as Article, Graph, WebPage } from 'schema-dts';
 
-const Topic: NextPageWithLayout<TopicProps> = ({ topic }) => {
+const Topic: NextPageWithLayout<TopicProps> = ({ topic, allTopics }) => {
   const intl = useIntl();
   const relatedThematics = useRef<ThematicPreview[]>([]);
   const router = useRouter();
@@ -161,6 +165,7 @@ const Topic: NextPageWithLayout<TopicProps> = ({ topic }) => {
         >
           <RelatedThematics thematics={relatedThematics.current} />
           <TopicsList
+            initialData={allTopics}
             title={intl.formatMessage({
               defaultMessage: 'Others topics',
               description: 'TopicPage: topics list widget title',
@@ -185,10 +190,12 @@ export const getStaticProps: GetStaticProps = async (
   const translation = await loadTranslation(locale);
   const { slug } = context.params as PostParams;
   const topic = await getTopicBySlug(slug);
+  const allTopics = await getAllTopics();
   const breadcrumbTitle = topic.title;
 
   return {
     props: {
+      allTopics,
       breadcrumbTitle,
       locale,
       topic,
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index 166e0bb..d737ea7 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -5,6 +5,7 @@ import Sidebar from '@components/Sidebar/Sidebar';
 import Spinner from '@components/Spinner/Spinner';
 import { RelatedTopics, ThematicsList, ToC } from '@components/Widgets';
 import {
+  getAllThematics,
   getAllThematicsSlug,
   getThematicBySlug,
 } from '@services/graphql/queries';
@@ -23,7 +24,10 @@ import { useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { Article, Graph, WebPage } from 'schema-dts';
 
-const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
+const Thematic: NextPageWithLayout<ThematicProps> = ({
+  thematic,
+  allThematics,
+}) => {
   const intl = useIntl();
   const relatedTopics = useRef<TopicPreview[]>([]);
   const router = useRouter();
@@ -151,6 +155,7 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
         >
           <RelatedTopics topics={relatedTopics.current} />
           <ThematicsList
+            initialData={allThematics}
             title={intl.formatMessage({
               defaultMessage: 'Others thematics',
               description: 'ThematicPage: thematics list widget title',
@@ -175,10 +180,12 @@ export const getStaticProps: GetStaticProps = async (
   const translation = await loadTranslation(locale);
   const { slug } = context.params as PostParams;
   const thematic = await getThematicBySlug(slug);
+  const allThematics = await getAllThematics();
   const breadcrumbTitle = thematic.title;
 
   return {
     props: {
+      allThematics,
       breadcrumbTitle,
       locale,
       thematic,