prefetch comments

alan2207 · Aug 11, 2024 · 71c1835 · 71c1835
1 parent 4d85e92
commit 71c1835
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/apps/react-vite/src/app/routes/app/discussions/discussions.tsx b/apps/react-vite/src/app/routes/app/discussions/discussions.tsx
@@ -1,6 +1,7 @@
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClient, useQueryClient } from '@tanstack/react-query';
 
 import { ContentLayout } from '@/components/layouts';
+import { getCommentsQueryOptions } from '@/features/comments/api/get-comments';
 import { getDiscussionsQueryOptions } from '@/features/discussions/api/get-discussions';
 import { CreateDiscussion } from '@/features/discussions/components/create-discussion';
 import { DiscussionsList } from '@/features/discussions/components/discussions-list';
@@ -15,13 +16,19 @@ export const discussionsLoader = (queryClient: QueryClient) => async () => {
 };
 
 export const DiscussionsRoute = () => {
+  const queryClient = useQueryClient();
   return (
     <ContentLayout title="Discussions">
       <div className="flex justify-end">
         <CreateDiscussion />
       </div>
       <div className="mt-4">
-        <DiscussionsList />
+        <DiscussionsList
+          onDiscussionPrefetch={(id) => {
+            // Prefetch the comments data when the user hovers over the link in the list
+            queryClient.prefetchQuery(getCommentsQueryOptions(id));
+          }}
+        />
       </div>
     </ContentLayout>
   );

diff --git a/apps/react-vite/src/features/discussions/components/discussions-list.tsx b/apps/react-vite/src/features/discussions/components/discussions-list.tsx
@@ -10,7 +10,13 @@ import { useDiscussions } from '../api/get-discussions';
 
 import { DeleteDiscussion } from './delete-discussion';
 
-export const DiscussionsList = () => {
+export type DiscussionsListProps = {
+  onDiscussionPrefetch?: (id: string) => void;
+};
+
+export const DiscussionsList = ({
+  onDiscussionPrefetch,
+}: DiscussionsListProps) => {
   const discussionsQuery = useDiscussions();
   const queryClient = useQueryClient();
 
@@ -48,6 +54,7 @@ export const DiscussionsList = () => {
                 onMouseEnter={() => {
                   // Prefetch the discussion data when the user hovers over the link
                   queryClient.prefetchQuery(getDiscussionQueryOptions(id));
+                  onDiscussionPrefetch?.(id);
                 }}
                 to={`./${id}`}
               >