Refactor post calls from lib/common/fetch in auth pages to data/fetchers (supabase#36506)

* Deprecate use of getWithTimeout, refactor BuildingState and RestoringState to use RQ

* Refactor profile-create-mutation to use data/fetchers, and edge-function-status-query to use fetch

* Shift post from lib/common/fetch, refactor bucket-object-download-mutation

* Address feedback

* Minor fix

* Refactor post calls from lib/common/fetch in auth pages to data/fetchers

* Add missing POST users endpoint + small fix when deleting user via context menu

* simplify handleFetchError

* allow handleFetchError to accept unknown

* non-breaking change

---------

Co-authored-by: Alaister Young <[email protected]>

Author: joshenlim

apps/studio/components/interfaces/Auth/Users/UsersV2.tsx

@@ -587,7 +587,10 @@ export const UsersV2 = () => {
         visible={!!selectedUserToDelete}
         selectedUser={selectedUserToDelete}
         onClose={() => setSelectedUserToDelete(undefined)}
-        onDeleteSuccess={() => setSelectedUserToDelete(undefined)}
+        onDeleteSuccess={() => {
+          if (selectedUserToDelete?.id === selectedUser) setSelectedUser(undefined)
+          setSelectedUserToDelete(undefined)
+        }}
       />
     </>
   )

apps/studio/data/auth/auth-config-query.ts

@@ -1,6 +1,7 @@
 import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
 import type { components } from 'data/api'
 import { get, handleError } from 'data/fetchers'
+import { IS_PLATFORM } from 'lib/constants'
 import { useCallback } from 'react'
 import type { ResponseError } from 'types'
 import { authKeys } from './keys'
@@ -40,7 +41,7 @@ export const useAuthConfigQuery = <TData = ProjectAuthConfigData>(
     authKeys.authConfig(projectRef),
     ({ signal }) => getProjectAuthConfig({ projectRef }, signal),
     {
-      enabled: enabled && typeof projectRef !== 'undefined',
+      enabled: enabled && IS_PLATFORM && typeof projectRef !== 'undefined',
       ...options,
     }
   )

apps/studio/data/fetchers.ts

@@ -193,6 +193,39 @@ async function handleFetchResponse<T>(response: Response): Promise<T | ResponseE
   }
 }
 
