Fix 4484: reduce the Query count via InMemoryCache

packages/ui/src/app/pages/Forum/ForumCategory.tsx

@@ -22,6 +22,7 @@ import { THREADS_PER_PAGE } from '@/forum/constant'
 import { useForumCategory } from '@/forum/hooks/useForumCategory'
 import { useForumCategoryThreadPage } from '@/forum/hooks/useForumCategoryThreadPage'
 import { useForumCategoryThreads } from '@/forum/hooks/useForumCategoryThreads'
+import { useForumLatestPosts } from '@/forum/hooks/useForumLatestPosts'
 import { MemberStack, moderatorsSummary } from '@/memberships/components/MemberStack'
 
 import { ForumPageLayout } from './components/ForumPageLayout'
@@ -47,6 +48,8 @@ export const ForumCategory = () => {
     { perPage: THREADS_PER_PAGE, page }
   )
 
+  useForumLatestPosts()
+
   const { showModal } = useModal()
 
   if (isLoadingCategory) {

packages/ui/src/forum/hooks/useCategoryLatestPost.ts

@@ -1,7 +1,8 @@
+import * as Apollo from '@apollo/client'
 import { useEffect } from 'react'
 
 import { ForumPostOrderByInput, ForumThreadOrderByInput } from '@/common/api/queries'
-import { useGetForumPostsLazyQuery, useGetForumThreadsQuery } from '@/forum/queries'
+import { GetForumPostsDocument, useGetForumThreadsQuery } from '@/forum/queries'
 import { asForumPost, asForumThread } from '@/forum/types'
 
 export const useCategoryLatestPost = (category_eq: string) => {
@@ -11,6 +12,7 @@ export const useCategoryLatestPost = (category_eq: string) => {
       orderBy: ForumThreadOrderByInput.UpdatedAtDesc,
       limit: 1,
     },
+    fetchPolicy: 'cache-first',
   })
 
   useEffect(() => {
@@ -25,7 +27,11 @@ export const useCategoryLatestPost = (category_eq: string) => {
       })
   }, [threadData])
 
-  const [fetchPost, { data: postData, loading: loadingPosts }] = useGetForumPostsLazyQuery()
+  // const [fetchPost, { data: postData, loading: loadingPosts }] = useGetForumPostsLazyQuery()
+  const [fetchPost, { data: postData, loading: loadingPosts }] = Apollo.useLazyQuery(GetForumPostsDocument, {
+    fetchPolicy: 'cache-first',
+  })
+
   const rawPost = postData?.forumPosts[0]
 
   return {

packages/ui/src/forum/hooks/useForumCategoryThreadCount.ts

@@ -11,6 +11,7 @@ export const useForumCategoryThreadCount = (category_eq: string, isArchive?: boo
   }
   const { data } = useGetForumThreadsCountQuery({
     variables: { where: { category: { id_eq: category_eq }, status_json } },
+    fetchPolicy: 'cache-first',
   })
   return { threadCount: data?.forumThreadsConnection.totalCount }
 }

packages/ui/src/forum/hooks/useForumLatestPosts.ts

@@ -0,0 +1,48 @@
+import * as Apollo from '@apollo/client'
+import { useEffect, useState } from 'react'
+
+import { ForumPostOrderByInput } from '@/common/api/queries'
+import { useLocalStorage } from '@/common/hooks/useLocalStorage'
+import { GetForumPostsDocument } from '@/forum/queries'
+
+const orderBy = [ForumPostOrderByInput.UpdatedAtDesc]
+
+const useCacheWithExpiration = (key: string): Apollo.WatchQueryFetchPolicy => {
+  const [lastCacheTime, setLastCacheTime] = useLocalStorage<string>(key)
+  const [fetchPolicy, setFetchPolicy] = useState<Apollo.WatchQueryFetchPolicy>('cache-first')
+
+  useEffect(() => {
+    const currentDate = new Date()
+
+    try {
+      if (lastCacheTime != undefined) {
+        const lastCacheDate = new Date(lastCacheTime)
+        const timeDiff = Math.abs(currentDate.getTime() - lastCacheDate.getTime())
+
+        if (timeDiff < 1000 * 3600 * 24) {
+          setFetchPolicy('cache-first')
+          return
+        }
+      }
+    } catch (err) {
+      // ignore issue
+    }
+
+    setFetchPolicy('cache-and-network')
+    setLastCacheTime(currentDate.toDateString())
+  }, [lastCacheTime])
+
+  return fetchPolicy
+}
+
+export const useForumLatestPosts = () => {
+  const fetchPolicy = useCacheWithExpiration('last_LatestPosts')
+
+  const where = {}
+  const { data } = Apollo.useQuery(GetForumPostsDocument, {
+    variables: { where, orderBy, limit: 500 },
+    fetchPolicy: fetchPolicy,
+  })
+
+  return { posts: data?.forumPosts }
+}

packages/ui/src/forum/hooks/useForumPopularThreads.ts

@@ -21,6 +21,7 @@ export const useForumPopularThreads = ({ categoryId, page = 1, threadsPerPage =
       offset: (page - 1) * threadsPerPage,
       limit: threadsPerPage,
     },
+    fetchPolicy: 'cache-first',
   })
 
   return {

packages/ui/src/forum/hooks/useThreadLatestPost.ts

@@ -8,7 +8,7 @@ const orderBy = [ForumPostOrderByInput.UpdatedAtDesc]
 
 export const useThreadLatestPost = (threadId: string) => {
   const where = useMemo((): ForumPostWhereInput => ({ thread: { id_eq: threadId }, isVisible_eq: true }), [threadId])
-  const { data } = useGetForumPostsQuery({ variables: { where, orderBy, limit: 1 } })
+  const { data } = useGetForumPostsQuery({ variables: { where, orderBy, limit: 1 }, fetchPolicy: 'cache-first' })
   const rawPost = data?.forumPosts[0]
   return { post: rawPost && asForumPost(rawPost) }
 }