fix: can not follow list in preview, close #3895

apps/desktop/layer/renderer/src/modules/entry-column/layouts/EntryListHeader.electron.tsx

@@ -183,13 +183,11 @@ const PreviewHeaderInfoWrapper: Component = ({ children }) => {
         className="text-accent cursor-button from-accent/10 via-accent/15 to-accent/20 hover:bg-accent animate-gradient-x -mx-4 mt-3.5 flex place-items-center justify-center gap-1 bg-gradient-to-r px-3 py-2 font-semibold transition-all duration-300 hover:text-white"
         onClick={() => {
           const { feedId, listId } = getRouteParams()
-          if (!feedId) return
           const feed = getFeedById(feedId)
-          if (!feed) return
           follow({
             isList: !!listId,
             id: listId ?? feedId,
-            url: feed.type === "feed" ? feed.url : undefined,
+            url: feed?.type === "feed" ? feed.url : undefined,
           })
         }}
       >

apps/desktop/layer/renderer/src/store/feed/hooks.ts

@@ -1,8 +1,8 @@
 import { views } from "@follow/constants"
 import type { FeedOrListRespModel } from "@follow/models/types"
 import type { EntryModel } from "@follow/store/entry/types"
-import { useFeedById } from "@follow/store/feed/hooks"
-import { useListById } from "@follow/store/list/hooks"
+import { useFeedById, usePrefetchFeed } from "@follow/store/feed/hooks"
+import { useListById, usePrefetchListById } from "@follow/store/list/hooks"
 import { getSubscriptionByFeedId } from "@follow/store/subscription/getter"
 import { useTranslation } from "react-i18next"
 
@@ -36,9 +36,11 @@ export const useFeedHeaderTitle = () => {
   const { feedId: currentFeedId, view, listId: currentListId } = useRouteParams()
 
   const feedTitle = useFeedById(currentFeedId, getPreferredTitle)
-
   const listTitle = useListById(currentListId, getPreferredTitle)
 
+  usePrefetchFeed(currentFeedId, { enabled: !feedTitle })
+  usePrefetchListById(currentListId, { enabled: !listTitle })
+
   switch (currentFeedId) {
     case ROUTE_FEED_PENDING: {
       return t(views[view]!.name, { ns: "common" })

packages/internal/store/src/feed/hooks.ts

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query"
 import { useCallback } from "react"
 
+import type { GeneralQueryOptions } from "../types"
 import { feedSyncServices, useFeedStore } from "./store"
 import type { FeedModel } from "./types"
 
@@ -49,18 +50,18 @@ export function useFeedByIdOrUrl(params: { id?: string; url?: string }): FeedMod
   return feedById || feedByUrl
 }
 
-export const usePrefetchFeed = (id: string, options?: { enabled?: boolean }) => {
+export const usePrefetchFeed = (id: string | undefined, options?: GeneralQueryOptions) => {
   return useQuery({
+    ...options,
     queryKey: ["feed", id],
     queryFn: () => feedSyncServices.fetchFeedById({ id }),
-    ...options,
   })
 }
 
-export const usePrefetchFeedByUrl = (url: string, options?: { enabled?: boolean }) => {
+export const usePrefetchFeedByUrl = (url: string, options?: GeneralQueryOptions) => {
   return useQuery({
+    ...options,
     queryKey: ["feed", url],
     queryFn: () => feedSyncServices.fetchFeedByUrl({ url }),
-    ...options,
   })
 }

packages/internal/store/src/list/hooks.ts

@@ -2,6 +2,7 @@ import type { FeedViewType } from "@follow/constants"
 import { useQuery } from "@tanstack/react-query"
 import { useCallback, useMemo } from "react"
 
+import type { GeneralQueryOptions } from "../types"
 import { whoami } from "../user/getters"
 import { useWhoami } from "../user/hooks"
 import { listSyncServices, useListStore } from "./store"
@@ -71,10 +72,10 @@ export const usePrefetchLists = () => {
   })
 }
 
-export const usePrefetchListById = (id: string | undefined) => {
+export const usePrefetchListById = (id: string | undefined, options?: GeneralQueryOptions) => {
   return useQuery({
+    ...options,
     queryKey: ["list", id],
     queryFn: () => listSyncServices.fetchListById({ id }),
-    enabled: !!id,
   })
 }