fix: articles load more button cache issues (#360)

melniiv · web-flow · commit bb7bbd03dd93 · 2023-06-12T11:00:53.000+03:00
diff --git a/apps/events-helsinki/package.json b/apps/events-helsinki/package.json
@@ -71,7 +71,7 @@
     "react-datepicker": "^4.8.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "3.1.4",
-    "react-helsinki-headless-cms": "1.0.0-alpha151",
+    "react-helsinki-headless-cms": "1.0.0-alpha154",
     "react-i18next": "12.2.0",
     "react-scroll": "^1.8.7",
     "react-toastify": "^9.0.3",
diff --git a/apps/events-helsinki/src/pages/articles/index.tsx b/apps/events-helsinki/src/pages/articles/index.tsx
@@ -65,6 +65,10 @@ export default function ArticleArchive({
     networkStatus,
   } = usePostsQuery({
     notifyOnNetworkStatusChange: true,
+    // does not work without fetchPolicy: 'network-only',
+    fetchPolicy: 'network-only',
+    // not sure if nextFetchPolicy is needed
+    nextFetchPolicy: 'cache-first',
     variables: {
       first: BLOCK_SIZE,
       search: debouncedSearchTerm ?? '',
diff --git a/apps/hobbies-helsinki/package.json b/apps/hobbies-helsinki/package.json
@@ -71,7 +71,7 @@
     "react-datepicker": "^4.8.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "3.1.4",
-    "react-helsinki-headless-cms": "1.0.0-alpha151",
+    "react-helsinki-headless-cms": "1.0.0-alpha154",
     "react-i18next": "12.2.0",
     "react-scroll": "^1.8.7",
     "react-toastify": "^9.0.3",
diff --git a/apps/hobbies-helsinki/src/pages/articles/index.tsx b/apps/hobbies-helsinki/src/pages/articles/index.tsx
@@ -65,6 +65,10 @@ export default function ArticleArchive({
     networkStatus,
   } = usePostsQuery({
     notifyOnNetworkStatusChange: true,
+    // does not work without fetchPolicy: 'network-only',
+    fetchPolicy: 'network-only',
+    // not sure if nextFetchPolicy is needed
+    nextFetchPolicy: 'cache-first',
     variables: {
       first: BLOCK_SIZE,
       search: debouncedSearchTerm ?? '',
diff --git a/apps/sports-helsinki/package.json b/apps/sports-helsinki/package.json
@@ -79,7 +79,7 @@
     "react-datepicker": "^4.8.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "3.1.4",
-    "react-helsinki-headless-cms": "1.0.0-alpha151",
+    "react-helsinki-headless-cms": "1.0.0-alpha154",
     "react-i18next": "12.2.0",
     "react-leaflet": "4.2.0",
     "react-scroll": "^1.8.7",
diff --git a/apps/sports-helsinki/src/pages/articles/index.tsx b/apps/sports-helsinki/src/pages/articles/index.tsx
@@ -65,6 +65,10 @@ export default function ArticleArchive({
     networkStatus,
   } = usePostsQuery({
     notifyOnNetworkStatusChange: true,
+    // does not work without fetchPolicy: 'network-only',
+    fetchPolicy: 'network-only',
+    // not sure if nextFetchPolicy is needed
+    nextFetchPolicy: 'cache-first',
     variables: {
       first: BLOCK_SIZE,
       search: debouncedSearchTerm ?? '',
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -71,7 +71,7 @@
     "react-datepicker": "^4.8.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "3.1.4",
-    "react-helsinki-headless-cms": "1.0.0-alpha151",
+    "react-helsinki-headless-cms": "1.0.0-alpha154",
     "react-i18next": "12.2.0",
     "react-leaflet": "4.2.0",
     "react-toastify": "^9.0.3",
diff --git a/packages/components/src/apollo/EventsFederationApolloClient.ts b/packages/components/src/apollo/EventsFederationApolloClient.ts
@@ -203,6 +203,8 @@ class EventsFederationApolloClient {
                 };
               }
             ),
+            // works in combination with fetchPolicy: 'network-only'
+            posts: relayStylePagination(excludeArgs(['after'])),
             unifiedSearch: relayStylePagination(excludeArgs(['after'])),
           },
         },
diff --git a/packages/components/src/components/footer/Footer.tsx b/packages/components/src/components/footer/Footer.tsx
@@ -49,7 +49,7 @@ const FooterSection: FunctionComponent<FooterSectionProps> = ({
       >
         {footerMenu?.menuItems?.nodes?.map(
           // NOTE: HCRC-build sometimes fails - this type should not be needed.
-          (navigationItem) => (
+          (navigationItem: Menu['menuItems']['nodes'][number]) => (
             <Footer.Item
               className={styles.footerLink}
               key={navigationItem?.id}
diff --git a/packages/components/src/utils/headless-cms/service.tsx b/packages/components/src/utils/headless-cms/service.tsx
@@ -40,7 +40,7 @@ export const getAllArticles = async (
         locale: node.language.code.toLowerCase(),
         slug: node.slug,
       });
-      node.translations?.forEach((translation) => {
+      node.translations?.forEach((translation: PageType['translations']) => {
         if (
           translation?.uri &&
           translation.slug &&
@@ -88,7 +88,7 @@ export const getAllPages = async (
         locale: node.language.code.toLowerCase(),
         slug: node.slug,
       });
-      node.translations?.forEach((translation) => {
+      node.translations?.forEach((translation: PageType['translations']) => {
         if (
           translation?.uri &&
           translation.slug &&
diff --git a/yarn.lock b/yarn.lock
@@ -2686,7 +2686,7 @@ __metadata:
     react-datepicker: "npm:^4.8.0"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:3.1.4"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha151"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha154"
     react-i18next: "npm:12.2.0"
     react-leaflet: "npm:4.2.0"
     react-toastify: "npm:^9.0.3"
@@ -14303,7 +14303,7 @@ __metadata:
     react-datepicker: "npm:^4.8.0"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:3.1.4"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha151"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha154"
     react-i18next: "npm:12.2.0"
     react-scroll: "npm:^1.8.7"
     react-toastify: "npm:^9.0.3"
@@ -16488,7 +16488,7 @@ __metadata:
     react-datepicker: "npm:^4.8.0"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:3.1.4"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha151"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha154"
     react-i18next: "npm:12.2.0"
     react-scroll: "npm:^1.8.7"
     react-toastify: "npm:^9.0.3"
@@ -24324,9 +24324,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-helsinki-headless-cms@npm:1.0.0-alpha151":
-  version: 1.0.0-alpha151
-  resolution: "react-helsinki-headless-cms@npm:1.0.0-alpha151"
+"react-helsinki-headless-cms@npm:1.0.0-alpha154":
+  version: 1.0.0-alpha154
+  resolution: "react-helsinki-headless-cms@npm:1.0.0-alpha154"
   dependencies:
     hds-design-tokens: "npm:^2.3.0"
     html-react-parser: "npm:^1.4.8"
@@ -24340,7 +24340,7 @@ __metadata:
   peerDependenciesMeta:
     "@apollo/client":
       optional: true
-  checksum: c6734fde38259eb7a108ab5363bbd0995c87c9136cadc8705271ecc55cfec1b88b819fa4d7553ddcb6779b4ac48c140db7003270ae68ce4313e8ce2f12db7306
+  checksum: 0f2b57b1cb22d744dcf61089d061a0eea09d7fc3ed88a9401739caf607a82d2f4b2142390b94230d70fccb969e5bf4e48e9ad638f0bbc29ab7ca734efd20c6ab
   languageName: node
   linkType: hard
 
@@ -26713,7 +26713,7 @@ __metadata:
     react-datepicker: "npm:^4.8.0"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:3.1.4"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha151"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha154"
     react-i18next: "npm:12.2.0"
     react-leaflet: "npm:4.2.0"
     react-scroll: "npm:^1.8.7"

Original file line number	Diff line number	Diff line change
`@@ -203,6 +203,8 @@ class EventsFederationApolloClient {`
`203`	`203`	`};`
`204`	`204`	`}`
`205`	`205`	`),`
	`206`	`+ // works in combination with fetchPolicy: 'network-only'`
	`207`	`+ posts: relayStylePagination(excludeArgs(['after'])),`
`206`	`208`	`unifiedSearch: relayStylePagination(excludeArgs(['after'])),`
`207`	`209`	`},`
`208`	`210`	`},`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ const FooterSection: FunctionComponent<FooterSectionProps> = ({`
`49`	`49`	`>`
`50`	`50`	`{footerMenu?.menuItems?.nodes?.map(`
`51`	`51`	`// NOTE: HCRC-build sometimes fails - this type should not be needed.`
`52`		`- (navigationItem) => (`
	`52`	`+ (navigationItem: Menu['menuItems']['nodes'][number]) => (`
`53`	`53`	`<Footer.Item`
`54`	`54`	`className={styles.footerLink}`
`55`	`55`	`key={navigationItem?.id}`