+async function handleFetchError(response: unknown): Promise<ResponseError> {
+  let resJson: any = {}
+
+  if (response instanceof Error) {
+    resJson = response
+  }
+
+  if (response instanceof Response) {
+    resJson = await response.json()
+  }
+
+  const status = response instanceof Response ? response.status : undefined
+
+  const message =
+    resJson.message ??
+    resJson.msg ??
+    resJson.error ??
+    `An error has occurred: ${status ?? 'Unknown error'}`
+  const retryAfter =
+    response instanceof Response && response.headers.get('Retry-After')
+      ? parseInt(response.headers.get('Retry-After')!)
+      : undefined
+
+  let error = new ResponseError(message, status, undefined, retryAfter)
+
+  // @ts-expect-error - [Alaister] many of our local api routes check `if (response.error)`.
+  // This is a fix to keep those checks working without breaking changes.
+  // In future we should check for `if (response instanceof ResponseError)` instead.
+  error.error = error
+
+  return error
+}
+
 /**
  * To be used only for dashboard API endpoints. Use `fetch` directly if calling a non dashboard API endpoint
  *
@@ -218,9 +251,9 @@ export async function fetchPost<T = any>(
       ...otherOptions,
       signal: abortSignal,
     })
-    if (!response.ok) return handleError(response)
+    if (!response.ok) return handleFetchError(response)
     return handleFetchResponse(response)
   } catch (error) {
-    return handleError(error)
+    return handleFetchError(error)
   }
 }

apps/studio/lib/self-hosted.ts

@@ -1,11 +1,11 @@
+import { fetchPost } from 'data/fetchers'
 import { constructHeaders } from 'lib/api/apiHelpers'
-import { post } from 'lib/common/fetch'
 import { PG_META_URL } from 'lib/constants'
 import type { ResponseError } from 'types'
 
 export async function queryPgMetaSelfHosted(sql: string, headersInit?: { [prop: string]: any }) {
   const headers = constructHeaders(headersInit ?? {})
-  const response = await post(`${PG_META_URL}/query`, { query: sql }, { headers })
+  const response = await fetchPost(`${PG_META_URL}/query`, { query: sql }, { headers })
 
   if (response.error) {
     return { error: response.error as ResponseError }

apps/studio/pages/api/platform/auth/[ref]/config.ts

@@ -1,7 +1,11 @@
+import { createClient } from '@supabase/supabase-js'
 import { NextApiRequest, NextApiResponse } from 'next'
-import apiWrapper from 'lib/api/apiWrapper'
+
+import { fetchPost } from 'data/fetchers'
 import { constructHeaders } from 'lib/api/apiHelpers'
-import { post } from 'lib/common/fetch'
+import apiWrapper from 'lib/api/apiWrapper'
+
+const supabase = createClient(process.env.SUPABASE_URL!, process.env.SUPABASE_SERVICE_KEY!)
 
 export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
 
@@ -25,6 +29,12 @@ const handlePost = async (req: NextApiRequest, res: NextApiResponse) => {
   })
   const url = `${process.env.SUPABASE_URL}/auth/v1/invite`
   const payload = { email: req.body.email }
-  const response = await post(url, payload, { headers })
-  return res.status(200).json(response)
+
+  const response = await fetchPost(url, payload, { headers })
+  if (response.error) {
+    const { code, message } = response.error
+    return res.status(code).json({ message })
+  } else {
+    return res.status(200).json(response)
+  }
 }

apps/studio/pages/api/platform/auth/[ref]/invite.ts

@@ -1,10 +1,8 @@
 import { NextApiRequest, NextApiResponse } from 'next'
-import SqlString from 'sqlstring'
 
-import apiWrapper from 'lib/api/apiWrapper'
+import { fetchPost } from 'data/fetchers'
 import { constructHeaders } from 'lib/api/apiHelpers'
-import { post } from 'lib/common/fetch'
-import { tryParseInt } from 'lib/helpers'
+import apiWrapper from 'lib/api/apiWrapper'
 
 export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
 
@@ -28,6 +26,12 @@ const handlePost = async (req: NextApiRequest, res: NextApiResponse) => {
   })
   const url = `${process.env.SUPABASE_URL}/auth/v1/magiclink`
   const payload = { email: req.body.email }
-  const response = await post(url, payload, { headers })
-  return res.status(200).json(response)
+
+  const response = await fetchPost(url, payload, { headers })
+  if (response.error) {
+    const { code, message } = response.error
+    return res.status(code).json({ message })
+  } else {
+    return res.status(200).json(response)
+  }
 }

apps/studio/pages/api/platform/auth/[ref]/magiclink.ts

@@ -1,10 +1,8 @@
 import { NextApiRequest, NextApiResponse } from 'next'
-import SqlString from 'sqlstring'
 
-import apiWrapper from 'lib/api/apiWrapper'
+import { fetchPost } from 'data/fetchers'
 import { constructHeaders } from 'lib/api/apiHelpers'
-import { post } from 'lib/common/fetch'
-import { tryParseInt } from 'lib/helpers'
+import apiWrapper from 'lib/api/apiWrapper'
 
 export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
 
@@ -28,6 +26,12 @@ const handlePost = async (req: NextApiRequest, res: NextApiResponse) => {
   })
   const url = `${process.env.SUPABASE_URL}/auth/v1/otp`
   const payload = { phone: req.body.phone }
-  const response = await post(url, payload, { headers })
-  return res.status(200).json(response)
+
+  const response = await fetchPost(url, payload, { headers })
+  if (response.error) {
+    const { code, message } = response.error
+    return res.status(code).json({ message })
+  } else {
+    return res.status(200).json(response)
+  }
 }

apps/studio/pages/api/platform/auth/[ref]/otp.ts

@@ -1,10 +1,8 @@
 import { NextApiRequest, NextApiResponse } from 'next'
-import SqlString from 'sqlstring'
 
-import apiWrapper from 'lib/api/apiWrapper'
+import { fetchPost } from 'data/fetchers'
 import { constructHeaders } from 'lib/api/apiHelpers'
-import { post } from 'lib/common/fetch'
-import { tryParseInt } from 'lib/helpers'
+import apiWrapper from 'lib/api/apiWrapper'
 
 export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
 
@@ -28,6 +26,12 @@ const handlePost = async (req: NextApiRequest, res: NextApiResponse) => {
   })
   const url = `${process.env.SUPABASE_URL}/auth/v1/recover`
   const payload = { email: req.body.email }
-  const response = await post(url, payload, { headers })
-  return res.status(200).json(response)
+
+  const response = await fetchPost(url, payload, { headers })
+  if (response.error) {
+    const { code, message } = response.error
+    return res.status(code).json({ message })
+  } else {
+    return res.status(200).json(response)
+  }
 }