From ab73c916c18d56bbf747b3fa80b0e042714cc83f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kevin=20Gr=C3=BCneberg?= Date: Wed, 2 Apr 2025 09:23:58 +0800 Subject: [PATCH] chore: only load data if needed (#34624) Builds on top of #34617 (can be merged independently) --- .../interfaces/AuditLogs/LogDetailsPanel.tsx | 12 ------- .../components/interfaces/Connect/Connect.tsx | 2 +- .../Home/NewProjectPanel/APIKeys.tsx | 13 +++++--- .../ProjectAPIDocs/ProjectAPIDocs.tsx | 10 ++++-- .../NotificationsPopover.tsx | 31 ++++++++++--------- .../data/usage/resource-warnings-query.ts | 2 +- 6 files changed, 35 insertions(+), 35 deletions(-) diff --git a/apps/studio/components/interfaces/AuditLogs/LogDetailsPanel.tsx b/apps/studio/components/interfaces/AuditLogs/LogDetailsPanel.tsx index 7e4e2bbaf64..7d6ab105e16 100644 --- a/apps/studio/components/interfaces/AuditLogs/LogDetailsPanel.tsx +++ b/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 ( { ?.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) => { diff --git a/apps/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx b/apps/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx index 04cae0f6bae..27faac4ea19 100644 --- a/apps/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx +++ b/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' diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/ProjectAPIDocs.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/ProjectAPIDocs.tsx index e7e6321e9ae..ff05812f689 100644 --- a/apps/studio/components/interfaces/ProjectAPIDocs/ProjectAPIDocs.tsx +++ b/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 diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover.tsx index 682ea86274b..612076331ab 100644 --- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover.tsx +++ b/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 } = diff --git a/apps/studio/data/usage/resource-warnings-query.ts b/apps/studio/data/usage/resource-warnings-query.ts index 1c4e495bb2a..9248c2dc9d5 100644 --- a/apps/studio/data/usage/resource-warnings-query.ts +++ b/apps/studio/data/usage/resource-warnings-query.ts @@ -26,7 +26,7 @@ export const useResourceWarningsQuery = ({ ({ signal }) => getResourceWarnings(signal), { enabled: IS_PLATFORM && enabled, - staleTime: 1000 * 60 * 30, // default 30 minutes + staleTime: 1000 * 60 * 60, // default 60 minutes ...options, } )