refactor: redo API helpers (#2971)

* new apiq and apiqErrorsAllowed

* getListQFn

* useApiMutation takes method directly

* fix hooks test

* some example conversions

* fix all the call sites

* turns out we don't actually want the signal for regular queries

* add comment about not passing the signal

* absorb hooks file into app/api/client.ts

* apiq -> q, api.methods -> api

* fix outdated comment about useErrorBoundary, which is now throwOnError

* fix safety test

* better handleResult

* apiqErrorsAllowed -> qErrorsAllowed, comments

Author: david-crespo

app/api/__tests__/hooks.spec.tsx app/api/__tests__/client.spec.tsxapp/api/__tests__/hooks.spec.tsx renamed to app/api/__tests__/client.spec.tsx

@@ -11,7 +11,7 @@ import { describe, expect, it, vi } from 'vitest'
 
 import { project } from '@oxide/api-mocks'
 
-import { apiq, useApiMutation } from '..'
+import { api, q, useApiMutation } from '..'
 import type { DiskCreate } from '../__generated__/Api'
 import { overrideOnce } from '../../../test/unit/server'
 
@@ -35,16 +35,17 @@ export function Wrapper({ children }: { children: React.ReactNode }) {
 
 const config = { wrapper: Wrapper }
 
-const renderProjectList = () => renderHook(() => useQuery(apiq('projectList', {})), config)
+const renderProjectList = () => renderHook(() => useQuery(q(api.projectList, {})), config)
 
 // 503 is a special key in the MSW server that returns a 503
 const renderGetProject503 = () =>
   renderHook(
-    () => useQuery(apiq('projectView', { path: { project: 'project-error-503' } })),
+    () => useQuery(q(api.projectView, { path: { project: 'project-error-503' } })),
     config
   )
 
-const renderCreateProject = () => renderHook(() => useApiMutation('projectCreate'), config)
+const renderCreateProject = () =>
+  renderHook(() => useApiMutation(api.projectCreate), config)
 
 const createParams = {
   body: { name: 'abc', description: '', hello: 'a' },
@@ -120,7 +121,7 @@ describe('useApiQuery', () => {
       function BadApiCall() {
         try {
           // oxlint-disable-next-line react-hooks/rules-of-hooks
-          useQuery(apiq('projectView', { path: { project: 'nonexistent' } }))
+          useQuery(q(api.projectView, { path: { project: 'nonexistent' } }))
         } catch (e) {
           onError(e)
         }
@@ -143,8 +144,8 @@ describe('useApiQuery', () => {
       const { result } = renderHook(
         () =>
           useQuery(
-            apiq(
-              'projectView',
+            q(
+              api.projectView,
               { path: { project: 'nonexistent' } },
               { throwOnError: false }
             )
@@ -205,7 +206,7 @@ describe('useApiMutation', () => {
     }
 
     it('passes through raw response', async () => {
-      const { result } = renderHook(() => useApiMutation('diskCreate'), config)
+      const { result } = renderHook(() => useApiMutation(api.diskCreate), config)
 
       act(() => result.current.mutate(diskCreate404Params))
 
@@ -219,7 +220,7 @@ describe('useApiMutation', () => {
     })
 
     it('parses error json if possible', async () => {
-      const { result } = renderHook(() => useApiMutation('diskCreate'), config)
+      const { result } = renderHook(() => useApiMutation(api.diskCreate), config)
 
       act(() => result.current.mutate(diskCreate404Params))
 
@@ -286,3 +287,12 @@ describe('useApiMutation', () => {
     })
   })
 })
+
+// we're relying on the name property of the API method for the queryKey, so we
+// need to make sure nothing changes in the generated client to cause the API
+// methods to not have a name
+it('apiq queryKey', () => {
+  const params = { path: { silo: 'abc' } }
+  const queryOptions = q(api.siloView, { path: { silo: 'abc' } })
+  expect(queryOptions.queryKey).toEqual(['siloView', params])
+})

app/api/__tests__/safety.spec.ts

@@ -35,7 +35,7 @@ const grepFiles = (s: string) =>
 it('mock-api is only referenced in test files', () => {
   expect(grepFiles('api-mocks')).toMatchInlineSnapshot(`
     [
-      "app/api/__tests__/hooks.spec.tsx",
+      "app/api/__tests__/client.spec.tsx",
       "mock-api/msw/db.ts",
       "test/e2e/instance-create.e2e.ts",
       "test/e2e/inventory.e2e.ts",