Use list fetches + setQueryData to prefetch items for *NameFromId cells (#2055)

get wild with prefetches for *NameFromId cells

Author: david-crespo

app/api/hooks.ts

@@ -219,6 +219,11 @@ export const wrapQueryClient = <A extends ApiClient>(api: A, queryClient: QueryC
     queryClient.invalidateQueries({ queryKey: [method], ...filters }),
   setQueryData: <M extends keyof A>(method: M, params: Params<A[M]>, data: Result<A[M]>) =>
     queryClient.setQueryData([method, params], data),
+  setQueryDataErrorsAllowed: <M extends keyof A>(
+    method: M,
+    params: Params<A[M]>,
+    data: ErrorsAllowed<Result<A[M]>, ApiError>
+  ) => queryClient.setQueryData([method, params, ERRORS_ALLOWED], data),
   fetchQuery: <M extends string & keyof A>(
     method: M,
     params: Params<A[M]>,

app/pages/project/disks/DisksPage.tsx

@@ -44,9 +44,27 @@ const EmptyState = () => (
 )
 
 DisksPage.loader = async ({ params }: LoaderFunctionArgs) => {
-  await apiQueryClient.prefetchQuery('diskList', {
-    query: { ...getProjectSelector(params), limit: 25 },
-  })
+  const { project } = getProjectSelector(params)
+  await Promise.all([
+    apiQueryClient.prefetchQuery('diskList', {
+      query: { project, limit: 25 },
+    }),
+
+    // fetch instances and preload into RQ cache so fetches by ID in
+    // InstanceLinkCell can be mostly instant yet gracefully fall back to
+    // fetching individually if we don't fetch them all here
+    apiQueryClient
+      .fetchQuery('instanceList', { query: { project, limit: 200 } })
+      .then((instances) => {
+        for (const instance of instances.items) {
+          apiQueryClient.setQueryData(
+            'instanceView',
+            { path: { instance: instance.id } },
+            instance
+          )
+        }
+      }),
+  ])
   return null
 }
 

app/pages/project/snapshots/SnapshotsPage.tsx

@@ -50,9 +50,32 @@ const EmptyState = () => (
 )
 
 SnapshotsPage.loader = async ({ params }: LoaderFunctionArgs) => {
-  await apiQueryClient.prefetchQuery('snapshotList', {
-    query: { ...getProjectSelector(params), limit: 25 },
-  })
+  const { project } = getProjectSelector(params)
+  await Promise.all([
+    apiQueryClient.prefetchQuery('snapshotList', {
+      query: { project, limit: 25 },
+    }),
+
+    // Fetch disks and preload into RQ cache so fetches by ID in DiskNameFromId
+    // can be mostly instant yet gracefully fall back to fetching individually
+    // if we don't fetch them all here. This has to be the *ErrorsAllowed
+    // version of setQueryData because the disk fetchs are also the errors
+    // allowed version. If we use regular setQueryData, nothing blows up; the
+    // data is just never found in the cache. Note that the disks that error
+    // (delete disks) are not prefetched here because they are (obviously) not
+    // in the disk list response.
+    apiQueryClient
+      .fetchQuery('diskList', { query: { project, limit: 200 } })
+      .then((disks) => {
+        for (const disk of disks.items) {
+          apiQueryClient.setQueryDataErrorsAllowed(
+            'diskView',
+            { path: { disk: disk.id } },
+            { type: 'success', data: disk }
+          )
+        }
+      }),
+  ])
   return null
 }
 

app/pages/system/networking/IpPoolPage.tsx

@@ -54,6 +54,15 @@ IpPoolPage.loader = async function ({ params }: LoaderFunctionArgs) {
       path: { pool },
       query: { limit: 25 }, // match QueryTable
     }),
+
+    // fetch silos and preload into RQ cache so fetches by ID in SiloNameFromId
+    // can be mostly instant yet gracefully fall back to fetching individually
+    // if we don't fetch them all here
+    apiQueryClient.fetchQuery('siloList', { query: { limit: 200 } }).then((silos) => {
+      for (const silo of silos.items) {
+        apiQueryClient.setQueryData('siloView', { path: { silo: silo.id } }, silo)
+      }
+    }),
   ])
   return null
 }