refactor(ssr-qeuries): use hooks for all (#177)

src/app/providers/RootStoreProvider.tsx

@@ -1,13 +1,10 @@
 'use client'
 
 import { FC, ReactNode, cloneElement, Children, isValidElement } from 'react'
-import { usePathname, useParams } from 'next/navigation'
 import { Provider } from 'mobx-react'
 import { enableStaticRendering } from 'mobx-react-lite'
 
 import { useStore } from '@/stores/init'
-import { THREAD } from '@/constant/thread'
-// import TYPE from '@/constant/type'
 
 import {
   useSession,
@@ -18,10 +15,10 @@ import {
   usePagedPosts,
   useGroupedKanbanPosts,
   usePagedChangelogs,
-  parseThread,
-  parseWallpaper,
-  parseDashboard,
-  parseCommunity,
+  useWallpaper,
+  useDashboard,
+  //
+  useThreadParam,
 } from '../queries'
 
 enableStaticRendering(typeof window === 'undefined')
@@ -32,51 +29,23 @@ type TProps = {
 }
 
 const RootStoreWrapper: FC<TProps> = ({ children, token }) => {
-  // console.log('## init in layout, load community info, dashboard info')
-  const pathname = usePathname()
-  const params = useParams()
   const userHasLogin = !!token
 
-  const communitySlug = parseCommunity(params.community as string)
-
-  // console.log('## pathname: ', pathname)
-  const activeThread = parseThread(pathname)
+  const activeThread = useThreadParam()
   // console.log('## activeThread: ', activeThread)
 
-  const skip = !communitySlug
-
   const { sesstion } = useSession()
-  const { community } = useCommunity({ skip, userHasLogin })
-
-  const { pagedPosts } = usePagedPosts({
-    skip: !(activeThread === THREAD.POST && !params.id),
-    userHasLogin,
-  })
-
-  const { pagedChangelogs } = usePagedChangelogs({
-    skip: activeThread !== THREAD.CHANGELOG,
-    userHasLogin,
-  })
-
-  const { post } = usePost({
-    skip: !(activeThread === THREAD.POST && params.id),
-    userHasLogin,
-  })
-
-  const { changelog } = useChangelog({
-    skip: !(activeThread === THREAD.CHANGELOG && params.id),
-    userHasLogin,
-  })
-
-  const { groupedKanbanPosts } = useGroupedKanbanPosts({
-    skip: activeThread !== THREAD.KANBAN,
-    userHasLogin,
-  })
+  const { community } = useCommunity(userHasLogin)
 
-  const { tags } = useTags({ skip, userHasLogin })
+  const { pagedPosts } = usePagedPosts(userHasLogin)
+  const { pagedChangelogs } = usePagedChangelogs(userHasLogin)
+  const { post } = usePost(userHasLogin)
+  const { changelog } = useChangelog(userHasLogin)
+  const { groupedKanbanPosts } = useGroupedKanbanPosts(userHasLogin)
+  const { tags } = useTags()
 
-  const wallpaper = !skip ? parseWallpaper(community) : {}
-  const dashboard = !skip ? parseDashboard(community, pathname) : {}
+  const wallpaper = useWallpaper(community)
+  const dashboard = useDashboard(community)
 
   const store = useStore({
     ...sesstion,

src/app/queries/helper.ts

@@ -1,13 +1,12 @@
 import { useMemo } from 'react'
 
 import { reject, includes, values, isEmpty, mergeRight } from 'ramda'
-import { useParams, useSearchParams } from 'next/navigation'
+import { useParams, useSearchParams, usePathname } from 'next/navigation'
 
 import type {
   TCommunity,
   TThread,
   TNameAlias,
-  TDashboard,
   TDashboardPath,
   TDashboardBaseInfoRoute,
   TDashboardSEORoute,
@@ -31,7 +30,7 @@ import {
 } from '@/constant/route'
 import { removeEmptyValuesFromObject } from '@/helper'
 
-import type { TGQSSRResult, TParsedWallpaper, TDashboardTab } from './spec'
+import type { TGQSSRResult, TParsedWallpaper, TParseDashboard, TDashboardTab } from './spec'
 import { ARTICLES_FILTER } from './constant'
 
 export const commonRes = (result): TGQSSRResult => {
@@ -48,6 +47,18 @@ export const useCommunityParam = (): string => {
   return useMemo(() => parseCommunity(params.community as string), [params])
 }
 
+export const useThreadParam = (): string => {
+  const pathname = usePathname()
+
+  return useMemo(() => parseThread(pathname), [pathname])
+}
+
+export const useIdParam = (): string => {
+  const params = useParams()
+
+  return useMemo(() => params.id as string, [params])
+}
+
 /**
  * common url filter logic for all paged articles queries
  */
@@ -192,10 +203,6 @@ const parseDashboardThread = (pathname: string): TDashboardTab => {
   }
 }
 
-type TParseDashboard = TDashboard & {
-  initSettings: TDashboard
-}
-
 export const parseDashboard = (community: TCommunity, pathname: string): TParseDashboard => {
   const { dashboard, moderators } = community
   const {

src/app/queries/index.ts

@@ -4,9 +4,12 @@
  * https://formidable.com/open-source/urql/docs/api/core/#operationresult
  */
 import { useQuery } from '@urql/next'
+import { usePathname } from 'next/navigation'
 
+import type { TCommunity } from '@/spec'
 import { P } from '@/schemas'
 import { DEFAULT_THEME } from '@/config'
+import { THREAD } from '@/constant/thread'
 
 import type {
   TSessionRes,
@@ -17,14 +20,23 @@ import type {
   TPagedPostsRes,
   TGroupedKanbanPostsRes,
   TPagedChangelogsRes,
-  TSSRQueryOpt,
-  TTagsFilter,
+  TParsedWallpaper,
+  TParseDashboard,
 } from './spec'
-import { GQ_OPTION, TAGS_FILTER } from './constant'
 
-import { commonRes, usePagedArticlesParams, useArticleParams, useCommunityParam } from './helper'
+import {
+  commonRes,
+  usePagedArticlesParams,
+  useArticleParams,
+  useCommunityParam,
+  useThreadParam,
+  useIdParam,
+  //
+  parseWallpaper,
+  parseDashboard,
+} from './helper'
 
-export { parseCommunity, parseThread, parseWallpaper, parseDashboard } from './helper'
+export { parseCommunity, useThreadParam } from './helper'
 
 export const useSession = (): TSessionRes => {
   const [result] = useQuery({
@@ -51,18 +63,16 @@ export const useSession = (): TSessionRes => {
   }
 }
 
-export const useCommunity = (_opt: TSSRQueryOpt = {}): TCommunityRes => {
-  const opt = { ...GQ_OPTION, ..._opt }
+export const useCommunity = (userHasLogin: boolean): TCommunityRes => {
   const slug = useCommunityParam()
 
   const [result] = useQuery({
     query: P.community,
     variables: {
       slug,
-      userHasLogin: opt.userHasLogin,
+      userHasLogin,
     },
-    pause: opt.skip,
-    requestPolicy: opt.requestPolicy,
+    // pause: opt.skip,
   })
 
   return {
@@ -71,22 +81,17 @@ export const useCommunity = (_opt: TSSRQueryOpt = {}): TCommunityRes => {
   }
 }
 
-export const useTags = (_opt: TSSRQueryOpt = {}): TTagsRes => {
-  const opt = { ...GQ_OPTION, ..._opt }
+export const useTags = (): TTagsRes => {
   const community = useCommunityParam()
-  const { thread } = TAGS_FILTER
+  const _thread = useThreadParam()
+  const thread = _thread.toUpperCase()
 
   const [result] = useQuery({
     query: P.pagedArticleTags,
     variables: {
-      filter: {
-        community,
-        thread: thread.toUpperCase(),
-      },
-      userHasLogin: opt.userHasLogin,
+      filter: { community, thread },
     },
-    pause: opt.skip,
-    requestPolicy: opt.requestPolicy,
+    // pause: opt.skip,
   })
 
   return {
@@ -95,18 +100,15 @@ export const useTags = (_opt: TSSRQueryOpt = {}): TTagsRes => {
   }
 }
 
-export const usePagedPosts = (_opt: TSSRQueryOpt = {}): TPagedPostsRes => {
-  const opt = { ...GQ_OPTION, ..._opt }
+export const usePagedPosts = (userHasLogin: boolean): TPagedPostsRes => {
   const filter = usePagedArticlesParams()
+  const thread = useThreadParam()
+  const id = useIdParam()
 
   const [result] = useQuery({
     query: P.pagedPosts,
-    variables: {
-      filter,
-      userHasLogin: opt.userHasLogin,
-    },
-    pause: opt.skip,
-    requestPolicy: opt.requestPolicy,
+    variables: { filter, userHasLogin },
+    pause: !(thread === THREAD.POST && !id),
   })
 
   return {
@@ -115,18 +117,14 @@ export const usePagedPosts = (_opt: TSSRQueryOpt = {}): TPagedPostsRes => {
   }
 }
 
-export const usePagedChangelogs = (_opt: TSSRQueryOpt = {}): TPagedChangelogsRes => {
-  const opt = { ...GQ_OPTION, ..._opt }
+export const usePagedChangelogs = (userHasLogin: boolean): TPagedChangelogsRes => {
   const filter = usePagedArticlesParams()
+  const thread = useThreadParam()
 
   const [result] = useQuery({
     query: P.pagedChangelogs,
-    variables: {
-      filter,
-      userHasLogin: opt.userHasLogin,
-    },
-    pause: opt.skip,
-    requestPolicy: opt.requestPolicy,
+    variables: { filter, userHasLogin },
+    pause: thread !== THREAD.CHANGELOG,
   })
 
   return {
@@ -135,20 +133,14 @@ export const usePagedChangelogs = (_opt: TSSRQueryOpt = {}): TPagedChangelogsRes
   }
 }
 
-export const usePost = (_opt: TSSRQueryOpt = {}): TPostRes => {
-  const opt = { ...GQ_OPTION, ..._opt }
-
+export const usePost = (userHasLogin: boolean): TPostRes => {
   const { community, id } = useArticleParams()
+  const thread = useThreadParam()
 
   const [result] = useQuery({
     query: P.post,
-    variables: {
-      community,
-      id,
-      userHasLogin: opt.userHasLogin,
-    },
-    pause: opt.skip,
-    requestPolicy: opt.requestPolicy,
+    variables: { community, id, userHasLogin },
+    pause: !(thread === THREAD.POST && id),
   })
 
   return {
@@ -157,19 +149,14 @@ export const usePost = (_opt: TSSRQueryOpt = {}): TPostRes => {
   }
 }
 
-export const useChangelog = (_opt: TSSRQueryOpt = {}): TChangelogRes => {
-  const opt = { ...GQ_OPTION, ..._opt }
+export const useChangelog = (userHasLogin: boolean): TChangelogRes => {
   const { community, id } = useArticleParams()
+  const thread = useThreadParam()
 
   const [result] = useQuery({
     query: P.changelog,
-    variables: {
-      community,
-      id,
-      userHasLogin: opt.userHasLogin,
-    },
-    pause: opt.skip,
-    requestPolicy: opt.requestPolicy,
+    variables: { community, id, userHasLogin },
+    pause: !(thread === THREAD.CHANGELOG && id),
   })
 
   return {
@@ -178,21 +165,28 @@ export const useChangelog = (_opt: TSSRQueryOpt = {}): TChangelogRes => {
   }
 }
 
-export const useGroupedKanbanPosts = (_opt: TSSRQueryOpt = {}): TGroupedKanbanPostsRes => {
+export const useGroupedKanbanPosts = (userHasLogin: boolean): TGroupedKanbanPostsRes => {
   const community = useCommunityParam()
-  const opt = { ...GQ_OPTION, ..._opt }
+  const thread = useThreadParam()
 
   const [result] = useQuery({
     query: P.groupedKanbanPosts,
-    variables: {
-      community,
-    },
-    pause: opt.skip,
-    requestPolicy: opt.requestPolicy,
+    variables: { community, userHasLogin },
+    pause: thread !== THREAD.KANBAN,
   })
 
   return {
     ...commonRes(result),
     groupedKanbanPosts: result.data?.groupedKanbanPosts,
   }
 }
+
+export const useWallpaper = (community: TCommunity): TParsedWallpaper => {
+  return parseWallpaper(community)
+}
+
+export const useDashboard = (community: TCommunity): TParseDashboard => {
+  const pathname = usePathname()
+
+  return parseDashboard(community, pathname)
+}

src/app/queries/spec.d.ts

@@ -11,6 +11,7 @@ import type {
   TDashboardLayoutRoute,
   TDashboardAliasRoute,
   TArticle,
+  TDashboard,
 } from '@/spec'
 
 export type TSessionRes = TGQSSRResult & {
@@ -72,3 +73,7 @@ export type TDashboardTab = {
   layoutTab?: TDashboardLayoutRoute
   aliasTab?: TDashboardAliasRoute
 }
+
+export type TParseDashboard = TDashboard & {
+  initSettings: TDashboard
+}