From 77fd13823758ed305d65d6d1141c663375c1405e Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 22 Sep 2025 12:27:14 +0700
Subject: [PATCH] Fix database webhooks http headers for edge functions not
 loading auth headers on first open (#38894)

---
 .../Database/Hooks/EditHookPanel.tsx          | 19 +++++++++++--------
 .../Database/Hooks/FormContents.tsx           |  8 ++++++--
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx b/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
index eab82c99f2..24e50fb1fc 100644
--- a/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
+++ b/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
@@ -44,6 +44,7 @@ export const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelP
   // hence why this external state as a temporary workaround
   const [events, setEvents] = useState<string[]>(selectedHook?.events ?? [])
   const [eventsError, setEventsError] = useState<string>()
+  const [isSubmitting, setIsSubmitting] = useState(false)
 
   // For HTTP request
   const [httpHeaders, setHttpHeaders] = useState<HTTPArgument[]>(() => {
@@ -65,6 +66,7 @@ export const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelP
       value,
     }))
   })
+
   const [httpParameters, setHttpParameters] = useState<HTTPArgument[]>(() => {
     if (typeof selectedHook === `undefined`) {
       return [{ id: uuidv4(), name: '', value: '' }]
@@ -90,7 +92,7 @@ export const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelP
     projectRef: project?.ref,
     connectionString: project?.connectionString,
   })
-  const [isSubmitting, setIsSubmitting] = useState(false)
+
   const { mutate: createDatabaseTrigger } = useDatabaseTriggerCreateMutation({
     onSuccess: (res) => {
       toast.success(`Successfully created new webhook "${res.name}"`)
@@ -102,6 +104,7 @@ export const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelP
       toast.error(`Failed to create webhook: ${error.message}`)
     },
   })
+
   const { mutate: updateDatabaseTrigger } = useDatabaseTriggerUpdateMutation({
     onSuccess: (res) => {
       setIsSubmitting(false)
@@ -132,13 +135,6 @@ export const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelP
     timeout_ms: Number(selectedHook?.function_args?.[4] ?? 5000),
   }
 
-  useEffect(() => {
-    if (visible) {
-      setIsEdited(false)
-      setIsClosingPanel(false)
-    }
-  }, [visible])
-
   const onClosePanel = () => {
     if (isEdited) setIsClosingPanel(true)
     else onClose()
@@ -262,6 +258,13 @@ export const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelP
     }
   }
 
+  useEffect(() => {
+    if (visible) {
+      setIsEdited(false)
+      setIsClosingPanel(false)
+    }
+  }, [visible])
+
   return (
     <>
       <SidePanel
diff --git a/apps/studio/components/interfaces/Database/Hooks/FormContents.tsx b/apps/studio/components/interfaces/Database/Hooks/FormContents.tsx
index 1f042b695a..af0ec2828a 100644
--- a/apps/studio/components/interfaces/Database/Hooks/FormContents.tsx
+++ b/apps/studio/components/interfaces/Database/Hooks/FormContents.tsx
@@ -51,7 +51,9 @@ export const FormContents = ({
   const restUrlTld = restUrl ? new URL(restUrl).hostname.split('.').pop() : 'co'
 
   const { data: keys = [] } = useAPIKeysQuery({ projectRef: ref, reveal: true })
-  const { data: functions = [] } = useEdgeFunctionsQuery({ projectRef: ref })
+  const { data: functions = [], isSuccess: isSucessEdgeFunctions } = useEdgeFunctionsQuery({
+    projectRef: ref,
+  })
 
   const legacyServiceRole = keys.find((x) => x.name === 'service_role')?.api_key ?? '[YOUR API KEY]'
 
@@ -81,6 +83,8 @@ export const FormContents = ({
   }, [values.function_type])
 
   useEffect(() => {
+    if (!isSucessEdgeFunctions) return
+
     const isEdgeFunctionSelected = isEdgeFunction({ ref, restUrlTld, url: values.http_url })
 
     if (values.http_url && isEdgeFunctionSelected) {
@@ -105,7 +109,7 @@ export const FormContents = ({
       setHttpHeaders(updatedHttpHeaders)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [values.http_url])
+  }, [values.http_url, isSucessEdgeFunctions])
 
   return (
     <div>