aaaaah got it to wrap the api object too

Author: david-crespo

apps/web-console/src/app-layout/AppLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import { useApiData, api } from '@oxide/api'
+import { useApi } from '@oxide/api'
 import { GlobalNav, OperationList, ProjectList } from '@oxide/ui'
 import Wordmark from '../assets/wordmark.svg'
 
@@ -56,7 +56,7 @@ const GlobalNavContainer = styled.header`
 `
 
 export default ({ children }: AppLayoutProps) => {
-  const { data: projects } = useApiData(api, 'apiProjectsGet', {})
+  const { data: projects } = useApi('apiProjectsGet', {})
 
   return (
     <Wrapper>

apps/web-console/src/pages/instance/InstancePage.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useParams } from 'react-router-dom'
 import styled from 'styled-components'
 
-import { useApiData, api } from '@oxide/api'
+import { useApi } from '@oxide/api'
 
 import {
   Breadcrumbs,
@@ -74,7 +74,7 @@ const InstancePage = () => {
   const breadcrumbs = useBreadcrumbs()
   const { projectName, instanceName } = useParams<Params>()
 
-  const { data, error } = useApiData(api, 'apiProjectInstancesGetInstance', {
+  const { data, error } = useApi('apiProjectInstancesGetInstance', {
     instanceName,
     projectName,
   })

apps/web-console/src/pages/instance/InstancesPage.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 import { useParams, Link } from 'react-router-dom'
 
-import { useApiData, api } from '@oxide/api'
+import { useApi } from '@oxide/api'
 import { Breadcrumbs, PageHeader, TextWithIcon } from '@oxide/ui'
 import { useBreadcrumbs } from '../../hooks'
 
@@ -20,7 +20,7 @@ const InstancesPage = () => {
   const breadcrumbs = useBreadcrumbs()
 
   const { projectName } = useParams<Params>()
-  const { data } = useApiData(api, 'apiProjectInstancesGet', { projectName })
+  const { data } = useApi('apiProjectInstancesGet', { projectName })
 
   if (!data) return <div>loading</div>
 

apps/web-console/src/pages/projects/ProjectPage.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 import { useParams, Link } from 'react-router-dom'
 
-import { useApiData, api } from '@oxide/api'
+import { useApi } from '@oxide/api'
 import { Breadcrumbs, PageHeader, TextWithIcon } from '@oxide/ui'
 import { useBreadcrumbs } from '../../hooks'
 
@@ -20,10 +20,10 @@ const ProjectPage = () => {
   const breadcrumbs = useBreadcrumbs()
 
   const { projectName } = useParams<Params>()
-  const { data: project } = useApiData(api, 'apiProjectsGetProject', {
+  const { data: project } = useApi('apiProjectsGetProject', {
     projectName,
   })
-  const { data: instances } = useApiData(api, 'apiProjectInstancesGet', {
+  const { data: instances } = useApi('apiProjectInstancesGet', {
     projectName,
   })
 

apps/web-console/src/pages/projects/ProjectsPage.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 import { Link } from 'react-router-dom'
 
-import { useApiData, api } from '@oxide/api'
+import { useApi } from '@oxide/api'
 import { useBreadcrumbs } from '../../hooks'
 import { Breadcrumbs, PageHeader, TextWithIcon } from '@oxide/ui'
 
@@ -14,7 +14,7 @@ const Title = styled(TextWithIcon).attrs({
 
 const ProjectsPage = () => {
   const breadcrumbs = useBreadcrumbs()
-  const { data } = useApiData(api, 'apiProjectsGet', {})
+  const { data } = useApi('apiProjectsGet', {})
 
   if (!data) return <div>loading</div>
 

libs/api/hooks/index.ts

@@ -1 +1 @@
-export { useApiData } from './use-api-data'
+export { getUseApi } from './use-api-data'

libs/api/hooks/use-api-data.ts

@@ -38,12 +38,16 @@ type Response<A, K extends keyof A> = A[K] extends (p: any) => Promise<infer R>
 // We also sort the keys in the params object so that { a: 1, b: 2 }
 // and { b: 2, a: 1 } are considered equivalent. SWR accepts an array
 // of strings as well as a single string.
-export function useApiData<
-  A extends PickByValue<A, (p: any) => Promise<any>>,
-  K extends keyof A
->(api: A, method: K, params: ReqParams<A, K>) {
-  const paramsStr = JSON.stringify(sortObj(params))
-  return useSWR<Response<A, K>>([method, paramsStr], () => api[method](params))
+export function getUseApi<A extends PickByValue<A, (p: any) => Promise<any>>>(
+  api: A
+) {
+  function useApi<K extends keyof A>(method: K, params: ReqParams<A, K>) {
+    const paramsStr = JSON.stringify(sortObj(params))
+    return useSWR<Response<A, K>>([method, paramsStr], () =>
+      api[method](params)
+    )
+  }
+  return useApi
 }
 
 /* eslint-enable @typescript-eslint/no-explicit-any */

libs/api/index.ts

@@ -1,5 +1,4 @@
-export * from './__generated__'
-export * from './hooks'
+import { getUseApi } from './hooks'
 
 import { DefaultApi, Configuration } from './__generated__'
 
@@ -8,4 +7,7 @@ const config =
     ? new Configuration({ basePath: process.env.API_URL })
     : new Configuration({ basePath: '/api' })
 
-export const api = new DefaultApi(config)
+const api = new DefaultApi(config)
+
+export const useApi = getUseApi(api)
+export * from './__generated__'