preFetch | manual cache

Author: diazdesandi

03-issuesApp/src/issues/components/issue-list/IssueCard.vue

@@ -4,6 +4,7 @@ import VueMarkdown from 'vue-markdown-render';
 
 import { Issue, State } from 'src/issues/interfaces/issue';
 import { timeSince } from 'src/shared/helpers/time-sync';
+import useIssue from 'src/issues/composables/useIssue';
 
 interface Props {
   issue: Issue;
@@ -12,10 +13,24 @@ interface Props {
 const props = defineProps<Props>();
 
 const issue = toRef(props, 'issue');
+
+const { prefetchIssue, setIssueCacheData } = useIssue(issue.value.number, { autoload: false });
+
 </script>
 
 <template>
-  <q-card class="text-black col-12 q-mb-md" flat bordered>
+  <!-- <q-card
+    @mouseenter="prefetchIssue(issue.number)"
+    class="text-black col-12 q-mb-md"
+    flat
+    bordered
+  > -->
+  <q-card
+    @mouseenter="setIssueCacheData(issue)"
+    class="text-black col-12 q-mb-md"
+    flat
+    bordered
+  >
     <q-item>
       <q-item-section avatar>
         <q-avatar>

03-issuesApp/src/issues/composables/useIssue.ts

@@ -1,26 +1,48 @@
 import { githubApi } from 'src/api/githubApi';
 import { Issue } from '../interfaces/issue';
-import { useQuery } from '@tanstack/vue-query';
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
 // import { computed } from 'vue';
 
+interface Options {
+  // Autoload Issue and comments
+  autoload?: boolean;
+}
+
+const sleep = (): Promise<boolean> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, 2000);
+  });
+};
+
 const getIssue = async (issueNumber: number): Promise<Issue> => {
+  await sleep();
+
   const { data } = await githubApi.get<Issue>(`/issues/${issueNumber}`);
   return data;
 };
 
 const getIssueComments = async (issueNumber: number): Promise<Issue[]> => {
+  await sleep();
+
   const { data } = await githubApi.get<Issue[]>(
     `/issues/${issueNumber}/comments`
   );
   return data;
 };
 
-const useIssue = (issueNumber: number) => {
+const useIssue = (issueNumber: number, options?: Options) => {
+  const { autoload = true } = options || {};
+
+  const queryClient = useQueryClient();
+
   const issueQuery = useQuery(
     ['issue', issueNumber],
     () => getIssue(issueNumber),
     {
       staleTime: 1000 * 60,
+      enabled: autoload,
     }
   );
 
@@ -30,14 +52,40 @@ const useIssue = (issueNumber: number) => {
     // () => getIssueComments(issueQuery.data.value?.number || 0),
     {
       staleTime: 1000 * 60,
+      enabled: autoload,
       // Cambiar cuando exista un valor
       // enabled: computed(() => !!issueQuery.data.value),
     }
   );
 
+  const prefetchIssue = (issueNumber: number) => {
+    queryClient.prefetchQuery(
+      ['issue', issueNumber],
+      () => getIssue(issueNumber),
+      {
+        staleTime: 1000 * 60,
+      }
+    );
+    queryClient.prefetchQuery(
+      ['issue', issueNumber, 'comments'],
+      () => getIssueComments(issueNumber),
+      {
+        staleTime: 1000 * 60,
+      }
+    );
+  };
+
+  const setIssueCacheData = (issue: Issue) => {
+    queryClient.setQueryData(['issue', issue.number], issue);
+  };
+
   return {
     issueQuery,
     issueCommentsQuery,
+
+    // Methods
+    prefetchIssue,
+    setIssueCacheData,
   };
 };
 

03-issuesApp/src/issues/pages/IssuePage.vue

@@ -20,9 +20,9 @@ const { issueQuery, issueCommentsQuery } = useIssue(+id);
   <IssueCard v-else-if="issueQuery.data.value" :issue="issueQuery.data.value" />
   <p v-else>Issue #{{ id }} not found</p>
   <!-- Comentarios -->
-  <LoaderSpinner :thickness="1" size="1.5rem" :show-text="false" />
+  <LoaderSpinner v-if="issueCommentsQuery.isLoading.value" :thickness="1" size="1.5rem" :show-text="false" />
 
-  <div class="column" v-if="issueCommentsQuery.data.value">
+  <div class="column" v-else-if="issueCommentsQuery.data.value">
     <span class="text-h5 q-mb-md"
       >Comments ({{ issueCommentsQuery.data.value?.length }})</span
     >