Use list fetches + setQueryData to prefetch items for *NameFromId cells

[david-crespo]

Closes #1946

I love this. Using React Query's cache as a go-between, we can do the list prefetch idea with perfect fallback behavior (if the disk is not in the list we fetched, fetch it directly) without having to change the calling code.

I decided to limit each fetch to 200 items, as in general that should cover us. We could easily bump this higher if we wanted — no other code changes are required. In both FF and Chrome on M1 Mac, I timed how long it takes to loop through the items and call setQueryData on 200 items and it took 2-4ms. With a possibly more typical 10 items, it takes under 1ms as one would expect.

diff showing code changes for testing perf

diff --git a/app/pages/project/snapshots/SnapshotsPage.tsx b/app/pages/project/snapshots/SnapshotsPage.tsx
index 0d09cd89..9216acc4 100644
--- a/app/pages/project/snapshots/SnapshotsPage.tsx
+++ b/app/pages/project/snapshots/SnapshotsPage.tsx
@@ -67,6 +67,7 @@ SnapshotsPage.loader = async ({ params }: LoaderFunctionArgs) => {
     apiQueryClient
       .fetchQuery('diskList', { query: { project, limit: 200 } })
       .then((disks) => {
+        const t = performance.now()
         for (const disk of disks.items) {
           apiQueryClient.setQueryDataErrorsAllowed(
             'diskView',
@@ -74,6 +75,7 @@ SnapshotsPage.loader = async ({ params }: LoaderFunctionArgs) => {
             { type: 'success', data: disk }
           )
         }
+        console.log(performance.now() - t, 'ms')
       }),
   ])
   return null
diff --git a/mock-api/disk.ts b/mock-api/disk.ts
index c58ff18e..4b3cab6a 100644
--- a/mock-api/disk.ts
+++ b/mock-api/disk.ts
@@ -147,13 +147,13 @@ export const disks: Json<Disk>[] = [
     block_size: 2048,
   },
   // put a ton of disks in project 2 so we can use it to test pagination
-  ...new Array(55).fill(0).map((_, i) => {
-    const numStr = (i + 1).toString().padStart(2, '0')
+  ...new Array(1000).fill(0).map((_, i) => {
+    const numStr = (i + 30).toString().padStart(2, '0')
     return {
       id: '9747d936-795d-4d76-8ee0-15561f4cbb' + numStr,
       name: 'disk-' + numStr,
       description: '',
-      project_id: project2.id,
+      project_id: project.id,
       time_created: new Date().toISOString(),
       time_modified: new Date().toISOString(),
       state: { state: 'detached' as const },

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Mar 12, 2024 4:04pm

[david-crespo]

This is needed because there's no other way to sneak ERRORS_ALLOWED into the query key to match useApiQueryErrorsAllowed.

[charliepark]

Amazing!

Also, thanks for including the diff w/ code changes for perf testing