From e4f70b01b1c14fd194d306b45a1ca87efa0f1468 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Wed, 4 Dec 2024 17:22:12 -0600
Subject: [PATCH] show what it looks like to get rid of apiQueryClient

---
 app/api/client.ts          | 12 ++++++++++++
 app/pages/ProjectsPage.tsx | 14 +++++---------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/app/api/client.ts b/app/api/client.ts
index b1b6bd380..3977be00d 100644
--- a/app/api/client.ts
+++ b/app/api/client.ts
@@ -65,6 +65,18 @@ export const queryClient = new QueryClient({
 // don't have access to context
 export const apiQueryClient = wrapQueryClient(api.methods, queryClient)
 
+/**
+ * Invalidate all cached queries for a given endpoint.
+ *
+ * Note that we only take a single argument, `method`, rather than allowing
+ * the full query key `[query, params]` to be specified. This is to avoid
+ * accidentally overspecifying and therefore failing to match the desired query.
+ * The params argument can be added in if we ever have a use case for it.
+ */
+export function invalidate(method: keyof typeof api.methods) {
+  queryClient.invalidateQueries({ queryKey: [method] })
+}
+
 // used to retrieve the typed query client in components. doesn't need to exist:
 // we could import apiQueryClient directly everywhere, but the change is noisy
 export const useApiQueryClient = () => apiQueryClient
diff --git a/app/pages/ProjectsPage.tsx b/app/pages/ProjectsPage.tsx
index 5b2134d40..1fd0ccc92 100644
--- a/app/pages/ProjectsPage.tsx
+++ b/app/pages/ProjectsPage.tsx
@@ -10,8 +10,9 @@ import { useCallback, useMemo } from 'react'
 import { Outlet, useNavigate } from 'react-router-dom'
 
 import {
-  apiQueryClient,
+  apiq,
   getListQFn,
+  invalidate,
   queryClient,
   useApiMutation,
   type Project,
@@ -64,9 +65,7 @@ export function Component() {
 
   const { mutateAsync: deleteProject } = useApiMutation('projectDelete', {
     onSuccess() {
-      // TODO: figure out if this is invalidating as expected, can we leave out the query
-      // altogether, etc. Look at whether limit param matters.
-      apiQueryClient.invalidateQueries('projectList')
+      invalidate('projectList')
     },
   })
 
@@ -77,11 +76,8 @@ export function Component() {
         onActivate: () => {
           // the edit view has its own loader, but we can make the modal open
           // instantaneously by preloading the fetch result
-          apiQueryClient.setQueryData(
-            'projectView',
-            { path: { project: project.name } },
-            project
-          )
+          const queryOptions = apiq('projectView', { path: { project: project.name } })
+          queryClient.setQueryData(queryOptions.queryKey, project)
           navigate(pb.projectEdit({ project: project.name }))
         },
       },