chore: only load data if needed (#34624)

Builds on top of #34617 (can be merged independently)

apps/studio/components/interfaces/AuditLogs/LogDetailsPanel.tsx

@@ -2,8 +2,6 @@ import dayjs from 'dayjs'
 
 import { FormSection, FormSectionContent, FormSectionLabel } from 'components/ui/Forms/FormSection'
 import type { AuditLog } from 'data/organizations/organization-audit-logs-query'
-import { useOrganizationsQuery } from 'data/organizations/organizations-query'
-import { useProjectsQuery } from 'data/projects/projects-query'
 import { Input, SidePanel } from 'ui'
 
 export interface LogDetailsPanelProps {
@@ -12,16 +10,6 @@ export interface LogDetailsPanelProps {
 }
 
 const LogDetailsPanel = ({ selectedLog, onClose }: LogDetailsPanelProps) => {
-  const { data: projects } = useProjectsQuery()
-  const { data: organizations } = useOrganizationsQuery()
-
-  const project = projects?.find(
-    (project) => project.ref === selectedLog?.target.metadata.project_ref
-  )
-  const organization = organizations?.find(
-    (org) => org.slug === selectedLog?.target.metadata.org_slug
-  )
-
   return (
     <SidePanel
       size="large"

apps/studio/components/interfaces/Connect/Connect.tsx

@@ -53,7 +53,7 @@ const Connect = () => {
       ?.children.find((child) => child.key === selectedChild)?.children[0]?.key || ''
   )
 
-  const { data: settings } = useProjectSettingsV2Query({ projectRef })
+  const { data: settings } = useProjectSettingsV2Query({ projectRef }, { enabled: showConnect })
   const canReadAPIKeys = useCheckPermissions(PermissionAction.READ, 'service_api_keys')
 
   const handleParentChange = (value: string) => {

apps/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx

@@ -46,11 +46,18 @@ const APIKeys = () => {
     projectRef,
   })
 
+  // API keys should not be empty. However it can be populated with a delay on project creation
+  const apiKeys = settings?.service_api_keys ?? []
+  const isApiKeysEmpty = apiKeys.length === 0
+
   const {
     data,
     isError: isJwtSecretUpdateStatusError,
     isLoading: isJwtSecretUpdateStatusLoading,
-  } = useJwtSecretUpdatingStatusQuery({ projectRef })
+  } = useJwtSecretUpdatingStatusQuery(
+    { projectRef },
+    { enabled: !isProjectSettingsLoading && isApiKeysEmpty }
+  )
   const jwtSecretUpdateStatus = data?.jwtSecretUpdateStatus
 
   const canReadAPIKeys = useCheckPermissions(PermissionAction.READ, 'service_api_keys')
@@ -61,12 +68,8 @@ const APIKeys = () => {
   const protocol = settings?.app_config?.protocol ?? 'https'
   const endpoint = settings?.app_config?.endpoint
   const apiUrl = `${protocol}://${endpoint ?? '-'}`
-  const apiKeys = settings?.service_api_keys ?? []
   const { anonKey } = getAPIKeys(settings)
 
-  // API keys should not be empty. However it can be populated with a delay on project creation
-  const isApiKeysEmpty = apiKeys.length === 0
-
   const clientInitSnippet: any = generateInitSnippet(apiUrl)
   const selectedLanguageSnippet = clientInitSnippet[selectedLanguage.key] ?? 'No snippet available'
 

apps/studio/components/interfaces/ProjectAPIDocs/ProjectAPIDocs.tsx

@@ -42,8 +42,14 @@ const ProjectAPIDocs = () => {
   const [showKeys, setShowKeys] = useState(false)
   const language = snap.docsLanguage
 
-  const { data: settings } = useProjectSettingsV2Query({ projectRef: ref })
-  const { data: customDomainData } = useCustomDomainsQuery({ projectRef: ref })
+  const { data: settings } = useProjectSettingsV2Query(
+    { projectRef: ref },
+    { enabled: snap.showProjectApiDocs }
+  )
+  const { data: customDomainData } = useCustomDomainsQuery(
+    { projectRef: ref },
+    { enabled: snap.showProjectApiDocs }
+  )
 
   const { anonKey } = getAPIKeys(settings)
   const apikey = showKeys

apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover.tsx

@@ -41,8 +41,8 @@ const NotificationsPopoverV2 = () => {
   // so opting to simplify and implement it here for now
   const rowHeights = useRef<{ [key: number]: number }>({})
 
-  const { data: projects } = useProjectsQuery()
-  const { data: organizations } = useOrganizationsQuery()
+  const { data: projects } = useProjectsQuery({ enabled: open })
+  const { data: organizations } = useOrganizationsQuery({ enabled: open })
   const {
     data,
     error,
@@ -52,19 +52,22 @@ const NotificationsPopoverV2 = () => {
     hasNextPage,
     isFetchingNextPage,
     fetchNextPage,
-  } = useNotificationsV2Query({
-    status:
-      activeTab === 'archived'
-        ? 'archived'
-        : snap.filterStatuses.includes('unread')
-          ? 'new'
-          : undefined,
-    filters: {
-      priority: snap.filterPriorities,
-      organizations: snap.filterOrganizations,
-      projects: snap.filterProjects,
+  } = useNotificationsV2Query(
+    {
+      status:
+        activeTab === 'archived'
+          ? 'archived'
+          : snap.filterStatuses.includes('unread')
+            ? 'new'
+            : undefined,
+      filters: {
+        priority: snap.filterPriorities,
+        organizations: snap.filterOrganizations,
+        projects: snap.filterProjects,
+      },
     },
-  })
+    { enabled: open }
+  )
   const { data: summary } = useNotificationsSummaryQuery()
   const { mutate: updateNotifications } = useNotificationsV2UpdateMutation()
   const { mutate: archiveAllNotifications, isLoading: isArchiving } =

apps/studio/data/usage/resource-warnings-query.ts

@@ -26,7 +26,7 @@ export const useResourceWarningsQuery = <TData = ResourceWarningsData>({
     ({ signal }) => getResourceWarnings(signal),
     {
       enabled: IS_PLATFORM && enabled,
-      staleTime: 1000 * 60 * 30, // default 30 minutes
+      staleTime: 1000 * 60 * 60, // default 60 minutes
       ...options,
     }
   )