show what it looks like to get rid of apiQueryClient

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

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 }))
         },
       },