From 0d5be306efa5005eba3263b73784f46f0ed9b27f Mon Sep 17 00:00:00 2001 From: Ivan Vasilov Date: Wed, 10 Dec 2025 11:10:29 +0200 Subject: [PATCH] chore: Bump React Query to v5 (#40174) * Bump the deps, refactor deprecated code. * Migrate keepPreviousData usage. * Migrate all uses of InfiniteQuery. * Fix refetchInterval in queries. * Migrate all use of isLoading to isPending in mutations. * Fix accessing location in claim-project. * Fix a bug in duplicate query keys. * Migrate all queries to use isPending. * Revert "Fix accessing location in claim-project." This reverts commit 2a07df64b5ad95e4b8ed0ae748f25b5fa93d8e5b. * Revert the rss.xml file to master. --- apps/studio/components/grid/SupabaseGrid.tsx | 12 ++- .../footer/pagination/Pagination.tsx | 14 +++- .../formatter/ForeignKeyFormatter.tsx | 4 +- .../formatter/ReferenceRecordPeek.tsx | 11 ++- .../grid/components/header/Header.tsx | 3 +- .../header/sort/SortPopoverPrimitive.tsx | 3 +- .../interfaces/APIKeys/ApiKeyPill.tsx | 4 +- .../interfaces/APIKeys/PublishableAPIKeys.tsx | 4 +- .../interfaces/APIKeys/SecretAPIKeys.tsx | 2 +- .../APIKeys/hooks/useApiKeysVisibility.ts | 2 +- .../Account/AccessTokens/AccessTokenList.tsx | 2 +- .../interfaces/Account/AuditLogs.tsx | 30 +++++--- .../Preferences/AccountConnections.tsx | 2 +- .../Account/Preferences/AccountIdentities.tsx | 2 +- .../Preferences/ProfileInformation.tsx | 2 +- .../interfaces/Account/TOTPFactors/index.tsx | 2 +- .../interfaces/Advisors/AdvisorRuleItem.tsx | 2 +- .../interfaces/Auth/AuditLogsForm.tsx | 2 +- .../Auth/AuthProvidersForm/index.tsx | 2 +- .../interfaces/Auth/BasicAuthSettingsForm.tsx | 2 +- .../Auth/EmailTemplates/EmailTemplates.tsx | 2 +- .../interfaces/Auth/Hooks/HooksListing.tsx | 2 +- .../MfaAuthSettingsForm.tsx | 2 +- .../Auth/OAuthApps/OAuthAppsList.tsx | 14 ++-- .../OAuthApps/OAuthServerSettingsForm.tsx | 2 +- .../Auth/Overview/OverviewMetrics.tsx | 4 +- .../Policies/PolicyEditor/PolicyRoles.tsx | 8 +- .../ProtectionAuthSettingsForm.tsx | 2 +- .../interfaces/Auth/RateLimits/RateLimits.tsx | 2 +- .../Auth/RedirectUrls/RedirectUrls.tsx | 2 +- .../SessionsAuthSettingsForm.tsx | 2 +- .../interfaces/Auth/SiteUrl/SiteUrl.tsx | 2 +- .../Auth/ThirdPartyAuthForm/index.tsx | 2 +- .../interfaces/Auth/Users/UsersFooter.tsx | 8 +- .../interfaces/Auth/Users/UsersV2.tsx | 6 +- .../Billing/Payment/AddPaymentMethodForm.tsx | 4 +- .../PaymentMethods/CurrentPaymentMethod.tsx | 4 +- .../Payment/PaymentMethods/PaymentMethods.tsx | 2 +- .../BranchManagement/CreateBranchModal.tsx | 4 +- .../BranchManagement/EditBranchModal.tsx | 2 +- .../BranchManagement/WorkflowLogs.tsx | 4 +- .../Connect/DatabaseConnectionString.tsx | 6 +- .../EnumeratedTypes/EnumeratedTypes.tsx | 10 ++- .../Extensions/EnableExtensionModal.tsx | 2 +- .../Database/Extensions/Extensions.tsx | 3 +- .../Functions/FunctionsList/FunctionsList.tsx | 2 +- .../Database/Hooks/HooksList/HooksList.tsx | 2 +- .../Database/Indexes/CreateIndexSidePanel.tsx | 4 +- .../interfaces/Database/Indexes/Indexes.tsx | 4 +- .../Database/Migrations/Migrations.tsx | 2 +- .../Publications/PublicationsList.tsx | 2 +- .../Publications/PublicationsTables.tsx | 2 +- .../DestinationPanel/DestinationPanel.tsx | 2 +- .../DestinationPanelFields.tsx | 6 +- .../DestinationPanel/PublicationSelection.tsx | 4 +- .../Database/Replication/DestinationRow.tsx | 2 +- .../Database/Replication/Destinations.tsx | 6 +- .../ReplicationPipelineStatus.tsx | 4 +- .../RestoreToNewProject.tsx | 4 +- .../interfaces/Database/Roles/RolesList.tsx | 2 +- .../Database/Schemas/SchemaGraph.tsx | 4 +- .../interfaces/Database/Tables/ColumnList.tsx | 2 +- .../interfaces/Database/Tables/TableList.tsx | 8 +- .../Triggers/TriggersList/TriggersList.tsx | 4 +- .../DiskManagement/fields/AutoScaleFields.tsx | 2 +- .../fields/ComputeSizeField.tsx | 12 +-- .../DiskManagement/fields/DiskSizeField.tsx | 2 +- .../DiskManagement/fields/IOPSField.tsx | 2 +- .../fields/StorageTypeField.tsx | 2 +- .../DiskManagement/fields/ThroughputField.tsx | 2 +- .../interfaces/Docs/LangSelector.tsx | 2 +- .../EdgeFunctionDetails.tsx | 2 +- .../EdgeFunctionSecrets.tsx | 8 +- .../interfaces/Home/AdvisorWidget.tsx | 4 +- .../components/interfaces/Home/Home.tsx | 6 +- .../Home/NewProjectPanel/APIKeys.tsx | 4 +- .../Home/ProjectList/ProjectList.tsx | 5 +- .../interfaces/Home/ProjectUsage.tsx | 4 +- .../interfaces/Home/ProjectUsageSection.tsx | 6 +- .../interfaces/Home/ServiceStatus.tsx | 13 ++-- .../interfaces/HomeNew/ActivityStats.tsx | 6 +- .../interfaces/HomeNew/AdvisorSection.tsx | 2 +- .../HomeNew/CustomReportSection.tsx | 3 +- .../HomeNew/ProjectUsageSection.utils.ts | 9 ++- .../interfaces/HomeNew/ServiceStatus.tsx | 11 ++- .../interfaces/HomeNew/SnippetDropdown.tsx | 26 ++++--- .../components/interfaces/HomePageActions.tsx | 3 +- .../Integrations/CronJobs/CronJobPage.tsx | 2 +- .../Integrations/CronJobs/CronJobsTab.tsx | 5 +- .../CronJobs/EdgeFunctionSection.tsx | 6 +- .../Integrations/CronJobs/PreviousRunsTab.tsx | 2 +- .../Landing/useInstalledIntegrations.tsx | 6 +- .../Integrations/Queues/QueueCells.tsx | 2 +- .../Integrations/Queues/QueueTab.tsx | 10 ++- .../Integrations/Queues/QueuesRows.tsx | 2 +- .../Integrations/Queues/QueuesSettings.tsx | 2 +- .../Integrations/Queues/QueuesTab.tsx | 2 +- .../Queues/SingleQueue/QueueSettings.tsx | 8 +- .../Vault/Secrets/EditSecretModal.tsx | 2 +- .../Vault/Secrets/SecretsManagement.tsx | 11 ++- .../Vercel/OrganizationPicker.tsx | 4 +- .../VercelGithub/ProjectLinker.tsx | 2 +- .../Integrations/Webhooks/ListTab.tsx | 2 +- .../Wrappers/EditWrapperSheet.tsx | 2 +- .../Wrappers/WrapperTableEditor.tsx | 2 +- .../jwt-secret-keys-table/index.tsx | 8 +- .../rotate-key-dialog.tsx | 2 +- .../interfaces/JwtSecrets/jwt-settings.tsx | 2 +- .../interfaces/LogDrains/LogDrains.tsx | 5 +- .../Organization/AuditLogs/AuditLogs.tsx | 38 ++++++---- .../BillingBreakdown/BillingBreakdown.tsx | 2 +- .../BillingBreakdown/UpcomingInvoice.tsx | 2 +- .../BillingCustomerData.tsx | 4 +- .../BillingSettings/BillingEmail.tsx | 2 +- .../CostControl/CostControl.tsx | 2 +- .../CostControl/SpendCapSidePanel.tsx | 2 +- .../BillingSettings/CreditBalance.tsx | 2 +- .../Subscription/PaymentMethodSelection.tsx | 8 +- .../Subscription/PlanUpdateSidePanel.tsx | 4 +- .../Subscription/Subscription.tsx | 2 +- .../InvoicesSettings/InvoicesSettings.tsx | 7 +- .../Organization/OAuthApps/OAuthApps.tsx | 4 +- .../interfaces/Organization/OrgNotFound.tsx | 2 +- .../interfaces/Organization/SSO/SSOConfig.tsx | 2 +- .../Organization/SecuritySettings.tsx | 2 +- .../Organization/TeamSettings/MemberRow.tsx | 2 +- .../Organization/TeamSettings/MembersView.tsx | 2 +- .../Organization/Usage/TotalUsage.tsx | 2 +- .../interfaces/Organization/Usage/Usage.tsx | 4 +- .../Usage/UsageSection/DiskUsage.tsx | 11 ++- .../Usage/UsageSection/UsageSection.tsx | 2 +- .../OrganizationInvite/OrganizationInvite.tsx | 2 +- .../SecondLevelNav.StoragePicker.tsx | 3 +- .../PostgresVersionSelector.tsx | 4 +- .../ProjectCreation/RegionSelector.tsx | 4 +- .../QueryPerformance/QueryIndexes.tsx | 20 ++--- .../QueryPerformanceFilterBar.tsx | 14 ++-- .../RealtimeFilterPopover/TableSelector.tsx | 9 ++- .../interfaces/Realtime/Policies.tsx | 4 +- .../interfaces/Realtime/RealtimeSettings.tsx | 7 +- .../interfaces/Reports/MetricOptions.tsx | 2 +- .../Reports/ReportBlock/ChartBlock.tsx | 6 +- .../Reports/ReportBlock/ReportBlock.tsx | 8 +- .../components/interfaces/Reports/Reports.tsx | 2 +- .../interfaces/Reports/Reports.utils.tsx | 6 +- .../UserImpersonationSelector.tsx | 32 +++++--- .../SQLEditor/OngoingQueriesPanel.tsx | 2 +- .../Settings/API/PostgrestConfig.tsx | 4 +- .../interfaces/Settings/API/ServiceList.tsx | 4 +- .../interfaces/Settings/Addons/Addons.tsx | 4 +- .../Settings/Addons/CustomDomainSidePanel.tsx | 4 +- .../Settings/Addons/IPv4SidePanel.tsx | 4 +- .../Settings/Addons/PITRSidePanel.tsx | 2 +- .../Settings/Database/BannedIPs.tsx | 2 +- .../ConnectionPooling/ConnectionPooling.tsx | 2 +- .../Database/DiskSizeConfigurationModal.tsx | 4 +- .../NetworkRestrictions.tsx | 2 +- .../Settings/Database/SSLConfiguration.tsx | 2 +- .../ProjectComplianceMode.tsx | 2 +- .../CustomDomainConfig/CustomDomainConfig.tsx | 7 +- .../TransferProjectButton.tsx | 2 +- .../Infrastructure/InfrastructureActivity.tsx | 6 +- .../DeployNewReplicaPanel.tsx | 3 - .../InfrastructureConfiguration/Edge.tsx | 2 +- .../InstanceConfiguration.tsx | 4 +- .../Infrastructure/InfrastructureInfo.tsx | 4 +- .../GitHubIntegrationConnectionForm.tsx | 4 +- .../Settings/Logs/ErrorCodeDialog.tsx | 16 ++-- .../interfaces/SignIn/SignInMfaForm.tsx | 2 +- .../CreateTable/CreateTableInstructions.tsx | 6 +- .../DecryptedReadOnlyInput.tsx | 2 +- .../NamespaceWithTables/TableRowComponent.tsx | 2 +- .../NamespaceWithTables/index.tsx | 6 +- .../UpdateForeignSchemaDialog.tsx | 2 +- .../AnalyticsBucketDetails/index.tsx | 11 +-- .../useAnalyticsBucketAssociatedEntities.tsx | 2 +- .../useAnalyticsBucketWrapperInstance.tsx | 4 +- .../useIcebergWrapper.tsx | 2 +- .../Storage/AnalyticsBuckets/index.tsx | 2 +- .../interfaces/Storage/FilesBuckets/index.tsx | 2 +- .../Storage/StorageExplorer/PreviewPane.tsx | 3 +- .../StoragePolicies/StoragePolicies.tsx | 4 +- .../Storage/StorageSettings/S3Connection.tsx | 4 +- .../StorageSettings/StorageSettings.tsx | 4 +- .../VectorBuckets/DeleteVectorBucketModal.tsx | 2 +- .../VectorBucketDetails/index.tsx | 2 +- .../Storage/VectorBuckets/index.tsx | 2 +- .../VectorBuckets/useS3VectorsWrapper.tsx | 2 +- .../useS3VectorsWrapperInstance.tsx | 4 +- .../Storage/useBucketPolicyCount.ts | 6 +- .../interfaces/Support/SupportFormPage.tsx | 2 +- .../interfaces/Support/useSupportForm.ts | 2 +- .../ForeignKeySelector/ForeignKeySelector.tsx | 2 +- .../ForeignRowSelector/ForeignRowSelector.tsx | 11 ++- .../ForeignKeysManagement.tsx | 8 +- .../ViewEntityAutofixSecurityModal.tsx | 6 +- .../UnifiedLogs/ServiceFlowPanel.tsx | 2 +- .../interfaces/UnifiedLogs/UnifiedLogs.tsx | 2 +- .../layouts/AppLayout/BranchDropdown.tsx | 2 +- .../AppLayout/OrganizationDropdown.tsx | 2 +- .../layouts/AppLayout/ProjectDropdown.tsx | 4 +- .../layouts/DocsLayout/DocsLayout.tsx | 9 ++- .../layouts/LogsLayout/LogsSidebarMenuV2.tsx | 4 +- .../ObservabilityLayout/ObservabilityMenu.tsx | 6 +- .../layouts/ProjectLayout/BuildingState.tsx | 3 +- .../layouts/ProjectLayout/LoadingState.tsx | 2 +- .../PausedState/ProjectPausedState.tsx | 2 +- .../layouts/ProjectLayout/PausingState.tsx | 3 +- .../layouts/ProjectLayout/ResizingState.tsx | 3 +- .../layouts/ProjectLayout/RestartingState.tsx | 3 +- .../layouts/ProjectLayout/RestoringState.tsx | 3 +- .../layouts/ReportsLayout/ReportsMenu.tsx | 2 +- .../SQLEditorNavV2/SQLEditorNav.tsx | 15 ++-- .../SQLEditorNavV2/SQLEditorTreeViewItem.tsx | 9 ++- .../SQLEditorNavV2/SearchList.tsx | 30 +++++--- .../SQLEditorLayout/SqlEditor.Commands.tsx | 4 +- .../TableEditorLayout/TableEditorMenu.tsx | 3 +- .../ui/AIAssistantPanel/AIAssistant.tsx | 2 +- .../ui/AIAssistantPanel/AIOnboarding.tsx | 2 +- .../ui/AdvisorPanel/AdvisorPanel.tsx | 4 +- .../components/ui/Charts/ChartHandler.tsx | 8 +- .../components/ui/ComputeBadgeWrapper.tsx | 4 +- .../DataTableFilterCheckboxAsync.tsx | 3 +- .../studio/components/ui/DatabaseSelector.tsx | 2 +- .../studio/components/ui/FunctionSelector.tsx | 11 ++- .../ui/OrganizationProjectSelector.tsx | 3 +- .../ui/ProjectSettings/DisplayApiSettings.tsx | 4 +- .../ProjectSettings/DisplayConfigSettings.tsx | 4 +- apps/studio/components/ui/SchemaComboBox.tsx | 2 +- apps/studio/components/ui/SchemaSelector.tsx | 2 +- apps/studio/components/ui/org-selector.tsx | 2 +- apps/studio/data/auth/users-infinite-query.ts | 16 +++- .../data/config/disk-attributes-query.ts | 11 ++- .../jwt-secret-updating-status-query.ts | 7 +- .../data/config/project-settings-v2-query.ts | 2 +- .../config/project-upgrade-status-query.ts | 14 ++-- .../data/content/content-infinite-query.ts | 13 +++- .../data/content/sql-folder-contents-query.ts | 10 ++- apps/studio/data/content/sql-folders-query.ts | 13 +++- .../studio/data/content/sql-snippets-query.ts | 13 +++- .../database-cron-jobs-infinite-query.ts | 9 ++- .../database-cron-jobs-runs-infinite-query.ts | 14 +++- .../database-queue-messages-infinite-query.ts | 14 +++- .../entity-types-infinite-query.ts | 14 +++- .../data/logs/unified-logs-chart-query.ts | 6 +- .../data/logs/unified-logs-infinite-query.ts | 15 +++- .../notifications/notifications-v2-query.ts | 15 +++- .../projects/org-projects-infinite-query.ts | 13 +++- .../data/projects/project-detail-query.ts | 8 +- .../data/projects/projects-infinite-query.ts | 13 +++- .../data/read-replicas/replicas-query.ts | 2 +- .../data/replication/use-table-reset.ts | 4 +- .../data/reports/database-report-query.ts | 4 +- apps/studio/data/reports/report.utils.ts | 2 +- .../data/reports/storage-report-query.ts | 4 +- apps/studio/data/storage/buckets-query.ts | 22 ++++-- apps/studio/data/tables/keys.ts | 2 +- apps/studio/hooks/analytics/useDbQuery.tsx | 4 +- .../studio/hooks/analytics/useLogsPreview.tsx | 1 + apps/studio/hooks/analytics/useLogsQuery.tsx | 2 +- apps/studio/hooks/analytics/useSingleLog.tsx | 4 +- .../hooks/branches/useBranchMergeDiff.ts | 4 +- .../hooks/branches/useEdgeFunctionsDiff.ts | 10 +-- .../studio/hooks/misc/useCheckEntitlements.ts | 10 +-- apps/studio/hooks/misc/useCheckPermissions.ts | 6 +- apps/studio/hooks/misc/useReportDateRange.ts | 12 +-- apps/studio/hooks/misc/withAuth.tsx | 2 +- apps/studio/lib/profile.tsx | 4 +- apps/studio/package.json | 4 +- apps/studio/pages/_app.tsx | 8 +- apps/studio/pages/authorize.tsx | 10 ++- .../pages/aws-marketplace-onboarding.tsx | 2 +- apps/studio/pages/claim-project.tsx | 4 +- .../[slug]/deploy-button/new-project.tsx | 3 +- .../[slug]/marketplace/choose-project.tsx | 2 +- .../pages/integrations/vercel/install.tsx | 2 +- apps/studio/pages/org/[slug]/audit.tsx | 2 +- apps/studio/pages/org/[slug]/general.tsx | 2 +- apps/studio/pages/org/[slug]/team.tsx | 2 +- apps/studio/pages/org/_/[[...routeSlug]].tsx | 2 +- apps/studio/pages/organizations.tsx | 8 +- .../project/[ref]/advisors/performance.tsx | 7 +- .../pages/project/[ref]/advisors/security.tsx | 7 +- apps/studio/pages/project/[ref]/api/index.tsx | 2 +- .../pages/project/[ref]/auth/overview.tsx | 2 +- .../pages/project/[ref]/auth/policies.tsx | 4 +- .../[ref]/auth/templates/[templateId].tsx | 2 +- .../pages/project/[ref]/branches/index.tsx | 4 +- .../project/[ref]/branches/merge-requests.tsx | 2 +- .../project/[ref]/database/backups/pitr.tsx | 8 +- .../[ref]/database/backups/scheduled.tsx | 8 +- .../[ref]/database/column-privileges.tsx | 8 +- .../project/[ref]/database/tables/[id].tsx | 2 +- .../pages/project/[ref]/editor/[id].tsx | 2 +- .../[ref]/functions/[functionSlug]/code.tsx | 2 +- .../functions/[functionSlug]/invocations.tsx | 2 +- .../[ref]/functions/[functionSlug]/logs.tsx | 2 +- .../pages/project/[ref]/functions/index.tsx | 2 +- .../project/[ref]/logs/explorer/saved.tsx | 2 +- .../pages/project/[ref]/logs/pooler-logs.tsx | 2 +- .../project/[ref]/observability/database.tsx | 4 +- .../project/[ref]/observability/index.tsx | 6 +- .../project/[ref]/settings/log-drains.tsx | 11 ++- .../pages/project/_/[[...routeSlug]].tsx | 2 +- apps/studio/state/storage-explorer.tsx | 2 +- apps/studio/types/react-query.ts | 10 ++- pnpm-lock.yaml | 73 ++++--------------- 307 files changed, 950 insertions(+), 687 deletions(-) diff --git a/apps/studio/components/grid/SupabaseGrid.tsx b/apps/studio/components/grid/SupabaseGrid.tsx index 20e0fa3a291..9226a7f0041 100644 --- a/apps/studio/components/grid/SupabaseGrid.tsx +++ b/apps/studio/components/grid/SupabaseGrid.tsx @@ -20,6 +20,7 @@ import { Header, HeaderProps } from './components/header/Header' import { RowContextMenu } from './components/menu/RowContextMenu' import { GridProps } from './types' +import { keepPreviousData } from '@tanstack/react-query' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { useTableFilter } from './hooks/useTableFilter' import { useTableSort } from './hooks/useTableSort' @@ -54,7 +55,14 @@ export const SupabaseGrid = ({ : { warning: null } const tableQueriesEnabled = msSqlWarning.warning === null - const { data, error, isSuccess, isError, isLoading, isRefetching } = useTableRowsQuery( + const { + data, + error, + isSuccess, + isError, + isPending: isLoading, + isRefetching, + } = useTableRowsQuery( { projectRef: project?.ref, connectionString: project?.connectionString, @@ -66,7 +74,7 @@ export const SupabaseGrid = ({ roleImpersonationState: roleImpersonationState as RoleImpersonationState, }, { - keepPreviousData: true, + placeholderData: keepPreviousData, enabled: tableQueriesEnabled, retry: (_, error: any) => { const doesNotExistError = error && error.message?.includes('does not exist') diff --git a/apps/studio/components/grid/components/footer/pagination/Pagination.tsx b/apps/studio/components/grid/components/footer/pagination/Pagination.tsx index 697f7ebeae7..2794e1fe805 100644 --- a/apps/studio/components/grid/components/footer/pagination/Pagination.tsx +++ b/apps/studio/components/grid/components/footer/pagination/Pagination.tsx @@ -2,6 +2,7 @@ import { THRESHOLD_COUNT } from '@supabase/pg-meta/src/sql/studio/get-count-esti import { ArrowLeft, ArrowRight, HelpCircle, Loader2 } from 'lucide-react' import { useEffect, useState } from 'react' +import { keepPreviousData } from '@tanstack/react-query' import { useParams } from 'common' import { useTableFilter } from 'components/grid/hooks/useTableFilter' import { useTableSort } from 'components/grid/hooks/useTableSort' @@ -79,7 +80,14 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) = const [isConfirmPreviousModalOpen, setIsConfirmPreviousModalOpen] = useState(false) const [isConfirmFetchExactCountModalOpen, setIsConfirmFetchExactCountModalOpen] = useState(false) - const { data, isLoading, isSuccess, isError, isFetching, error } = useTableRowsCountQuery( + const { + data, + isPending: isLoading, + isSuccess, + isError, + isFetching, + error, + } = useTableRowsCountQuery( { projectRef: project?.ref, connectionString: project?.connectionString, @@ -89,7 +97,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) = roleImpersonationState: roleImpersonationState as RoleImpersonationState, }, { - keepPreviousData: true, + placeholderData: keepPreviousData, enabled: !isForeignTableSelected, } ) @@ -100,7 +108,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) = // [Joshen] This is only applicable for foreign tables, as we use the number of rows on the page to determine // if we've reached the last page (and hence disable the next button) - const { data: rowsData, isLoading: isLoadingRows } = useTableRowsQuery( + const { data: rowsData, isPending: isLoadingRows } = useTableRowsQuery( { projectRef: project?.ref, connectionString: project?.connectionString, diff --git a/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx b/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx index 738d3605fbd..0de46445319 100644 --- a/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx +++ b/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx @@ -23,7 +23,7 @@ export const ForeignKeyFormatter = (props: Props) => { const { tableId, row, column } = props const { data: project } = useSelectedProjectQuery() - const { data, isLoading } = useTableEditorQuery({ + const { data, isPending: isLoading } = useTableEditorQuery({ projectRef: project?.ref, connectionString: project?.connectionString, id: tableId, @@ -38,7 +38,7 @@ export const ForeignKeyFormatter = (props: Props) => { r.source_column_name === column.name ) - const { data: targetTable, isLoading: isLoadingTargetTable } = useTableQuery( + const { data: targetTable, isPending: isLoadingTargetTable } = useTableQuery( { projectRef: project?.ref, connectionString: project?.connectionString, diff --git a/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx b/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx index 6594b4c0a32..26eb6ac3f04 100644 --- a/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx +++ b/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx @@ -2,6 +2,7 @@ import { PostgresTable } from '@supabase/postgres-meta' import { Key } from 'lucide-react' import DataGrid, { Column } from 'react-data-grid' +import { keepPreviousData } from '@tanstack/react-query' import { useParams } from 'common' import { COLUMN_MIN_WIDTH } from 'components/grid/constants' import { @@ -25,7 +26,13 @@ export const ReferenceRecordPeek = ({ table, column, value }: ReferenceRecordPee const { ref } = useParams() const { data: project } = useSelectedProjectQuery() - const { data, error, isSuccess, isError, isLoading } = useTableRowsQuery( + const { + data, + error, + isSuccess, + isError, + isPending: isLoading, + } = useTableRowsQuery( { projectRef: project?.ref, connectionString: project?.connectionString, @@ -34,7 +41,7 @@ export const ReferenceRecordPeek = ({ table, column, value }: ReferenceRecordPee page: 1, limit: 10, }, - { keepPreviousData: true } + { placeholderData: keepPreviousData } ) const primaryKeys = table.primary_keys.map((x) => x.name) diff --git a/apps/studio/components/grid/components/header/Header.tsx b/apps/studio/components/grid/components/header/Header.tsx index e3e2178ea59..8fb00273739 100644 --- a/apps/studio/components/grid/components/header/Header.tsx +++ b/apps/studio/components/grid/components/header/Header.tsx @@ -4,6 +4,7 @@ import Link from 'next/link' import { ReactNode, useState } from 'react' import { toast } from 'sonner' +import { keepPreviousData } from '@tanstack/react-query' import { useParams } from 'common' import { useTableFilter } from 'components/grid/hooks/useTableFilter' import { useTableSort } from 'components/grid/hooks/useTableSort' @@ -273,7 +274,7 @@ const RowHeader = ({ tableQueriesEnabled = true }: RowHeaderProps) => { enforceExactCount: snap.enforceExactCount, roleImpersonationState: roleImpersonationState as RoleImpersonationState, }, - { keepPreviousData: true, enabled: tableQueriesEnabled } + { placeholderData: keepPreviousData, enabled: tableQueriesEnabled } ) const allRows = data?.rows ?? [] diff --git a/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx b/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx index 5c6e124a130..51c370ad4fd 100644 --- a/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx +++ b/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx @@ -1,4 +1,5 @@ import { THRESHOLD_COUNT } from '@supabase/pg-meta/src/query/table-row-query' +import { keepPreviousData } from '@tanstack/react-query' import { isEqual } from 'lodash' import { ChevronDown, List } from 'lucide-react' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' @@ -79,7 +80,7 @@ export const SortPopoverPrimitive = ({ enforceExactCount: snap.enforceExactCount, roleImpersonationState: roleImpersonationState as RoleImpersonationState, }, - { keepPreviousData: true, enabled: tableQueriesEnabled } + { placeholderData: keepPreviousData, enabled: tableQueriesEnabled } ) const isLargeTable = (countData?.count ?? 0) > THRESHOLD_COUNT diff --git a/apps/studio/components/interfaces/APIKeys/ApiKeyPill.tsx b/apps/studio/components/interfaces/APIKeys/ApiKeyPill.tsx index 07068f75185..882258e4e66 100644 --- a/apps/studio/components/interfaces/APIKeys/ApiKeyPill.tsx +++ b/apps/studio/components/interfaces/APIKeys/ApiKeyPill.tsx @@ -38,7 +38,7 @@ export function ApiKeyPill({ const { data, error, - isLoading, + isPending: isLoading, refetch: refetchApiKey, } = useAPIKeyIdQuery( { @@ -49,7 +49,7 @@ export function ApiKeyPill({ { enabled: show, // Only run query when show is true staleTime: 0, // Always consider data stale - cacheTime: 0, // Don't cache the key data + gcTime: 0, // Don't cache the key data } ) diff --git a/apps/studio/components/interfaces/APIKeys/PublishableAPIKeys.tsx b/apps/studio/components/interfaces/APIKeys/PublishableAPIKeys.tsx index 55d7a6d3c6b..63605c60d51 100644 --- a/apps/studio/components/interfaces/APIKeys/PublishableAPIKeys.tsx +++ b/apps/studio/components/interfaces/APIKeys/PublishableAPIKeys.tsx @@ -28,7 +28,7 @@ export const PublishableAPIKeys = () => { const { canReadAPIKeys, isLoading: isLoadingVisibility } = useApiKeysVisibility() const { data: apiKeysData, - isLoading: isLoadingApiKeys, + isPending: isLoadingApiKeys, error, } = useAPIKeysQuery({ projectRef, reveal: false }, { enabled: canReadAPIKeys }) @@ -94,7 +94,7 @@ const ApiKeyInput = () => { const { canReadAPIKeys, isLoading: isPermissionsLoading } = useApiKeysVisibility() const { data: apiKeysData, - isLoading: isApiKeysLoading, + isPending: isApiKeysLoading, error, } = useAPIKeysQuery({ projectRef, reveal: false }, { enabled: canReadAPIKeys }) diff --git a/apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx b/apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx index 993faf2f6fd..5027f6c31bd 100644 --- a/apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx +++ b/apps/studio/components/interfaces/APIKeys/SecretAPIKeys.tsx @@ -75,7 +75,7 @@ export const SecretAPIKeys = () => { const { data: apiKeysData, error, - isLoading: isLoadingApiKeys, + isPending: isLoadingApiKeys, isError: isErrorApiKeys, } = useAPIKeysQuery({ projectRef, reveal: false }, { enabled: canReadAPIKeys }) diff --git a/apps/studio/components/interfaces/APIKeys/hooks/useApiKeysVisibility.ts b/apps/studio/components/interfaces/APIKeys/hooks/useApiKeysVisibility.ts index accb9ac4a09..3147b1e3fc0 100644 --- a/apps/studio/components/interfaces/APIKeys/hooks/useApiKeysVisibility.ts +++ b/apps/studio/components/interfaces/APIKeys/hooks/useApiKeysVisibility.ts @@ -24,7 +24,7 @@ export function useApiKeysVisibility(): ApiKeysVisibilityState { '*' ) - const { data: apiKeysData, isLoading: isLoadingApiKeys } = useAPIKeysQuery( + const { data: apiKeysData, isPending: isLoadingApiKeys } = useAPIKeysQuery( { projectRef, reveal: false, diff --git a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx index 286830af8e8..38277a70a20 100644 --- a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx +++ b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx @@ -79,7 +79,7 @@ export const AccessTokenList = ({ searchString = '', onDeleteSuccess }: AccessTo const [isOpen, setIsOpen] = useState(false) const [token, setToken] = useState(undefined) - const { data: tokens, error, isLoading, isError } = useAccessTokensQuery() + const { data: tokens, error, isPending: isLoading, isError } = useAccessTokensQuery() const { mutate: deleteToken } = useAccessTokenDeleteMutation({ onSuccess: (_, vars) => { diff --git a/apps/studio/components/interfaces/Account/AuditLogs.tsx b/apps/studio/components/interfaces/Account/AuditLogs.tsx index 9b77f7a6460..e5ff6d9fbe5 100644 --- a/apps/studio/components/interfaces/Account/AuditLogs.tsx +++ b/apps/studio/components/interfaces/Account/AuditLogs.tsx @@ -2,6 +2,7 @@ import dayjs from 'dayjs' import { ArrowDown, ArrowUp, RefreshCw } from 'lucide-react' import { useEffect, useMemo, useState } from 'react' +import { keepPreviousData } from '@tanstack/react-query' import { useDebounce } from '@uidotdev/usehooks' import { LogDetailsPanel } from 'components/interfaces/AuditLogs/LogDetailsPanel' import Table from 'components/to-be-cleaned/Table' @@ -43,22 +44,29 @@ export const AuditLogs = () => { fetchNextPage, } = useProjectsInfiniteQuery( { search: search.length === 0 ? search : debouncedSearch }, - { keepPreviousData: true } + { placeholderData: keepPreviousData } ) const projects = useMemo(() => projectsData?.pages.flatMap((page) => page.projects), [projectsData?.pages]) || [] const { data: organizations } = useOrganizationsQuery() - const { data, error, isLoading, isSuccess, isError, isRefetching, refetch } = - useProfileAuditLogsQuery( - { - iso_timestamp_start: dateRange.from, - iso_timestamp_end: dateRange.to, - }, - { - retry: false, - } - ) + const { + data, + error, + isPending: isLoading, + isSuccess, + isError, + isRefetching, + refetch, + } = useProfileAuditLogsQuery( + { + iso_timestamp_start: dateRange.from, + iso_timestamp_end: dateRange.to, + }, + { + retry: false, + } + ) const logs = data?.result ?? [] const sortedLogs = logs diff --git a/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx b/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx index e5f17b5c5d3..be47dd6f31a 100644 --- a/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx +++ b/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx @@ -23,7 +23,7 @@ import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' export const AccountConnections = () => { const { data: gitHubAuthorization, - isLoading, + isPending: isLoading, isSuccess, isError, error, diff --git a/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx b/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx index b866e6bb73e..8a1f9bcf4d1 100644 --- a/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx +++ b/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx @@ -41,7 +41,7 @@ const getProviderName = (provider: string) => export const AccountIdentities = () => { const router = useRouter() - const { data, isLoading, isSuccess } = useProfileIdentitiesQuery() + const { data, isPending: isLoading, isSuccess } = useProfileIdentitiesQuery() const identities = data?.identities ?? [] const isChangeExpired = data?.email_change_sent_at ? dayjs().utc().diff(dayjs(data?.email_change_sent_at).utc(), 'minute') > 10 diff --git a/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx b/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx index 091420f9ad3..e4e752e784b 100644 --- a/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx +++ b/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx @@ -40,7 +40,7 @@ export const ProfileInformation = () => { const { data: identityData, - isLoading: isIdentitiesLoading, + isPending: isIdentitiesLoading, isSuccess: isIdentitiesSuccess, } = useProfileIdentitiesQuery() const identities = (identityData?.identities ?? []).filter((x) => x.identity_data?.email !== null) diff --git a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx index 645005bd0ff..a8fecf483ff 100644 --- a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx +++ b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx @@ -13,7 +13,7 @@ import DeleteFactorModal from './DeleteFactorModal' export const TOTPFactors = () => { const [isAddNewFactorOpen, setIsAddNewFactorOpen] = useState(false) const [factorToBeDeleted, setFactorToBeDeleted] = useState(null) - const { data, isLoading, isError, isSuccess, error } = useMfaListFactorsQuery() + const { data, isPending: isLoading, isError, isSuccess, error } = useMfaListFactorsQuery() return ( <> diff --git a/apps/studio/components/interfaces/Advisors/AdvisorRuleItem.tsx b/apps/studio/components/interfaces/Advisors/AdvisorRuleItem.tsx index 199f0bc8f47..9255bc7e878 100644 --- a/apps/studio/components/interfaces/Advisors/AdvisorRuleItem.tsx +++ b/apps/studio/components/interfaces/Advisors/AdvisorRuleItem.tsx @@ -50,7 +50,7 @@ export const AdvisorRuleItem = ({ lint }: AdvisorRuleItemProps) => { const { data = { exceptions: [] }, error, - isLoading, + isPending: isLoading, isSuccess, isError, } = useProjectLintRulesQuery({ projectRef }) diff --git a/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx b/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx index abbd5d5bb59..47cf9b719dc 100644 --- a/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx +++ b/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx @@ -60,7 +60,7 @@ export const AuditLogsForm = () => { data: authConfig, error: authConfigError, isError, - isLoading, + isPending: isLoading, } = useAuthConfigQuery({ projectRef }) const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation({ diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/index.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/index.tsx index 0bcc1674bc9..cabf22b6789 100644 --- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/index.tsx +++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/index.tsx @@ -30,7 +30,7 @@ export const AuthProvidersForm = () => { const { data: authConfig, error: authConfigError, - isLoading, + isPending: isLoading, isError, isSuccess, } = useAuthConfigQuery({ projectRef }) diff --git a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx index d5de06cdf92..0ca0e48449a 100644 --- a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx +++ b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx @@ -58,7 +58,7 @@ export const BasicAuthSettingsForm = () => { error: authConfigError, isError, isSuccess, - isLoading, + isPending: isLoading, } = useAuthConfigQuery({ projectRef }) const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation() diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx index bcfc8abba9b..9c77cd7c666 100644 --- a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx +++ b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx @@ -72,7 +72,7 @@ export const EmailTemplates = () => { const { data: authConfig, error: authConfigError, - isLoading, + isPending: isLoading, isError, isSuccess, } = useAuthConfigQuery({ projectRef }) diff --git a/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx b/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx index 6594d5855ce..cbd1ad914a1 100644 --- a/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx +++ b/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx @@ -33,7 +33,7 @@ export const HooksListing = () => { data: authConfig, error: authConfigError, isError, - isLoading, + isPending: isLoading, } = useAuthConfigQuery({ projectRef }) const [selectedHookForDeletion, setSelectedHookForDeletion] = useState(null) diff --git a/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx index 53ab41f24d8..984bdb8f354 100644 --- a/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx +++ b/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx @@ -96,7 +96,7 @@ export const MfaAuthSettingsForm = () => { data: authConfig, error: authConfigError, isError, - isLoading, + isPending: isLoading, } = useAuthConfigQuery({ projectRef }) const { mutate: updateAuthConfig } = useAuthConfigUpdateMutation() diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx index f1416275370..0fce4f17a4a 100644 --- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx +++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx @@ -62,7 +62,7 @@ type OAuthAppsSortOrder = OAuthAppsSort extends `${string}:${infer Order}` ? Ord export const OAuthAppsList = () => { const { ref: projectRef } = useParams() - const { data: authConfig, isLoading: isAuthConfigLoading } = useAuthConfigQuery({ projectRef }) + const { data: authConfig, isPending: isAuthConfigLoading } = useAuthConfigQuery({ projectRef }) const isOAuthServerEnabled = !!authConfig?.OAUTH_SERVER_ENABLED const [newOAuthApp, setNewOAuthApp] = useState(undefined) const [showRegenerateDialog, setShowRegenerateDialog] = useState(false) @@ -71,10 +71,12 @@ export const OAuthAppsList = () => { const [filteredClientTypes, setFilteredClientTypes] = useState([]) const deletingOAuthAppIdRef = useRef(null) - const { data, isLoading, isError, error } = useOAuthServerAppsQuery( - { projectRef }, - { enabled: isOAuthServerEnabled } - ) + const { + data, + isPending: isLoading, + isError, + error, + } = useOAuthServerAppsQuery({ projectRef }, { enabled: isOAuthServerEnabled }) const { mutateAsync: regenerateSecret, isPending: isRegenerating } = useOAuthServerAppRegenerateSecretMutation({ @@ -112,7 +114,7 @@ export const OAuthAppsList = () => { handleErrorOnDelete(deletingOAuthAppIdRef, selectedId, `OAuth App not found`), }) - const { mutate: deleteOAuthApp, isLoading: isDeletingApp } = useOAuthServerAppDeleteMutation({ + const { mutate: deleteOAuthApp, isPending: isDeletingApp } = useOAuthServerAppDeleteMutation({ onSuccess: () => { toast.success(`Successfully deleted OAuth app`) setSelectedAppToDelete(null) diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx index 4d0551730e3..21976f4a0a8 100644 --- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx +++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx @@ -74,7 +74,7 @@ export const OAuthServerSettingsForm = () => { const { ref: projectRef } = useParams() const { data: authConfig, - isLoading: isAuthConfigLoading, + isPending: isAuthConfigLoading, isSuccess, } = useAuthConfigQuery({ projectRef }) const { mutate: updateAuthConfig, isPending } = useAuthConfigUpdateMutation({ diff --git a/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx b/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx index 4a117094690..a6442abc2e3 100644 --- a/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx +++ b/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx @@ -199,13 +199,13 @@ export const OverviewMetrics = ({ metrics, isLoading, error }: OverviewMetricsPr authSuccessRatePrevious ) - const { data: respErrData, isLoading: isLoadingResp } = useQuery({ + const { data: respErrData, isPending: isLoadingResp } = useQuery({ queryKey: ['auth-overview', ref, 'top-response-errors'], queryFn: () => fetchTopResponseErrors(ref as string), enabled: !!ref, }) - const { data: codeErrData, isLoading: isLoadingCodes } = useQuery({ + const { data: codeErrData, isPending: isLoadingCodes } = useQuery({ queryKey: ['auth-overview', ref, 'top-auth-error-codes'], queryFn: () => fetchTopAuthErrorCodes(ref as string), enabled: !!ref, diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx index a0ea64c50ce..f28b8694264 100644 --- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx +++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx @@ -15,7 +15,13 @@ type SystemRole = (typeof SYSTEM_ROLES)[number] export const PolicyRoles = ({ selectedRoles, onUpdateSelectedRoles }: PolicyRolesProps) => { const { data: project } = useSelectedProjectQuery() - const { data, error, isLoading, isError, isSuccess } = useDatabaseRolesQuery({ + const { + data, + error, + isPending: isLoading, + isError, + isSuccess, + } = useDatabaseRolesQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) diff --git a/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx index 91f2c49fadf..e36127fb5de 100644 --- a/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx +++ b/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx @@ -80,7 +80,7 @@ export const ProtectionAuthSettingsForm = () => { data: authConfig, error: authConfigError, isError, - isLoading, + isPending: isLoading, } = useAuthConfigQuery({ projectRef }) const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation({ onError: (error) => { diff --git a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx index af573a4c193..9be8f904234 100644 --- a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx +++ b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx @@ -44,7 +44,7 @@ export const RateLimits = () => { const { data: authConfig, error, - isLoading, + isPending: isLoading, isError, isSuccess, } = useAuthConfigQuery({ projectRef }) diff --git a/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx b/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx index 487d46ada2c..ec232f8e207 100644 --- a/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx +++ b/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx @@ -29,7 +29,7 @@ export const RedirectUrls = () => { const { data: authConfig, error: authConfigError, - isLoading, + isPending: isLoading, isError, isSuccess, } = useAuthConfigQuery({ projectRef }) diff --git a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx index 857a2a910cb..6c89d9ba3af 100644 --- a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx +++ b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx @@ -66,7 +66,7 @@ export const SessionsAuthSettingsForm = () => { data: authConfig, error: authConfigError, isError, - isLoading, + isPending: isLoading, } = useAuthConfigQuery({ projectRef }) const { mutate: updateAuthConfig } = useAuthConfigUpdateMutation() diff --git a/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx b/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx index 52816817009..25a00e1235c 100644 --- a/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx +++ b/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx @@ -40,7 +40,7 @@ const SiteUrl = () => { data: authConfig, error: authConfigError, isError, - isLoading, + isPending: isLoading, } = useAuthConfigQuery({ projectRef }) const { mutate: updateAuthConfig } = useAuthConfigUpdateMutation() const [isUpdatingSiteUrl, setIsUpdatingSiteUrl] = useState(false) diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx index 290b2a37780..082ee52c717 100644 --- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx +++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx @@ -43,7 +43,7 @@ export const ThirdPartyAuthForm = () => { const { ref: projectRef } = useParams() const { data: integrationsData, - isLoading, + isPending: isLoading, isError, isSuccess, error, diff --git a/apps/studio/components/interfaces/Auth/Users/UsersFooter.tsx b/apps/studio/components/interfaces/Auth/Users/UsersFooter.tsx index 99581102ca2..e13281dc0a7 100644 --- a/apps/studio/components/interfaces/Auth/Users/UsersFooter.tsx +++ b/apps/studio/components/interfaces/Auth/Users/UsersFooter.tsx @@ -1,9 +1,8 @@ import { THRESHOLD_COUNT } from '@supabase/pg-meta/src/sql/studio/get-count-estimate' +import { keepPreviousData } from '@tanstack/react-query' import { HelpCircle, Loader2 } from 'lucide-react' import { useEffect, useState } from 'react' -import type { Filter, SpecificFilterColumn } from './Users.constants' - import { OptimizedSearchColumns } from '@supabase/pg-meta/src/sql/studio/get-users-types' import { useParams } from 'common' import { formatEstimatedCount } from 'components/grid/components/footer/pagination/Pagination.utils' @@ -11,6 +10,7 @@ import { useUsersCountQuery } from 'data/auth/users-count-query' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' +import type { Filter, SpecificFilterColumn } from './Users.constants' interface UsersFooterProps { filter: Filter @@ -33,7 +33,7 @@ export const UsersFooter = ({ const { data: countData, - isLoading: isLoadingCount, + isPending: isLoadingCount, isFetching: isFetchingCount, isSuccess: isSuccessCount, } = useUsersCountQuery( @@ -49,7 +49,7 @@ export const UsersFooter = ({ ? { column: specificFilterColumn as OptimizedSearchColumns } : { column: undefined }), }, - { keepPreviousData: true } + { placeholderData: keepPreviousData } ) const totalUsers = countData?.count ?? 0 diff --git a/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx b/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx index f1a2ee5fc42..89baacb01bd 100644 --- a/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx +++ b/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx @@ -1,4 +1,4 @@ -import { useQueryClient } from '@tanstack/react-query' +import { keepPreviousData, useQueryClient } from '@tanstack/react-query' import AwesomeDebouncePromise from 'awesome-debounce-promise' import { ExternalLinkIcon, @@ -190,7 +190,7 @@ export const UsersV2 = () => { providers: [], forceExactCount: false, }, - { keepPreviousData: true } + { placeholderData: keepPreviousData } ) const totalUsers = totalUsersCountData?.count ?? 0 const isCountWithinThresholdForSortBy = totalUsers <= SORT_BY_VALUE_COUNT_THRESHOLD @@ -223,7 +223,7 @@ export const UsersV2 = () => { : { column: undefined }), }, { - keepPreviousData: Boolean(filterKeywords), + placeholderData: Boolean(filterKeywords) ? keepPreviousData : undefined, // [Joshen] This is to prevent the dashboard from invalidating when refocusing as it may create // a barrage of requests to invalidate each page esp when the project has many many users. staleTime: Infinity, diff --git a/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx b/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx index 8d34ff5da70..91a86aa1c2a 100644 --- a/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx +++ b/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx @@ -29,7 +29,7 @@ interface AddPaymentMethodFormProps { const AddPaymentMethodForm = ({ onCancel, onConfirm }: AddPaymentMethodFormProps) => { const { data: selectedOrganization } = useSelectedOrganizationQuery() - const { data: customerProfile, isLoading: customerProfileLoading } = + const { data: customerProfile, isPending: customerProfileLoading } = useOrganizationCustomerProfileQuery({ slug: selectedOrganization?.slug, }) @@ -42,7 +42,7 @@ const AddPaymentMethodForm = ({ onCancel, onConfirm }: AddPaymentMethodFormProps const { mutateAsync: markAsDefault } = useOrganizationPaymentMethodMarkAsDefaultMutation() const { mutateAsync: updateCustomerProfile } = useOrganizationCustomerProfileUpdateMutation() const { mutateAsync: updateTaxId } = useOrganizationTaxIdUpdateMutation() - const { data: taxId, isLoading: isCustomerTaxIdLoading } = useOrganizationTaxIdQuery({ + const { data: taxId, isPending: isCustomerTaxIdLoading } = useOrganizationTaxIdQuery({ slug: selectedOrganization?.slug, }) diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CurrentPaymentMethod.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CurrentPaymentMethod.tsx index 5b5deccf3c0..f7044cc6f80 100644 --- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CurrentPaymentMethod.tsx +++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/CurrentPaymentMethod.tsx @@ -16,14 +16,14 @@ const CurrentPaymentMethod = () => { const { data: subscription, - isLoading: isLoadingSubscription, + isPending: isLoadingSubscription, isError: isErrorSubscription, } = useOrgSubscriptionQuery({ orgSlug: slug, }) const { data: paymentMethods, - isLoading: isLoadingOrganizationPaymentMethods, + isPending: isLoadingOrganizationPaymentMethods, isError: isErrorOrganizationPaymentMethods, } = useOrganizationPaymentMethodsQuery({ slug }) diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx index 1038ec1f121..10efc0bc373 100644 --- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx +++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx @@ -40,7 +40,7 @@ const PaymentMethods = () => { const { data: paymentMethods, error, - isLoading, + isPending: isLoading, isError, isSuccess, } = useOrganizationPaymentMethodsQuery({ slug }) diff --git a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx index e89367188e1..92ba49c397c 100644 --- a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx +++ b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx @@ -137,7 +137,7 @@ export const CreateBranchModal = () => { const { data: connections, error: connectionsError, - isLoading: isLoadingConnections, + isPending: isLoadingConnections, isSuccess: isSuccessConnections, isError: isErrorConnections, } = useGitHubConnectionsQuery( @@ -159,7 +159,7 @@ export const CreateBranchModal = () => { const { data: disk, - isLoading: isLoadingDiskAttr, + isPending: isLoadingDiskAttr, isError: isErrorDiskAttr, } = useDiskAttributesQuery({ projectRef }, { enabled: showCreateBranchModal && withData }) const projectDiskAttributes = disk?.attributes ?? { diff --git a/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx index 690eccea2a0..91a6c2b6d03 100644 --- a/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx +++ b/apps/studio/components/interfaces/BranchManagement/EditBranchModal.tsx @@ -61,7 +61,7 @@ export const EditBranchModal = ({ branch, visible, onClose }: EditBranchModalPro const { data: connections, error: connectionsError, - isLoading: isLoadingConnections, + isPending: isLoadingConnections, isSuccess: isSuccessConnections, isError: isErrorConnections, } = useGitHubConnectionsQuery({ diff --git a/apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx b/apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx index 29253f09d9b..6d98c4d0caa 100644 --- a/apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx +++ b/apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx @@ -45,7 +45,7 @@ export const WorkflowLogs = ({ projectRef, status }: WorkflowLogsProps) => { const { data: workflowRuns, isSuccess: isWorkflowRunsSuccess, - isLoading: isWorkflowRunsLoading, + isPending: isWorkflowRunsLoading, isError: isWorkflowRunsError, error: workflowRunsError, } = useActionsQuery({ ref: projectRef }, { enabled: isOpen }) @@ -57,7 +57,7 @@ export const WorkflowLogs = ({ projectRef, status }: WorkflowLogsProps) => { const { data: workflowRunLogs, isSuccess: isWorkflowRunLogsSuccess, - isLoading: isWorkflowRunLogsLoading, + isPending: isWorkflowRunLogsLoading, isError: isWorkflowRunLogsError, error: workflowRunLogsError, } = useActionRunLogsQuery( diff --git a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx index 4708f10e0d7..2a51cfb11a7 100644 --- a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx +++ b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx @@ -139,14 +139,14 @@ export const DatabaseConnectionString = () => { const { data: pgbouncerConfig, error: pgbouncerError, - isLoading: isLoadingPgbouncerConfig, + isPending: isLoadingPgbouncerConfig, isError: isErrorPgbouncerConfig, isSuccess: isSuccessPgBouncerConfig, } = usePgbouncerConfigQuery({ projectRef }) const { data: supavisorConfig, error: supavisorConfigError, - isLoading: isLoadingSupavisorConfig, + isPending: isLoadingSupavisorConfig, isError: isErrorSupavisorConfig, isSuccess: isSuccessSupavisorConfig, } = useSupavisorConfigurationQuery({ projectRef }) @@ -154,7 +154,7 @@ export const DatabaseConnectionString = () => { const { data: databases, error: readReplicasError, - isLoading: isLoadingReadReplicas, + isPending: isLoadingReadReplicas, isError: isErrorReadReplicas, isSuccess: isSuccessReadReplicas, } = useReadReplicasQuery({ projectRef }) diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx index edaa198a6ef..48fb9810bb2 100644 --- a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx +++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx @@ -8,9 +8,9 @@ import { DocsButton } from 'components/ui/DocsButton' import SchemaSelector from 'components/ui/SchemaSelector' import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useEnumeratedTypesQuery } from 'data/enumerated-types/enumerated-types-query' +import { handleErrorOnDelete, useQueryStateWithSelect } from 'hooks/misc/useQueryStateWithSelect' import { useQuerySchemaState } from 'hooks/misc/useSchemaQueryState' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' -import { handleErrorOnDelete, useQueryStateWithSelect } from 'hooks/misc/useQueryStateWithSelect' import { useIsProtectedSchema } from 'hooks/useProtectedSchemas' import { Button, @@ -38,7 +38,13 @@ export const EnumeratedTypes = () => { const { selectedSchema, setSelectedSchema } = useQuerySchemaState() const deletingTypeIdRef = useRef(null) - const { data, error, isLoading, isError, isSuccess } = useEnumeratedTypesQuery({ + const { + data, + error, + isPending: isLoading, + isError, + isSuccess, + } = useEnumeratedTypesQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) diff --git a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx index e5ec6962633..d0566a457e0 100644 --- a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx +++ b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx @@ -43,7 +43,7 @@ const EnableExtensionModal = ({ visible, extension, onCancel }: EnableExtensionM const [defaultSchema, setDefaultSchema] = useState() const [fetchingSchemaInfo, setFetchingSchemaInfo] = useState(false) - const { data: schemas, isLoading: isSchemasLoading } = useSchemasQuery( + const { data: schemas, isPending: isSchemasLoading } = useSchemasQuery( { projectRef: project?.ref, connectionString: project?.connectionString, diff --git a/apps/studio/components/interfaces/Database/Extensions/Extensions.tsx b/apps/studio/components/interfaces/Database/Extensions/Extensions.tsx index ba0a266a22c..06bedcf8e5e 100644 --- a/apps/studio/components/interfaces/Database/Extensions/Extensions.tsx +++ b/apps/studio/components/interfaces/Database/Extensions/Extensions.tsx @@ -10,7 +10,6 @@ import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader' import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' -import { DOCS_URL } from 'lib/constants' import { Card, Input, @@ -30,7 +29,7 @@ export const Extensions = () => { const { data: project } = useSelectedProjectQuery() const [filterString, setFilterString] = useState('') - const { data, isLoading } = useDatabaseExtensionsQuery({ + const { data, isPending: isLoading } = useDatabaseExtensionsQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) diff --git a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx index 003fb9bbaf4..067be68ca6c 100644 --- a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx +++ b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx @@ -151,7 +151,7 @@ const FunctionsList = () => { const { data: functions, error, - isLoading, + isPending: isLoading, isError, } = useDatabaseFunctionsQuery({ projectRef: project?.ref, diff --git a/apps/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx b/apps/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx index 90b11efdc31..64e0d1b47b4 100644 --- a/apps/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx +++ b/apps/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx @@ -32,7 +32,7 @@ export const HooksList = ({ const { data: project } = useSelectedProjectQuery() const { data: hooks, - isLoading, + isPending: isLoading, isSuccess, isError, error, diff --git a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx index 557f9d92dc5..224c87618d3 100644 --- a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx +++ b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx @@ -60,7 +60,7 @@ const CreateIndexSidePanel = ({ visible, onClose }: CreateIndexSidePanelProps) = projectRef: project?.ref, connectionString: project?.connectionString, }) - const { data: entities, isLoading: isLoadingEntities } = useEntityTypesQuery({ + const { data: entities, isPending: isLoadingEntities } = useEntityTypesQuery({ schemas: [selectedSchema], sort: 'alphabetical', search: searchTerm, @@ -69,7 +69,7 @@ const CreateIndexSidePanel = ({ visible, onClose }: CreateIndexSidePanelProps) = }) const { data: tableColumns, - isLoading: isLoadingTableColumns, + isPending: isLoadingTableColumns, isSuccess: isSuccessTableColumns, } = useTableColumnsQuery({ schema: selectedSchema, diff --git a/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx b/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx index 6f219713621..a37cc3c922f 100644 --- a/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx +++ b/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx @@ -43,7 +43,7 @@ const Indexes = () => { const { data: allIndexes, error: indexesError, - isLoading: isLoadingIndexes, + isPending: isLoadingIndexes, isSuccess: isSuccessIndexes, isError: isErrorIndexes, } = useIndexesQuery({ @@ -75,7 +75,7 @@ const Indexes = () => { const { data: schemas, - isLoading: isLoadingSchemas, + isPending: isLoadingSchemas, isSuccess: isSuccessSchemas, isError: isErrorSchemas, } = useSchemasQuery({ diff --git a/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx b/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx index 2280485e1da..14b7e6062d9 100644 --- a/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx +++ b/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx @@ -36,7 +36,7 @@ const Migrations = () => { const { data: project } = useSelectedProjectQuery() const { data = [], - isLoading, + isPending: isLoading, isSuccess, isError, error, diff --git a/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx b/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx index 589bb0dff45..ced70f2a37a 100644 --- a/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx +++ b/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx @@ -43,7 +43,7 @@ export const PublicationsList = () => { const { data = [], error, - isLoading, + isPending: isLoading, isSuccess, isError, } = useDatabasePublicationsQuery({ diff --git a/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx b/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx index ad4e08cdbe5..35226dcc436 100644 --- a/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx +++ b/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx @@ -34,7 +34,7 @@ export const PublicationsTables = () => { const { data: tablesData = [], - isLoading, + isPending: isLoading, isSuccess, isError, error, diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx index cee10b749d2..99781c99ccb 100644 --- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx +++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx @@ -200,7 +200,7 @@ export const DestinationPanel = ({ isSuccessPublications && !!publicationName && !publicationNames.includes(publicationName) const selectedPublication = publications.find((pub) => pub.name === publicationName) - const { data: checkPrimaryKeysExistsData, isLoading: isLoadingCheck } = useCheckPrimaryKeysExists( + const { data: checkPrimaryKeysExistsData, isPending: isLoadingCheck } = useCheckPrimaryKeysExists( { projectRef: project?.ref, connectionString: project?.connectionString, diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanelFields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanelFields.tsx index 99aaf046f8b..48eaf6e32ec 100644 --- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanelFields.tsx +++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanelFields.tsx @@ -138,7 +138,7 @@ export const AnalyticsBucketFields = ({ const { data: keysData, isSuccess: isSuccessKeys, - isLoading: isLoadingKeys, + isPending: isLoadingKeys, isError: isErrorKeys, } = useStorageCredentialsQuery({ projectRef }) const s3Keys = keysData?.data ?? [] @@ -149,7 +149,7 @@ export const AnalyticsBucketFields = ({ const { data: analyticsBuckets = [], - isLoading: isLoadingBuckets, + isPending: isLoadingBuckets, isError: isErrorBuckets, } = useAnalyticsBucketsQuery({ projectRef }) @@ -157,7 +157,7 @@ export const AnalyticsBucketFields = ({ const { data: namespaces = [], - isLoading: isLoadingNamespaces, + isPending: isLoadingNamespaces, isError: isErrorNamespaces, } = useIcebergNamespacesQuery( { diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/PublicationSelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/PublicationSelection.tsx index ea59ed6bebc..7b619107dbb 100644 --- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/PublicationSelection.tsx +++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/PublicationSelection.tsx @@ -31,7 +31,7 @@ export const PublicationSelection = ({ const { data: publications = [], - isLoading: isLoadingPublications, + isPending: isLoadingPublications, isSuccess: isSuccessPublications, } = useReplicationPublicationsQuery({ projectRef, sourceId }) @@ -40,7 +40,7 @@ export const PublicationSelection = ({ const isSelectedPublicationMissing = isSuccessPublications && !!publicationName && !publicationNames.includes(publicationName) - const { data: checkPrimaryKeysExistsData, isLoading: isLoadingCheck } = useCheckPrimaryKeysExists( + const { data: checkPrimaryKeysExistsData, isPending: isLoadingCheck } = useCheckPrimaryKeysExists( { projectRef: project?.ref, connectionString: project?.connectionString, diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx index 451f967f387..a42291ccd93 100644 --- a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx +++ b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx @@ -60,7 +60,7 @@ export const DestinationRow = ({ const { data: pipelineStatusData, error: pipelineStatusError, - isLoading: isPipelineStatusLoading, + isPending: isPipelineStatusLoading, isError: isPipelineStatusError, isSuccess: isPipelineStatusSuccess, } = useReplicationPipelineStatusQuery( diff --git a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx index 90ce68a08c0..06cd96e310a 100644 --- a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx +++ b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx @@ -32,7 +32,7 @@ export const Destinations = () => { const { data: sourcesData, error: sourcesError, - isLoading: isSourcesLoading, + isPending: isSourcesLoading, isError: isSourcesError, isSuccess: isSourcesSuccess, } = useReplicationSourcesQuery({ @@ -45,7 +45,7 @@ export const Destinations = () => { const { data: destinationsData, error: destinationsError, - isLoading: isDestinationsLoading, + isPending: isDestinationsLoading, isError: isDestinationsError, isSuccess: isDestinationsSuccess, } = useReplicationDestinationsQuery({ @@ -55,7 +55,7 @@ export const Destinations = () => { const { data: pipelinesData, error: pipelinesError, - isLoading: isPipelinesLoading, + isPending: isPipelinesLoading, isError: isPipelinesError, isSuccess: isPipelinesSuccess, } = useReplicationPipelinesQuery({ diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx index 28017f217ed..2d50cdd14d7 100644 --- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx +++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx @@ -65,7 +65,7 @@ export const ReplicationPipelineStatus = () => { const { data: pipeline, error: pipelineError, - isLoading: isPipelineLoading, + isPending: isPipelineLoading, isError: isPipelineError, } = useReplicationPipelineByIdQuery({ projectRef, @@ -88,7 +88,7 @@ export const ReplicationPipelineStatus = () => { const { data: replicationStatusData, - isLoading: isStatusLoading, + isPending: isStatusLoading, isError: isStatusError, } = useReplicationPipelineReplicationStatusQuery( { projectRef, pipelineId }, diff --git a/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx b/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx index db5b82c15bb..48b5e1fe0e6 100644 --- a/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx +++ b/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx @@ -48,7 +48,7 @@ export const RestoreToNewProject = () => { const { data: cloneBackups, error, - isLoading: cloneBackupsLoading, + isPending: cloneBackupsLoading, isError, } = useCloneBackupsQuery({ projectRef: project?.ref }, { enabled: !isFreePlan }) @@ -75,7 +75,7 @@ export const RestoreToNewProject = () => { const { data: cloneStatus, refetch: refetchCloneStatus, - isLoading: cloneStatusLoading, + isPending: cloneStatusLoading, isSuccess: isCloneStatusSuccess, } = useCloneStatusQuery( { diff --git a/apps/studio/components/interfaces/Database/Roles/RolesList.tsx b/apps/studio/components/interfaces/Database/Roles/RolesList.tsx index 03da48618f9..a84ba3267b0 100644 --- a/apps/studio/components/interfaces/Database/Roles/RolesList.tsx +++ b/apps/studio/components/interfaces/Database/Roles/RolesList.tsx @@ -40,7 +40,7 @@ export const RolesList = () => { }) const maxConnectionLimit = maxConnData?.maxConnections - const { data, isLoading } = useDatabaseRolesQuery({ + const { data, isPending: isLoading } = useDatabaseRolesQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) diff --git a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx index 0f14d8a8485..067c075c4d2 100644 --- a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx +++ b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx @@ -67,7 +67,7 @@ export const SchemaGraph = () => { data: schemas, error: errorSchemas, isSuccess: isSuccessSchemas, - isLoading: isLoadingSchemas, + isPending: isLoadingSchemas, isError: isErrorSchemas, } = useSchemasQuery({ projectRef: project?.ref, @@ -78,7 +78,7 @@ export const SchemaGraph = () => { data: tables, error: errorTables, isSuccess: isSuccessTables, - isLoading: isLoadingTables, + isPending: isLoadingTables, isError: isErrorTables, } = useTablesQuery({ projectRef: project?.ref, diff --git a/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx b/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx index 2b6be19b184..65659265a23 100644 --- a/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx +++ b/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx @@ -48,7 +48,7 @@ export const ColumnList = ({ data: selectedTable, error, isError, - isLoading, + isPending: isLoading, isSuccess, } = useTableEditorQuery({ projectRef: project?.ref, diff --git a/apps/studio/components/interfaces/Database/Tables/TableList.tsx b/apps/studio/components/interfaces/Database/Tables/TableList.tsx index a49aceaa145..2a5c3291050 100644 --- a/apps/studio/components/interfaces/Database/Tables/TableList.tsx +++ b/apps/studio/components/interfaces/Database/Tables/TableList.tsx @@ -97,7 +97,7 @@ export const TableList = ({ data: tables, error: tablesError, isError: isErrorTables, - isLoading: isLoadingTables, + isPending: isLoadingTables, isSuccess: isSuccessTables, } = useTablesQuery( { @@ -120,7 +120,7 @@ export const TableList = ({ data: views, error: viewsError, isError: isErrorViews, - isLoading: isLoadingViews, + isPending: isLoadingViews, isSuccess: isSuccessViews, } = useViewsQuery( { @@ -141,7 +141,7 @@ export const TableList = ({ data: materializedViews, error: materializedViewsError, isError: isErrorMaterializedViews, - isLoading: isLoadingMaterializedViews, + isPending: isLoadingMaterializedViews, isSuccess: isSuccessMaterializedViews, } = useMaterializedViewsQuery( { @@ -164,7 +164,7 @@ export const TableList = ({ data: foreignTables, error: foreignTablesError, isError: isErrorForeignTables, - isLoading: isLoadingForeignTables, + isPending: isLoadingForeignTables, isSuccess: isSuccessForeignTables, } = useForeignTablesQuery( { diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx index 2476626499e..9475baaac1c 100644 --- a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx +++ b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx @@ -65,7 +65,7 @@ export const TriggersList = () => { const { data: triggers, error, - isLoading, + isPending, isError, } = useDatabaseTriggersQuery({ projectRef: project?.ref, @@ -165,7 +165,7 @@ execute function function_name();`) setTriggerToDelete(trigger.id.toString()) } - if (isLoading) { + if (isPending) { return } diff --git a/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx b/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx index 1e8a6ba8b53..ed7c4101113 100644 --- a/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx +++ b/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx @@ -24,7 +24,7 @@ export const AutoScaleFields = ({ form }: AutoScaleFieldProps) => { } = form const { totalSize, growthPercent, maxSizeGb, minIncrementGb } = form.watch() - const { error, isLoading, isError } = useDiskAutoscaleCustomConfigQuery({ projectRef }) + const { error, isPending: isLoading, isError } = useDiskAutoscaleCustomConfigQuery({ projectRef }) const _growthPercent = growthPercent ?? DISK_AUTOSCALE_CONFIG_DEFAULTS.growthPercent const _minIncrementGb = minIncrementGb ?? DISK_AUTOSCALE_CONFIG_DEFAULTS.minIncrementSize diff --git a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx index 45b0592d786..b48be427fd0 100644 --- a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx +++ b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx @@ -8,6 +8,7 @@ import { SupportLink } from 'components/interfaces/Support/SupportLink' import { DocsButton } from 'components/ui/DocsButton' import { InlineLink } from 'components/ui/InlineLink' import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query' +import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' @@ -27,15 +28,10 @@ import { ComputeBadge } from 'ui-patterns' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import { DiskStorageSchemaType } from '../DiskManagement.schema' import { ComputeInstanceAddonVariantId, InfraInstanceSize } from '../DiskManagement.types' -import { - calculateComputeSizePrice, - getAvailableComputeOptions, - showMicroUpgrade, -} from '../DiskManagement.utils' +import { calculateComputeSizePrice, getAvailableComputeOptions } from '../DiskManagement.utils' import { BillingChangeBadge } from '../ui/BillingChangeBadge' import FormMessage from '../ui/FormMessage' import { NoticeBar } from '../ui/NoticeBar' -import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements' /** * to do: this could be a type from api-types @@ -56,7 +52,7 @@ type ComputeSizeFieldProps = { export function ComputeSizeField({ form, disabled }: ComputeSizeFieldProps) { const { ref } = useParams() const { data: org } = useSelectedOrganizationQuery() - const { data: project, isLoading: isProjectLoading } = useSelectedProjectQuery() + const { data: project, isPending: isProjectLoading } = useSelectedProjectQuery() const { hasAccess: entitledUpdateCompute, isLoading: isEntitlementLoading } = useCheckEntitlements('instances.compute_update_available_sizes') @@ -67,7 +63,7 @@ export function ComputeSizeField({ form, disabled }: ComputeSizeFieldProps) { const { data: addons, - isLoading: isAddonsLoading, + isPending: isAddonsLoading, error: addonsError, } = useProjectAddonsQuery({ projectRef: ref }) diff --git a/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx index 5cb2a24a83f..f47263a7909 100644 --- a/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx +++ b/apps/studio/components/interfaces/DiskManagement/fields/DiskSizeField.tsx @@ -39,7 +39,7 @@ export function DiskSizeField({ const { data: project } = useSelectedProjectQuery() const { - isLoading: isLoadingDiskAttributes, + isPending: isLoadingDiskAttributes, error: diskAttributesError, isError: isDiskAttributesError, } = useDiskAttributesQuery( diff --git a/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx index f7fc5456c37..122eb025659 100644 --- a/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx +++ b/apps/studio/components/interfaces/DiskManagement/fields/IOPSField.tsx @@ -31,7 +31,7 @@ export function IOPSField({ form, disableInput }: IOPSFieldProps) { const watchedComputeSize = watch('computeSize') const watchedIOPS = watch('provisionedIOPS') ?? 0 - const { isLoading, error, isError } = useDiskAttributesQuery({ projectRef }) + const { isPending: isLoading, error, isError } = useDiskAttributesQuery({ projectRef }) const iopsPrice = calculateIOPSPrice({ oldStorageType: formState.defaultValues?.storageType as DiskType, diff --git a/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx index 6f6be505dd9..72c046ea600 100644 --- a/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx +++ b/apps/studio/components/interfaces/DiskManagement/fields/StorageTypeField.tsx @@ -38,7 +38,7 @@ export function StorageTypeField({ form, disableInput }: StorageTypeFieldProps) const isIo2Supported = IO2_AVAILABLE_REGIONS.includes(project?.region ?? '') - const { isLoading, error, isError } = useDiskAttributesQuery({ projectRef }) + const { isPending: isLoading, error, isError } = useDiskAttributesQuery({ projectRef }) return ( { const { data: selectedFunction, error, - isLoading, + isPending: isLoading, isError, isSuccess, } = useEdgeFunctionQuery({ diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx index c49ce5d6ecf..0863fed7629 100644 --- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx +++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx @@ -31,7 +31,13 @@ export const EdgeFunctionSecrets = () => { ) const { can: canUpdateSecrets } = useAsyncCheckPermissions(PermissionAction.SECRETS_WRITE, '*') - const { data, error, isLoading, isSuccess, isError } = useSecretsQuery( + const { + data, + error, + isPending: isLoading, + isSuccess, + isError, + } = useSecretsQuery( { projectRef: projectRef, }, diff --git a/apps/studio/components/interfaces/Home/AdvisorWidget.tsx b/apps/studio/components/interfaces/Home/AdvisorWidget.tsx index 931c4265c90..ebae4d400ab 100644 --- a/apps/studio/components/interfaces/Home/AdvisorWidget.tsx +++ b/apps/studio/components/interfaces/Home/AdvisorWidget.tsx @@ -6,9 +6,9 @@ import { useParams } from 'common' import { LINTER_LEVELS } from 'components/interfaces/Linter/Linter.constants' import { EntityTypeIcon, createLintSummaryPrompt } from 'components/interfaces/Linter/Linter.utils' import { useQueryPerformanceQuery } from 'components/interfaces/Reports/Reports.queries' +import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import { Lint, useProjectLintsQuery } from 'data/lint/lint-query' -import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider' import { useAdvisorStateSnapshot } from 'state/advisor-state' import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state' import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state' @@ -41,7 +41,7 @@ interface SlowQuery { export const AdvisorWidget = () => { const { ref: projectRef } = useParams() const [selectedTab, setSelectedTab] = useState<'security' | 'performance'>('security') - const { data: lints, isLoading: isLoadingLints } = useProjectLintsQuery({ projectRef }) + const { data: lints, isPending: isLoadingLints } = useProjectLintsQuery({ projectRef }) const { data: slowestQueriesData, isLoading: isLoadingSlowestQueries } = useQueryPerformanceQuery( { preset: 'slowestExecutionTime', diff --git a/apps/studio/components/interfaces/Home/Home.tsx b/apps/studio/components/interfaces/Home/Home.tsx index d7982de353a..8802b586202 100644 --- a/apps/studio/components/interfaces/Home/Home.tsx +++ b/apps/studio/components/interfaces/Home/Home.tsx @@ -66,15 +66,15 @@ export const Home = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [enableBranching]) - const { data: tablesData, isLoading: isLoadingTables } = useTablesQuery({ + const { data: tablesData, isPending: isLoadingTables } = useTablesQuery({ projectRef: project?.ref, connectionString: project?.connectionString, schema: 'public', }) - const { data: functionsData, isLoading: isLoadingFunctions } = useEdgeFunctionsQuery({ + const { data: functionsData, isPending: isLoadingFunctions } = useEdgeFunctionsQuery({ projectRef: project?.ref, }) - const { data: replicasData, isLoading: isLoadingReplicas } = useReadReplicasQuery({ + const { data: replicasData, isPending: isLoadingReplicas } = useReadReplicasQuery({ projectRef: project?.ref, }) diff --git a/apps/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx b/apps/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx index 547289182f9..878e535a38a 100644 --- a/apps/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx +++ b/apps/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx @@ -52,7 +52,7 @@ export const APIKeys = () => { const { data: settings, isError: isProjectSettingsError, - isLoading: isProjectSettingsLoading, + isPending: isProjectSettingsLoading, } = useProjectSettingsV2Query({ projectRef }) const { canReadAPIKeys } = useApiKeysVisibility() @@ -64,7 +64,7 @@ export const APIKeys = () => { const { data, isError: isJwtSecretUpdateStatusError, - isLoading: isJwtSecretUpdateStatusLoading, + isPending: isJwtSecretUpdateStatusLoading, } = useJwtSecretUpdatingStatusQuery( { projectRef }, { enabled: !isProjectSettingsLoading && isApiKeysEmpty } diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx index c1504021b60..d53ea042153 100644 --- a/apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx +++ b/apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx @@ -1,5 +1,6 @@ import { UIEvent, useMemo } from 'react' +import { keepPreviousData } from '@tanstack/react-query' import { useDebounce } from '@uidotdev/usehooks' import { LOCAL_STORAGE_KEYS, useParams } from 'common' import AlertError from 'components/ui/AlertError' @@ -75,14 +76,14 @@ export const ProjectList = ({ organization: organization_, rewriteHref }: Projec statuses: filterStatus, }, { - keepPreviousData: true, + placeholderData: keepPreviousData, } ) const orgProjects = useMemo(() => data?.pages.flatMap((page) => page.projects), [data?.pages]) || [] const { - isLoading: _isLoadingPermissions, + isPending: _isLoadingPermissions, isError: isErrorPermissions, error: permissionsError, } = usePermissionsQuery() diff --git a/apps/studio/components/interfaces/Home/ProjectUsage.tsx b/apps/studio/components/interfaces/Home/ProjectUsage.tsx index 0a2ea44a51e..1127da0644a 100644 --- a/apps/studio/components/interfaces/Home/ProjectUsage.tsx +++ b/apps/studio/components/interfaces/Home/ProjectUsage.tsx @@ -1,7 +1,7 @@ import dayjs from 'dayjs' +import { Auth, Database, Realtime, Storage } from 'icons' import sumBy from 'lodash/sumBy' import { ChevronDown } from 'lucide-react' -import { Auth, Database, Realtime, Storage } from 'icons' import Link from 'next/link' import { useRouter } from 'next/router' import { useState } from 'react' @@ -80,7 +80,7 @@ const ProjectUsage = () => { const [interval, setInterval] = useState(DEFAULT_INTERVAL) - const { data, isLoading } = useProjectLogStatsQuery({ projectRef, interval }) + const { data, isPending: isLoading } = useProjectLogStatsQuery({ projectRef, interval }) const selectedInterval = CHART_INTERVALS.find((i) => i.key === interval) || CHART_INTERVALS[1] const startDateLocal = dayjs().subtract( diff --git a/apps/studio/components/interfaces/Home/ProjectUsageSection.tsx b/apps/studio/components/interfaces/Home/ProjectUsageSection.tsx index cdaeb78f73e..fd9c6dac0fc 100644 --- a/apps/studio/components/interfaces/Home/ProjectUsageSection.tsx +++ b/apps/studio/components/interfaces/Home/ProjectUsageSection.tsx @@ -9,10 +9,12 @@ import ProjectUsage from './ProjectUsage' export const ProjectUsageSection = () => { const { data: project } = useSelectedProjectQuery() - const { error, isLoading } = useProjectLogRequestsCountQuery({ projectRef: project?.ref }) + const { error, isPending: isLoading } = useProjectLogRequestsCountQuery({ + projectRef: project?.ref, + }) // wait for the stats to load before showing the usage section to eliminate multiple spinners - const { isLoading: isLogsStatsLoading } = useProjectLogStatsQuery({ + const { isPending: isLogsStatsLoading } = useProjectLogStatsQuery({ projectRef: project?.ref, interval: '1hr', }) diff --git a/apps/studio/components/interfaces/Home/ServiceStatus.tsx b/apps/studio/components/interfaces/Home/ServiceStatus.tsx index f977e8517e7..a2e768ac0fe 100644 --- a/apps/studio/components/interfaces/Home/ServiceStatus.tsx +++ b/apps/studio/components/interfaces/Home/ServiceStatus.tsx @@ -93,11 +93,12 @@ export const ServiceStatus = () => { const isBranch = project?.parentRef !== project?.ref // Get branches data when on a branch - const { data: branches, isLoading: isBranchesLoading } = useBranchesQuery( + const { data: branches, isPending: isBranchesLoading } = useBranchesQuery( { projectRef: isBranch ? project?.parentRef : undefined }, { enabled: isBranch, - refetchInterval: (data) => { + refetchInterval: (query) => { + const data = query.state.data if (!data) return false const currentBranch = data.find((branch) => branch.project_ref === ref) return ['FUNCTIONS_DEPLOYED', 'MIGRATIONS_FAILED', 'FUNCTIONS_FAILED'].includes( @@ -116,14 +117,15 @@ export const ServiceStatus = () => { // [Joshen] Need pooler service check eventually const { data: status, - isLoading, + isPending: isLoading, refetch: refetchServiceStatus, } = useProjectServiceStatusQuery( { projectRef: ref, }, { - refetchInterval: (data) => { + refetchInterval: (query) => { + const data = query.state.data return data?.some((service) => !service.healthy) ? 5000 : false }, } @@ -134,7 +136,8 @@ export const ServiceStatus = () => { projectRef: ref, }, { - refetchInterval: (data) => { + refetchInterval: (query) => { + const data = query.state.data return !data?.healthy ? 5000 : false }, } diff --git a/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx b/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx index 620a847bb75..0c7cf0d0f97 100644 --- a/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx +++ b/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx @@ -17,7 +17,7 @@ export const ActivityStats = () => { const { ref } = useParams() const { data: project } = useSelectedProjectQuery() - const { data: branchesData, isLoading: isLoadingBranches } = useBranchesQuery({ + const { data: branchesData, isPending: isLoadingBranches } = useBranchesQuery({ projectRef: project?.parent_project_ref ?? project?.ref, }) const isDefaultProject = project?.parent_project_ref === undefined @@ -37,7 +37,7 @@ export const ActivityStats = () => { )[0] }, [branchesData]) - const { data: migrationsData, isLoading: isLoadingMigrations } = useMigrationsQuery({ + const { data: migrationsData, isPending: isLoadingMigrations } = useMigrationsQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) @@ -46,7 +46,7 @@ export const ActivityStats = () => { [migrationsData] ) - const { data: backupsData, isLoading: isLoadingBackups } = useBackupsQuery({ + const { data: backupsData, isPending: isLoadingBackups } = useBackupsQuery({ projectRef: project?.ref, }) const latestBackup = useMemo(() => { diff --git a/apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx b/apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx index f1a7e1a024a..8a63f02555f 100644 --- a/apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx +++ b/apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx @@ -18,7 +18,7 @@ import { Markdown } from '../Markdown' export const AdvisorSection = ({ showEmptyState = false }: { showEmptyState?: boolean }) => { const { ref: projectRef } = useParams() - const { data: lints, isLoading: isLoadingLints } = useProjectLintsQuery( + const { data: lints, isPending: isLoadingLints } = useProjectLintsQuery( { projectRef, }, diff --git a/apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx b/apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx index 601c04fadf3..76020010800 100644 --- a/apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx +++ b/apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx @@ -39,6 +39,7 @@ import { useDatabaseSelectorStateSnapshot } from 'state/database-selector' import type { Dashboards } from 'types' import { Button } from 'ui' import { Row } from 'ui-patterns' +import { keepPreviousData } from '@tanstack/react-query' export function CustomReportSection() { const startDate = dayjs().subtract(7, 'day').toISOString() @@ -56,7 +57,7 @@ export function CustomReportSection() { const { data: reportsData } = useContentInfiniteQuery( { projectRef: ref, type: 'report', name: 'Home', limit: 1 }, - { keepPreviousData: true } + { placeholderData: keepPreviousData } ) const homeReport = reportsData?.pages?.[0]?.content?.[0] as Content | undefined const reportContent = homeReport?.content as Dashboards.Content | undefined diff --git a/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.utils.ts b/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.utils.ts index 79039ca0c01..41037c7bae3 100644 --- a/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.utils.ts +++ b/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.utils.ts @@ -1,5 +1,5 @@ -import { useProjectMetricsQuery } from 'data/analytics/project-metrics-query' import type { ProjectMetricsRow } from 'data/analytics/project-metrics-query' +import { useProjectMetricsQuery } from 'data/analytics/project-metrics-query' type ServiceKey = 'db' | 'functions' | 'auth' | 'storage' | 'realtime' @@ -108,7 +108,12 @@ export const useServiceStats = ( projectRef: string, interval: '1hr' | '1day' | '7day' ): ServiceStatsMap => { - const { data, isLoading, error, refetch } = useProjectMetricsQuery({ projectRef, interval }) + const { + data, + isPending: isLoading, + error, + refetch, + } = useProjectMetricsQuery({ projectRef, interval }) return toServiceStatsMap({ data, diff --git a/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx b/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx index 98b4ba12838..7b8dd1706c9 100644 --- a/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx +++ b/apps/studio/components/interfaces/HomeNew/ServiceStatus.tsx @@ -98,7 +98,7 @@ export const ServiceStatus = () => { const isBranch = project?.parentRef !== project?.ref // Get branches data when on a branch - const { data: branches, isLoading: isBranchesLoading } = useBranchesQuery( + const { data: branches, isPending: isBranchesLoading } = useBranchesQuery( { projectRef: isBranch ? project?.parentRef : undefined }, { enabled: isBranch, @@ -110,17 +110,16 @@ export const ServiceStatus = () => { : undefined // [Joshen] Need pooler service check eventually - const { data: status, isLoading } = useProjectServiceStatusQuery( + const { data: status, isPending: isLoading } = useProjectServiceStatusQuery( { projectRef: ref }, { - refetchInterval: (data) => { - return data?.some((service) => !service.healthy) ? 5000 : false - }, + refetchInterval: (query) => + query.state.data?.some((service) => !service.healthy) ? 5000 : false, } ) const { data: edgeFunctionsStatus } = useEdgeFunctionServiceStatusQuery( { projectRef: ref }, - { refetchInterval: (data) => (!data?.healthy ? 5000 : false) } + { refetchInterval: (query) => (!query.state.data?.healthy ? 5000 : false) } ) const authStatus = status?.find((service) => service.name === 'auth') diff --git a/apps/studio/components/interfaces/HomeNew/SnippetDropdown.tsx b/apps/studio/components/interfaces/HomeNew/SnippetDropdown.tsx index 0f46fe195f4..dcaeddc0e90 100644 --- a/apps/studio/components/interfaces/HomeNew/SnippetDropdown.tsx +++ b/apps/studio/components/interfaces/HomeNew/SnippetDropdown.tsx @@ -4,6 +4,7 @@ import Link from 'next/link' import { useRouter } from 'next/router' import { ReactNode, useEffect, useMemo, useRef, useState } from 'react' +import { keepPreviousData } from '@tanstack/react-query' import { useContentInfiniteQuery } from 'data/content/content-infinite-query' import type { Content } from 'data/content/content-query' import { SNIPPET_PAGE_LIMIT } from 'data/content/sql-folders-query' @@ -48,16 +49,21 @@ export const SnippetDropdown = ({ const [search, setSearch] = useState('') const debouncedSearch = useDebounce(search, 500) - const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } = - useContentInfiniteQuery( - { - projectRef, - type: 'sql', - limit: SNIPPET_PAGE_LIMIT, - name: search.length === 0 ? search : debouncedSearch, - }, - { keepPreviousData: true } - ) + const { + data, + isPending: isLoading, + hasNextPage, + fetchNextPage, + isFetchingNextPage, + } = useContentInfiniteQuery( + { + projectRef, + type: 'sql', + limit: SNIPPET_PAGE_LIMIT, + name: search.length === 0 ? search : debouncedSearch, + }, + { placeholderData: keepPreviousData } + ) const snippets = useMemo(() => { const items = data?.pages.flatMap((page) => page.content) ?? [] diff --git a/apps/studio/components/interfaces/HomePageActions.tsx b/apps/studio/components/interfaces/HomePageActions.tsx index 4c1bb728428..b1cfed20599 100644 --- a/apps/studio/components/interfaces/HomePageActions.tsx +++ b/apps/studio/components/interfaces/HomePageActions.tsx @@ -19,6 +19,7 @@ import { ToggleGroupItem, } from 'ui' import { Input } from 'ui-patterns/DataInputs/Input' +import { keepPreviousData } from '@tanstack/react-query' interface HomePageActionsProps { slug?: string @@ -49,7 +50,7 @@ export const HomePageActions = ({ search: search.length === 0 ? search : debouncedSearch, statuses: filterStatus, }, - { keepPreviousData: true } + { placeholderData: keepPreviousData } ) return ( diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx index 6d0f6725f80..de74a74cf6c 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx @@ -49,7 +49,7 @@ export const CronJobPage = () => { const jobId = Number(childId) - const { data: job, isLoading } = useCronJobQuery({ + const { data: job, isPending: isLoading } = useCronJobQuery({ projectRef: project?.ref, connectionString: project?.connectionString, id: jobId, diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx index 2fc7fb2c9bc..edfa42031bf 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx @@ -5,6 +5,7 @@ import { UIEvent, useMemo, useRef, useState } from 'react' import DataGrid, { DataGridHandle, Row } from 'react-data-grid' import { toast } from 'sonner' +import { keepPreviousData } from '@tanstack/react-query' import { useParams } from 'common' import { CreateCronJobSheet } from 'components/interfaces/Integrations/CronJobs/CreateCronJobSheet/CreateCronJobSheet' import AlertError from 'components/ui/AlertError' @@ -65,7 +66,7 @@ export const CronjobsTab = () => { connectionString: project?.connectionString, searchTerm: searchQuery, }, - { keepPreviousData: Boolean(searchQuery), staleTime: Infinity } + { placeholderData: Boolean(searchQuery) ? keepPreviousData : undefined, staleTime: Infinity } ) const cronJobs = useMemo(() => data?.pages.flatMap((p) => p) || [], [data?.pages]) @@ -91,7 +92,7 @@ export const CronjobsTab = () => { handleErrorOnDelete(deletingCronJobIdRef, selectedId, `Cron job not found`), }) - const { data: count, isLoading: isLoadingCount } = useCronJobsCountQuery({ + const { data: count, isPending: isLoadingCount } = useCronJobsCountQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx index 5a23112951e..bea8fed5bdc 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx @@ -36,7 +36,11 @@ const buildFunctionUrl = (slug: string, projectRef: string, restUrl?: string) => export const EdgeFunctionSection = ({ form }: HTTPRequestFieldsProps) => { const { ref } = useParams() const { data: selectedProject } = useSelectedProjectQuery() - const { data: functions, isSuccess, isLoading } = useEdgeFunctionsQuery({ projectRef: ref }) + const { + data: functions, + isSuccess, + isPending: isLoading, + } = useEdgeFunctionsQuery({ projectRef: ref }) const edgeFunctions = useMemo(() => functions ?? [], [functions]) diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx index 9f2e2c492d5..de7223dc5f7 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx @@ -158,7 +158,7 @@ export const PreviousRunsTab = () => { const { data, - isLoading: isLoadingCronJobRuns, + isPending: isLoadingCronJobRuns, isFetching, fetchNextPage, } = useCronJobRunsInfiniteQuery( diff --git a/apps/studio/components/interfaces/Integrations/Landing/useInstalledIntegrations.tsx b/apps/studio/components/interfaces/Integrations/Landing/useInstalledIntegrations.tsx index 0834121c2ea..1c1b2d34d92 100644 --- a/apps/studio/components/interfaces/Integrations/Landing/useInstalledIntegrations.tsx +++ b/apps/studio/components/interfaces/Integrations/Landing/useInstalledIntegrations.tsx @@ -25,7 +25,7 @@ export const useInstalledIntegrations = () => { data, error: fdwError, isError: isErrorFDWs, - isLoading: isFDWLoading, + isPending: isFDWLoading, isSuccess: isSuccessFDWs, } = useFDWsQuery({ projectRef: project?.ref, @@ -35,7 +35,7 @@ export const useInstalledIntegrations = () => { data: extensions, error: extensionsError, isError: isErrorExtensions, - isLoading: isExtensionsLoading, + isPending: isExtensionsLoading, isSuccess: isSuccessExtensions, } = useDatabaseExtensionsQuery({ projectRef: project?.ref, @@ -46,7 +46,7 @@ export const useInstalledIntegrations = () => { data: schemas, error: schemasError, isError: isErrorSchemas, - isLoading: isSchemasLoading, + isPending: isSchemasLoading, isSuccess: isSuccessSchemas, } = useSchemasQuery({ projectRef: project?.ref, diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueueCells.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueueCells.tsx index a8d51796084..b6192a06ebe 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/QueueCells.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/QueueCells.tsx @@ -62,7 +62,7 @@ export const QueueCreatedAtCell = ({ queue }: QueueCellProps) => ( export const QueueSizeCell = ({ queue }: QueueCellProps) => { const { data: selectedProject } = useSelectedProjectQuery() - const { data: metrics, isLoading } = useQueuesMetricsQuery( + const { data: metrics, isPending: isLoading } = useQueuesMetricsQuery( { queueName: queue.queue_name, projectRef: selectedProject?.ref, diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx index 9f18345295f..152d19936ae 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx @@ -46,7 +46,7 @@ export const QueueTab = () => { const [deleteQueueModalShown, setDeleteQueueModalShown] = useState(false) const [selectedTypes, setSelectedTypes] = useState([]) - const { data: tables, isLoading: isLoadingTables } = useTablesQuery({ + const { data: tables, isPending: isLoadingTables } = useTablesQuery({ projectRef: project?.ref, connectionString: project?.connectionString, schema: 'pgmq', @@ -66,7 +66,13 @@ export const QueueTab = () => { connectionString: project?.connectionString, }) - const { data, error, isLoading, fetchNextPage, isFetching } = useQueueMessagesInfiniteQuery( + const { + data, + error, + isPending: isLoading, + fetchNextPage, + isFetching, + } = useQueueMessagesInfiniteQuery( { projectRef: project?.ref, connectionString: project?.connectionString, diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesRows.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesRows.tsx index bcb03caec59..ea46973bc81 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/QueuesRows.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesRows.tsx @@ -27,7 +27,7 @@ const QueueRow = ({ queue }: { queue: PostgresQueue }) => { const queueTable = queueTables?.find((x) => x.name === `q_${queue.queue_name}`) const isRlsEnabled = !!queueTable?.rls_enabled - const { data: metrics, isLoading } = useQueuesMetricsQuery( + const { data: metrics, isPending: isLoading } = useQueuesMetricsQuery( { queueName: queue.queue_name, projectRef: selectedProject?.ref, diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx index f4ad4bf11bd..e39d4506f02 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx @@ -74,7 +74,7 @@ export const QueuesSettings = () => { const { data: isExposed, isSuccess, - isLoading, + isPending: isLoading, } = useQueuesExposePostgrestStatusQuery({ projectRef: project?.ref, connectionString: project?.connectionString, diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx index d7172ee4e29..56ccdc67215 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx @@ -30,7 +30,7 @@ export const QueuesTab = () => { const { data: queues, error, - isLoading, + isPending: isLoading, isError, isRefetching, refetch, diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx index 0fa5c51edd0..da65aa3ea81 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx @@ -64,7 +64,13 @@ export const QueueSettings = ({}: QueueSettingsProps) => { connectionString: project?.connectionString, }) - const { data, error, isLoading, isSuccess, isError } = useDatabaseRolesQuery({ + const { + data, + error, + isPending: isLoading, + isSuccess, + isError, + } = useDatabaseRolesQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx index e723723b37a..608c3b77fd7 100644 --- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx +++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx @@ -43,7 +43,7 @@ const formId = 'edit-vault-secret-form' const EditSecretModal = ({ visible, secret, onClose }: EditSecretModalProps) => { const [showSecretValue, setShowSecretValue] = useState(false) const { data: project } = useSelectedProjectQuery() - const { data, isLoading: isLoadingSecretValue } = useVaultSecretDecryptedValueQuery( + const { data, isPending: isLoadingSecretValue } = useVaultSecretDecryptedValueQuery( { projectRef: project?.ref, id: secret.id, diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx index 05a440e41a9..fa68a5142e4 100644 --- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx +++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx @@ -1,9 +1,9 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' import { sortBy } from 'lodash' import { RefreshCw, Search, X } from 'lucide-react' +import { parseAsBoolean, useQueryState } from 'nuqs' import { useEffect, useMemo, useRef, useState } from 'react' import DataGrid, { Row } from 'react-data-grid' -import { parseAsBoolean, useQueryState } from 'nuqs' import { toast } from 'sonner' import { useParams } from 'common' @@ -50,7 +50,14 @@ export const SecretsManagement = () => { 'tables' ) - const { data, isLoading, isRefetching, refetch, error, isError } = useVaultSecretsQuery({ + const { + data, + isPending: isLoading, + isRefetching, + refetch, + error, + isError, + } = useVaultSecretsQuery({ projectRef: project?.ref!, connectionString: project?.connectionString, }) diff --git a/apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx b/apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx index c31205a5b9c..2b07faa0cab 100644 --- a/apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx +++ b/apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx @@ -5,6 +5,7 @@ import PartnerIcon from 'components/ui/PartnerIcon' import { useIntegrationsQuery } from 'data/integrations/integrations-query' import type { IntegrationName } from 'data/integrations/integrations.types' import { useOrganizationsQuery } from 'data/organizations/organizations-query' +import { ChevronDown } from 'lucide-react' import type { Organization } from 'types' import { Badge, @@ -20,7 +21,6 @@ import { Popover_Shadcn_, cn, } from 'ui' -import { ChevronDown } from 'lucide-react' export interface OrganizationPickerProps { integrationName: IntegrationName @@ -41,7 +41,7 @@ const OrganizationPicker = ({ const ref = useRef(null) const { data: integrationData } = useIntegrationsQuery() - const { data: organizationsData, isLoading: isLoadingOrganization } = useOrganizationsQuery() + const { data: organizationsData, isPending: isLoadingOrganization } = useOrganizationsQuery() const installed = useMemo( () => diff --git a/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx b/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx index 84ce0b01028..ef6c0330bd1 100644 --- a/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx +++ b/apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx @@ -94,7 +94,7 @@ const ProjectLinker = ({ ) const { data: selectedOrganization } = useSelectedOrganizationQuery() - const { data: orgProjects, isLoading: loadingSupabaseProjects } = useOrgProjectsInfiniteQuery({ + const { data: orgProjects, isPending: loadingSupabaseProjects } = useOrgProjectsInfiniteQuery({ slug, }) const numProjects = orgProjects?.pages[0].pagination.count ?? 0 diff --git a/apps/studio/components/interfaces/Integrations/Webhooks/ListTab.tsx b/apps/studio/components/interfaces/Integrations/Webhooks/ListTab.tsx index bab6de43b93..46ce4496507 100644 --- a/apps/studio/components/interfaces/Integrations/Webhooks/ListTab.tsx +++ b/apps/studio/components/interfaces/Integrations/Webhooks/ListTab.tsx @@ -29,7 +29,7 @@ export const WebhooksListTab = () => { 'triggers' ) - const { data: hooks, isLoading: isLoadingHooks } = useDatabaseHooksQuery({ + const { data: hooks, isPending: isLoadingHooks } = useDatabaseHooksQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx index 60bc7bc8819..b159095c48a 100644 --- a/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx +++ b/apps/studio/components/interfaces/Integrations/Wrappers/EditWrapperSheet.tsx @@ -44,7 +44,7 @@ export const EditWrapperSheet = ({ const queryClient = useQueryClient() const { data: project } = useSelectedProjectQuery() - const { data: secrets, isLoading: isSecretsLoading } = useVaultSecretsQuery({ + const { data: secrets, isPending: isSecretsLoading } = useVaultSecretsQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx index 52f62761795..d9be6b74874 100644 --- a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx +++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx @@ -219,7 +219,7 @@ const TableForm = ({ const { data: project } = useSelectedProjectQuery() const { data: schemas, - isLoading, + isPending: isLoading, isSuccess, } = useSchemasQuery({ projectRef: project?.ref, diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx index 1f013b58ce8..61b05b06a0c 100644 --- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx +++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx @@ -50,7 +50,7 @@ type DialogType = 'legacy' | 'create' | 'rotate' | 'key-details' | 'revoke' | 'd export const JWTSecretKeysTable = () => { const { ref: projectRef } = useParams() - const { data: project, isLoading: isProjectLoading } = useSelectedProjectQuery() + const { data: project, isPending: isProjectLoading } = useSelectedProjectQuery() const newJwtSecrets = useFlag('newJwtSecrets') @@ -59,19 +59,19 @@ export const JWTSecretKeysTable = () => { const [shownDialog, setShownDialog] = useState() const { canReadAPIKeys, isLoading: isLoadingCanReadAPIKeys } = useApiKeysVisibility() - const { data: signingKeys, isLoading: isLoadingSigningKeys } = useJWTSigningKeysQuery( + const { data: signingKeys, isPending: isLoadingSigningKeys } = useJWTSigningKeysQuery( { projectRef, }, { enabled: canReadAPIKeys } ) - const { data: legacyKey, isLoading: isLoadingLegacyKey } = useLegacyJWTSigningKeyQuery( + const { data: legacyKey, isPending: isLoadingLegacyKey } = useLegacyJWTSigningKeyQuery( { projectRef, }, { enabled: canReadAPIKeys } ) - const { data: legacyAPIKeysStatus, isLoading: isLoadingLegacyAPIKeysStatus } = + const { data: legacyAPIKeysStatus, isPending: isLoadingLegacyAPIKeysStatus } = useLegacyAPIKeysStatusQuery({ projectRef }, { enabled: canReadAPIKeys }) const { mutate: migrateJWTSecret, isPending: isMigrating } = useLegacyJWTSigningKeyCreateMutation( diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/rotate-key-dialog.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/rotate-key-dialog.tsx index 68002a01837..e1274be2ade 100644 --- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/rotate-key-dialog.tsx +++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/rotate-key-dialog.tsx @@ -38,7 +38,7 @@ export function RotateKeyDialog({ const [isPreviouslyUsedUnderstood, setPreviouslyUsedUnderstood] = useState(false) const [isEdgeFunctionsVerifyJWTUnderstood, setEdgeFunctionsVerifyJWTUnderstood] = useState(false) - const { data: edgeFunctions, isLoading: isLoadingEdgeFunctions } = useEdgeFunctionsQuery({ + const { data: edgeFunctions, isPending: isLoadingEdgeFunctions } = useEdgeFunctionsQuery({ projectRef, }) diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx index 4ed15269eb0..91001e58147 100644 --- a/apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx +++ b/apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx @@ -104,7 +104,7 @@ const JWTSettings = () => { { enabled: canReadAPIKeys } ) - const { data: authConfig, isLoading: isLoadingAuthConfig } = useAuthConfigQuery({ projectRef }) + const { data: authConfig, isPending: isLoadingAuthConfig } = useAuthConfigQuery({ projectRef }) const { mutate: updateAuthConfig, isPending: isUpdatingAuthConfig } = useAuthConfigUpdateMutation() diff --git a/apps/studio/components/interfaces/LogDrains/LogDrains.tsx b/apps/studio/components/interfaces/LogDrains/LogDrains.tsx index cae9260be8d..ae111a56349 100644 --- a/apps/studio/components/interfaces/LogDrains/LogDrains.tsx +++ b/apps/studio/components/interfaces/LogDrains/LogDrains.tsx @@ -6,7 +6,7 @@ import { IS_PLATFORM, useFlag, useParams } from 'common' import AlertError from 'components/ui/AlertError' import { useDeleteLogDrainMutation } from 'data/log-drains/delete-log-drain-mutation' import { LogDrainData, useLogDrainsQuery } from 'data/log-drains/log-drains-query' -import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan' +import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements' import { useTrack } from 'lib/telemetry/track' import { Button, @@ -29,7 +29,6 @@ import { LOG_DRAIN_TYPES, LogDrainType } from './LogDrains.constants' import { LogDrainsCard } from './LogDrainsCard' import { LogDrainsEmpty } from './LogDrainsEmpty' import { VoteLink } from './VoteLink' -import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements' export function LogDrains({ onNewDrainClick, @@ -46,7 +45,7 @@ export function LogDrains({ const { ref } = useParams() const { data: logDrains, - isLoading, + isPending: isLoading, refetch, error, isError, diff --git a/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx b/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx index 0ec5c8a6807..6329a83e10c 100644 --- a/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx +++ b/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx @@ -1,4 +1,5 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' +import { keepPreviousData } from '@tanstack/react-query' import { useDebounce } from '@uidotdev/usehooks' import { useParams } from 'common' import dayjs from 'dayjs' @@ -68,21 +69,28 @@ export const AuditLogs = () => { const { hasAccess: hasAccessToAuditLogs, isLoading: isLoadingEntitlements } = useCheckEntitlements('security.audit_logs_days') - const { data, error, isLoading, isSuccess, isError, isRefetching, refetch } = - useOrganizationAuditLogsQuery( - { - slug, - iso_timestamp_start: dateRange.from, - iso_timestamp_end: dateRange.to, + const { + data, + error, + isPending: isLoading, + isSuccess, + isError, + isRefetching, + refetch, + } = useOrganizationAuditLogsQuery( + { + slug, + iso_timestamp_start: dateRange.from, + iso_timestamp_end: dateRange.to, + }, + { + enabled: canReadAuditLogs, + retry: false, + refetchOnWindowFocus: (query) => { + return !query.state.error?.message.endsWith(logsUpgradeError) }, - { - enabled: canReadAuditLogs, - retry: false, - refetchOnWindowFocus: (query) => { - return !query.state.error?.message.endsWith(logsUpgradeError) - }, - } - ) + } + ) const isLogsNotAvailableBasedOnPlan = isError && !hasAccessToAuditLogs const isRangeExceededError = isError && error.message.includes('range exceeded') @@ -97,7 +105,7 @@ export const AuditLogs = () => { fetchNextPage, } = useOrgProjectsInfiniteQuery( { slug, search: search.length === 0 ? search : debouncedSearch }, - { keepPreviousData: true, enabled: showFilters } + { placeholderData: keepPreviousData, enabled: showFilters } ) const { data: organizations } = useOrganizationsQuery({ enabled: showFilters, diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx index 29019e4f2b5..cd7ff78001e 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx @@ -32,7 +32,7 @@ const BillingBreakdown = () => { const { data: subscription, error: subscriptionError, - isLoading: isLoadingSubscription, + isPending: isLoadingSubscription, isError: isErrorSubscription, } = useOrgSubscriptionQuery({ orgSlug }, { enabled: canReadSubscriptions }) diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx index d9405b96769..9fb8c3845fe 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx @@ -52,7 +52,7 @@ const UpcomingInvoice = ({ slug }: UpcomingInvoiceProps) => { const { data: upcomingInvoice, error: error, - isLoading, + isPending: isLoading, isError, isSuccess, } = useOrgUpcomingInvoiceQuery({ orgSlug: slug }) diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx index 3d18d05d427..8a555aa4076 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx @@ -40,14 +40,14 @@ export const BillingCustomerData = () => { const { data: customerProfile, error, - isLoading, + isPending: isLoading, isSuccess, } = useOrganizationCustomerProfileQuery({ slug }, { enabled: canReadBillingCustomerData }) const { data: taxId, error: errorLoadingTaxId, - isLoading: isLoadingTaxId, + isPending: isLoadingTaxId, isSuccess: loadedTaxId, } = useOrganizationTaxIdQuery({ slug }) diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx index 64510709315..a2eb98849a5 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx @@ -51,7 +51,7 @@ const BillingEmail = () => { 'organizations' ) - const { data: billingCustomer, isLoading: loadingBillingCustomer } = + const { data: billingCustomer, isPending: loadingBillingCustomer } = useOrganizationCustomerProfileQuery({ slug }, { enabled: canReadBillingEmail }) const form = useForm>({ diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx index 761eb718843..f49b33aa732 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx @@ -42,7 +42,7 @@ const CostControl = ({}: CostControlProps) => { const { data: subscription, error, - isLoading, + isPending: isLoading, isSuccess, isError, } = useOrgSubscriptionQuery({ orgSlug: slug }, { enabled: canReadSubscriptions }) diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx index b48ada2cdeb..ef0384c7049 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx @@ -53,7 +53,7 @@ const SpendCapSidePanel = () => { const visible = snap.panelKey === 'costControl' const onClose = () => snap.setPanelKey(undefined) - const { data: subscription, isLoading } = useOrgSubscriptionQuery({ orgSlug: slug }) + const { data: subscription, isPending: isLoading } = useOrgSubscriptionQuery({ orgSlug: slug }) const { mutate: updateOrgSubscription, isPending: isUpdating } = useOrgSubscriptionUpdateMutation( { onSuccess: () => { diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx index 3da418ea629..badd4a27576 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx @@ -25,7 +25,7 @@ const CreditBalance = () => { const { data: subscription, error, - isLoading, + isPending: isLoading, isError, isSuccess, } = useOrgSubscriptionQuery({ orgSlug: slug }, { enabled: canReadSubscriptions }) diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx index a9fcc2282d1..aca7641708a 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx @@ -57,13 +57,15 @@ const PaymentMethodSelection = forwardRef(function PaymentMethodSelection( const { resolvedTheme } = useTheme() const paymentRef = useRef(null) const [setupNewPaymentMethod, setSetupNewPaymentMethod] = useState(null) - const { data: customerProfile, isLoading: isCustomerProfileLoading } = + const { data: customerProfile, isPending: isCustomerProfileLoading } = useOrganizationCustomerProfileQuery({ slug, }) - const { data: taxId, isLoading: isCustomerTaxIdLoading } = useOrganizationTaxIdQuery({ slug }) + const { data: taxId, isPending: isCustomerTaxIdLoading } = useOrganizationTaxIdQuery({ slug }) - const { data: allPaymentMethods, isLoading } = useOrganizationPaymentMethodsQuery({ slug }) + const { data: allPaymentMethods, isPending: isLoading } = useOrganizationPaymentMethodsQuery({ + slug, + }) const paymentMethods = useMemo(() => { if (!allPaymentMethods) diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx index 87a585c851b..a8fd170f8f4 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx @@ -90,13 +90,13 @@ export const PlanUpdateSidePanel = () => { const { data: subscription, isSuccess: isSuccessSubscription } = useOrgSubscriptionQuery({ orgSlug: slug, }) - const { data: plans, isLoading: isLoadingPlans } = useOrgPlansQuery({ orgSlug: slug }) + const { data: plans, isPending: isLoadingPlans } = useOrgPlansQuery({ orgSlug: slug }) const { data: membersExceededLimit } = useFreeProjectLimitCheckQuery({ slug }) const { data: subscriptionPreview, error: subscriptionPreviewError, - isLoading: subscriptionPreviewIsLoading, + isPending: subscriptionPreviewIsLoading, isSuccess: subscriptionPreviewInitialized, } = useOrganizationBillingSubscriptionPreview({ tier: selectedTier, organizationSlug: slug }) diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx index 71382697cc8..94cb875b077 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx @@ -33,7 +33,7 @@ const Subscription = () => { const { data: subscription, error, - isLoading, + isPending: isLoading, isError, isSuccess, } = useOrgSubscriptionQuery({ orgSlug: slug }, { enabled: canReadSubscriptions }) diff --git a/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx b/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx index ca876d5639e..ef778bece6c 100644 --- a/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx +++ b/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx @@ -49,7 +49,12 @@ export const InvoicesSettings = () => { }, { enabled: selectedOrganization?.managed_by === 'supabase' } ) - const { data, error, isLoading, isError } = useInvoicesQuery( + const { + data, + error, + isPending: isLoading, + isError, + } = useInvoicesQuery( { slug, offset, diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx index 8d303c8c2f9..fd14a603a1b 100644 --- a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx +++ b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx @@ -46,7 +46,7 @@ export const OAuthApps = () => { const { data: publishedApps, error: publishedAppsError, - isLoading: isLoadingPublishedApps, + isPending: isLoadingPublishedApps, isSuccess: isSuccessPublishedApps, isError: isErrorPublishedApps, } = useOAuthAppsQuery({ slug }, { enabled: canReadOAuthApps }) @@ -57,7 +57,7 @@ export const OAuthApps = () => { const { data: authorizedApps, - isLoading: isLoadingAuthorizedApps, + isPending: isLoadingAuthorizedApps, isSuccess: isSuccessAuthorizedApps, isError: isErrorAuthorizedApps, } = useAuthorizedAppsQuery({ slug }) diff --git a/apps/studio/components/interfaces/Organization/OrgNotFound.tsx b/apps/studio/components/interfaces/Organization/OrgNotFound.tsx index cf91ba5177c..5adbd66ad3d 100644 --- a/apps/studio/components/interfaces/Organization/OrgNotFound.tsx +++ b/apps/studio/components/interfaces/Organization/OrgNotFound.tsx @@ -7,7 +7,7 @@ export const OrgNotFound = ({ slug }: { slug?: string }) => { const { data: organizations, isSuccess: isOrganizationsSuccess, - isLoading: isOrganizationsLoading, + isPending: isOrganizationsLoading, isError: isOrganizationsError, error: organizationsError, } = useOrganizationsQuery() diff --git a/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx b/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx index 0a66f141583..aeec264cca6 100644 --- a/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx +++ b/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx @@ -69,7 +69,7 @@ export const SSOConfig = () => { const { data: ssoConfig, - isLoading: isLoadingSSOConfig, + isPending: isLoadingSSOConfig, isSuccess, isError, error: configError, diff --git a/apps/studio/components/interfaces/Organization/SecuritySettings.tsx b/apps/studio/components/interfaces/Organization/SecuritySettings.tsx index d437619a73a..636d37dcffd 100644 --- a/apps/studio/components/interfaces/Organization/SecuritySettings.tsx +++ b/apps/studio/components/interfaces/Organization/SecuritySettings.tsx @@ -59,7 +59,7 @@ export const SecuritySettings = () => { const { data: mfaConfig, error: mfaError, - isLoading: isLoadingMfa, + isPending: isLoadingMfa, isError: isErrorMfa, isSuccess: isSuccessMfa, } = useOrganizationMfaQuery({ slug }, { enabled: isPaidPlan && canReadMfaConfig }) diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx index 581f3f9565f..fbea9248892 100644 --- a/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx +++ b/apps/studio/components/interfaces/Organization/TeamSettings/MemberRow.tsx @@ -38,7 +38,7 @@ export const MemberRow = ({ member }: MemberRowProps) => { const { profile } = useProfile() const { data: selectedOrganization } = useSelectedOrganizationQuery() - const { data: roles, isLoading: isLoadingRoles } = useOrganizationRolesV2Query({ + const { data: roles, isPending: isLoadingRoles } = useOrganizationRolesV2Query({ slug: selectedOrganization?.slug, }) const hasProjectScopedRoles = (roles?.project_scoped_roles ?? []).length > 0 diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx index 12387c9357e..5f8accf7e02 100644 --- a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx +++ b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx @@ -37,7 +37,7 @@ const MembersView = ({ searchString }: MembersViewProps) => { const { data: members = [], error: membersError, - isLoading: isLoadingMembers, + isPending: isLoadingMembers, isError: isErrorMembers, isSuccess: isSuccessMembers, } = useOrganizationMembersQuery({ slug }) diff --git a/apps/studio/components/interfaces/Organization/Usage/TotalUsage.tsx b/apps/studio/components/interfaces/Organization/Usage/TotalUsage.tsx index 7b480f0f2a7..d61e75dabc6 100644 --- a/apps/studio/components/interfaces/Organization/Usage/TotalUsage.tsx +++ b/apps/studio/components/interfaces/Organization/Usage/TotalUsage.tsx @@ -50,7 +50,7 @@ export const TotalUsage = ({ const { data: usage, error: usageError, - isLoading: isLoadingUsage, + isPending: isLoadingUsage, isError: isErrorUsage, isSuccess: isSuccessUsage, } = useOrgUsageQuery({ diff --git a/apps/studio/components/interfaces/Organization/Usage/Usage.tsx b/apps/studio/components/interfaces/Organization/Usage/Usage.tsx index ec443ebbdd7..e10934f2745 100644 --- a/apps/studio/components/interfaces/Organization/Usage/Usage.tsx +++ b/apps/studio/components/interfaces/Organization/Usage/Usage.tsx @@ -47,7 +47,7 @@ export const Usage = () => { const { data: subscription, error: subscriptionError, - isLoading: isLoadingSubscription, + isPending: isLoadingSubscription, isError: isErrorSubscription, isSuccess: isSuccessSubscription, } = useOrgSubscriptionQuery({ orgSlug: slug }) @@ -102,7 +102,7 @@ export const Usage = () => { const { data: orgDailyStats, error: orgDailyStatsError, - isLoading: isLoadingOrgDailyStats, + isPending: isLoadingOrgDailyStats, isError: isErrorOrgDailyStats, } = useOrgDailyStatsQuery({ orgSlug: slug, diff --git a/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx b/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx index 3ca7f4e6235..7ab1ed539b6 100644 --- a/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx +++ b/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx @@ -39,10 +39,13 @@ export const DiskUsage = ({ usage, currentBillingCycleSelected, }: DiskUsageProps) => { - const { data, isError, isLoading, isSuccess, error } = useOrgProjectsInfiniteQuery( - { slug }, - { enabled: currentBillingCycleSelected } - ) + const { + data, + isError, + isPending: isLoading, + isSuccess, + error, + } = useOrgProjectsInfiniteQuery({ slug }, { enabled: currentBillingCycleSelected }) const projects = useMemo(() => data?.pages.flatMap((page) => page.projects) || [], [data?.pages]) const relevantProjects = useMemo(() => { diff --git a/apps/studio/components/interfaces/Organization/Usage/UsageSection/UsageSection.tsx b/apps/studio/components/interfaces/Organization/Usage/UsageSection/UsageSection.tsx index a77b9bc2697..f41aba76e50 100644 --- a/apps/studio/components/interfaces/Organization/Usage/UsageSection/UsageSection.tsx +++ b/apps/studio/components/interfaces/Organization/Usage/UsageSection/UsageSection.tsx @@ -37,7 +37,7 @@ const UsageSection = ({ const { data: usage, error: usageError, - isLoading: isLoadingUsage, + isPending: isLoadingUsage, isError: isErrorUsage, isSuccess: isSuccessUsage, } = useOrgUsageQuery({ diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx index 94d20927cd5..37413a9ba01 100644 --- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx +++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx @@ -24,7 +24,7 @@ export const OrganizationInvite = () => { error, isSuccess: isSuccessInvitation, isError: isErrorInvitation, - isLoading: isLoadingInvitation, + isPending: isLoadingInvitation, } = useOrganizationInvitationTokenQuery( { slug, token }, { diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.StoragePicker.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.StoragePicker.tsx index bc3c1fb6da1..62455fda417 100644 --- a/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.StoragePicker.tsx +++ b/apps/studio/components/interfaces/ProjectAPIDocs/SecondLevelNav.StoragePicker.tsx @@ -12,6 +12,7 @@ import { CommandList_Shadcn_, } from 'ui' import type { ResourcePickerRenderProps } from './SecondLevelNav.Layout' +import { keepPreviousData } from '@tanstack/react-query' type StorageResourceListProps = ResourcePickerRenderProps & { projectRef?: string @@ -47,7 +48,7 @@ const useInfiniteLoadingBuckets = ({ { projectRef, search: searchQuery }, { enabled: !!projectRef, - keepPreviousData: rawQuery.length === 0, + placeholderData: rawQuery.length === 0 ? keepPreviousData : undefined, } ) const buckets = useMemo(() => data?.pages.flatMap((page) => page) ?? [], [data]) diff --git a/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx index 032ae6e22a6..9c6b54b3ad0 100644 --- a/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx +++ b/apps/studio/components/interfaces/ProjectCreation/PostgresVersionSelector.tsx @@ -69,7 +69,7 @@ export const PostgresVersionSelector = ({ const { data: createVersions, - isLoading: isLoadingProjectCreateVersions, + isPending: isLoadingProjectCreateVersions, isSuccess, } = useProjectCreationPostgresVersionsQuery( { @@ -80,7 +80,7 @@ export const PostgresVersionSelector = ({ { enabled: type === 'create' } ) - const { data: unpauseVersions, isLoading: isLoadingProjectUnpauseVersions } = + const { data: unpauseVersions, isPending: isLoadingProjectUnpauseVersions } = useProjectUnpausePostgresVersionsQuery( { projectRef: project?.ref }, { enabled: type === 'unpause' } diff --git a/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx index e793ecfc5a9..696fdf86ae4 100644 --- a/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx +++ b/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx @@ -56,14 +56,14 @@ export const RegionSelector = ({ const smartRegionEnabled = useFlag('enableSmartRegion') - const { isLoading: isLoadingDefaultRegion } = useDefaultRegionQuery( + const { isPending: isLoadingDefaultRegion } = useDefaultRegionQuery( { cloudProvider }, { enabled: !smartRegionEnabled } ) const { data: availableRegionsData, - isLoading: isLoadingAvailableRegions, + isPending: isLoadingAvailableRegions, isError: isErrorAvailableRegions, error: errorAvailableRegions, } = useOrganizationAvailableRegionsQuery( diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx index 93c9bd231fa..8afc26625ee 100644 --- a/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx +++ b/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx @@ -1,13 +1,16 @@ import { Check, Lightbulb, Table2 } from 'lucide-react' -import { useState, useEffect } from 'react' +import { useEffect, useState } from 'react' import { AccordionTrigger } from '@ui/components/shadcn/ui/accordion' import { useIndexAdvisorStatus } from 'components/interfaces/QueryPerformance/hooks/useIsIndexAdvisorStatus' import AlertError from 'components/ui/AlertError' +import { DocsButton } from 'components/ui/DocsButton' import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query' import { useGetIndexAdvisorResult } from 'data/database/retrieve-index-advisor-result-query' import { useGetIndexesFromSelectQuery } from 'data/database/retrieve-index-from-select-query' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' +import { DOCS_URL } from 'lib/constants' +import { useTrack } from 'lib/telemetry/track' import { AccordionContent_Shadcn_, AccordionItem_Shadcn_, @@ -23,19 +26,16 @@ import { cn, } from 'ui' import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' -import { IndexAdvisorDisabledState } from './IndexAdvisor/IndexAdvisorDisabledState' -import { IndexImprovementText } from './IndexAdvisor/IndexImprovementText' -import { QueryPanelContainer, QueryPanelScoreSection, QueryPanelSection } from './QueryPanel' import { useIndexInvalidation } from './hooks/useIndexInvalidation' +import { EnableIndexAdvisorButton } from './IndexAdvisor/EnableIndexAdvisorButton' import { calculateImprovement, createIndexes, hasIndexRecommendations, } from './IndexAdvisor/index-advisor.utils' -import { EnableIndexAdvisorButton } from './IndexAdvisor/EnableIndexAdvisorButton' -import { DocsButton } from 'components/ui/DocsButton' -import { DOCS_URL } from 'lib/constants' -import { useTrack } from 'lib/telemetry/track' +import { IndexAdvisorDisabledState } from './IndexAdvisor/IndexAdvisorDisabledState' +import { IndexImprovementText } from './IndexAdvisor/IndexImprovementText' +import { QueryPanelContainer, QueryPanelScoreSection, QueryPanelSection } from './QueryPanel' interface QueryIndexesProps { selectedRow: any @@ -56,7 +56,7 @@ export const QueryIndexes = ({ selectedRow }: QueryIndexesProps) => { const { data: usedIndexes, isSuccess, - isLoading, + isPending: isLoading, isError, error, } = useGetIndexesFromSelectQuery({ @@ -65,7 +65,7 @@ export const QueryIndexes = ({ selectedRow }: QueryIndexesProps) => { query: selectedRow?.['query'], }) - const { data: extensions, isLoading: isLoadingExtensions } = useDatabaseExtensionsQuery({ + const { data: extensions, isPending: isLoadingExtensions } = useDatabaseExtensionsQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceFilterBar.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceFilterBar.tsx index 81ec966b358..779461e2f9d 100644 --- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceFilterBar.tsx +++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceFilterBar.tsx @@ -1,19 +1,19 @@ import { useDebounce } from '@uidotdev/usehooks' import { Search, X } from 'lucide-react' -import { parseAsArrayOf, parseAsString, useQueryStates, parseAsJson } from 'nuqs' +import { parseAsArrayOf, parseAsJson, parseAsString, useQueryStates } from 'nuqs' import { ChangeEvent, ReactNode, useEffect, useState } from 'react' +import { + NumericFilter, + ReportsNumericFilter, +} from 'components/interfaces/Reports/v2/ReportsNumericFilter' import { FilterPopover } from 'components/ui/FilterPopover' import { useDatabaseRolesQuery } from 'data/database-roles/database-roles-query' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui' import { Input } from 'ui-patterns/DataInputs/Input' -import { useQueryPerformanceSort } from './hooks/useQueryPerformanceSort' -import { - ReportsNumericFilter, - NumericFilter, -} from 'components/interfaces/Reports/v2/ReportsNumericFilter' import { useIndexAdvisorStatus } from './hooks/useIsIndexAdvisorStatus' +import { useQueryPerformanceSort } from './hooks/useQueryPerformanceSort' export const QueryPerformanceFilterBar = ({ actions, @@ -38,7 +38,7 @@ export const QueryPerformanceFilterBar = ({ } as NumericFilter), indexAdvisor: parseAsString.withDefault('false'), }) - const { data, isLoading: isLoadingRoles } = useDatabaseRolesQuery({ + const { data, isPending: isLoadingRoles } = useDatabaseRolesQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) diff --git a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx index 4cab4d12cac..fb3bf7c4eb3 100644 --- a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx +++ b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/TableSelector.tsx @@ -43,7 +43,14 @@ const TableSelector = ({ const { data: project } = useSelectedProjectQuery() const [searchInput, setSearchInput] = useState('') - const { data, isLoading, isSuccess, isError, error, refetch } = useEntityTypesQuery({ + const { + data, + isPending: isLoading, + isSuccess, + isError, + error, + refetch, + } = useEntityTypesQuery({ projectRef: project?.ref, search: searchInput, connectionString: project?.connectionString, diff --git a/apps/studio/components/interfaces/Realtime/Policies.tsx b/apps/studio/components/interfaces/Realtime/Policies.tsx index 9b8afb8cfb3..2c62ebb7a4c 100644 --- a/apps/studio/components/interfaces/Realtime/Policies.tsx +++ b/apps/studio/components/interfaces/Realtime/Policies.tsx @@ -20,7 +20,7 @@ export const RealtimePolicies = () => { const { data: tables, - isLoading, + isPending: isLoading, isSuccess, isError, error, @@ -40,7 +40,7 @@ export const RealtimePolicies = () => { ) const { data: policies, - isLoading: isLoadingPolicies, + isPending: isLoadingPolicies, isError: isPoliciesError, error: policiesError, } = useDatabasePoliciesQuery({ diff --git a/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx b/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx index 713454d1ba7..43b57533bf0 100644 --- a/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx +++ b/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx @@ -55,7 +55,12 @@ export const RealtimeSettings = () => { projectRef: project?.ref, connectionString: project?.connectionString, }) - const { data, error, isLoading, isError } = useRealtimeConfigurationQuery({ + const { + data, + error, + isPending: isLoading, + isError, + } = useRealtimeConfigurationQuery({ projectRef, }) diff --git a/apps/studio/components/interfaces/Reports/MetricOptions.tsx b/apps/studio/components/interfaces/Reports/MetricOptions.tsx index 19cc6bab799..356ae4b78f4 100644 --- a/apps/studio/components/interfaces/Reports/MetricOptions.tsx +++ b/apps/studio/components/interfaces/Reports/MetricOptions.tsx @@ -56,7 +56,7 @@ export const MetricOptions = ({ config, handleChartSelection }: MetricOptionsPro const { mutate: sendEvent } = useSendEventMutation() const debouncedSearch = useDebounce(search, 300) - const { data, isLoading } = useContentQuery({ + const { data, isPending: isLoading } = useContentQuery({ projectRef, type: 'sql', name: debouncedSearch.length === 0 ? undefined : debouncedSearch, diff --git a/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx b/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx index 84f03a1f8a0..9c5592727f7 100644 --- a/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx +++ b/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx @@ -7,11 +7,11 @@ import { ChartConfig } from 'components/interfaces/SQLEditor/UtilityPanel/ChartC import { ButtonTooltip } from 'components/ui/ButtonTooltip' import NoDataPlaceholder from 'components/ui/Charts/NoDataPlaceholder' import { AnalyticsInterval } from 'data/analytics/constants' +import { mapMultiResponseToAnalyticsData } from 'data/analytics/infra-monitoring-queries' import { InfraMonitoringAttribute, useInfraMonitoringAttributesQuery, } from 'data/analytics/infra-monitoring-query' -import { mapMultiResponseToAnalyticsData } from 'data/analytics/infra-monitoring-queries' import { ProjectDailyStatsAttribute, useProjectDailyStatsQuery, @@ -70,7 +70,7 @@ export const ChartBlock = ({ const { data: dailyStatsData, isFetching: isFetchingDailyStats, - isLoading: isLoadingDailyStats, + isPending: isLoadingDailyStats, } = useProjectDailyStatsQuery( { projectRef: ref as string, @@ -84,7 +84,7 @@ export const ChartBlock = ({ const { data: infraMonitoringRawData, isFetching: isFetchingInfraMonitoring, - isLoading: isLoadingInfraMonitoring, + isPending: isLoadingInfraMonitoring, } = useInfraMonitoringAttributesQuery( { projectRef: ref as string, diff --git a/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlock.tsx b/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlock.tsx index 73a3ab9cf9a..3714f07932f 100644 --- a/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlock.tsx +++ b/apps/studio/components/interfaces/Reports/ReportBlock/ReportBlock.tsx @@ -1,7 +1,7 @@ -import { X } from 'lucide-react' -import { toast } from 'sonner' import { useQuery } from '@tanstack/react-query' +import { X } from 'lucide-react' import { useEffect, useState } from 'react' +import { toast } from 'sonner' import { useParams } from 'common' import { ChartConfig } from 'components/interfaces/SQLEditor/UtilityPanel/ChartConfig' @@ -55,7 +55,7 @@ export const ReportBlock = ({ const { data, error: contentError, - isLoading: isLoadingContent, + isPending: isLoadingContent, } = useContentIdQuery( { projectRef, id: item.id }, { @@ -82,7 +82,7 @@ export const ReportBlock = ({ const { data: queryResult, error: executeSqlError, - isLoading: executeSqlLoading, + isPending: executeSqlLoading, refetch, } = useQuery({ queryKey: sqlKeys.query(projectRef, [ diff --git a/apps/studio/components/interfaces/Reports/Reports.tsx b/apps/studio/components/interfaces/Reports/Reports.tsx index bf7a6c2e356..e70be026ae3 100644 --- a/apps/studio/components/interfaces/Reports/Reports.tsx +++ b/apps/studio/components/interfaces/Reports/Reports.tsx @@ -61,7 +61,7 @@ const Reports = () => { const { data: userContents, - isLoading, + isPending: isLoading, isSuccess, } = useContentQuery({ projectRef: ref, diff --git a/apps/studio/components/interfaces/Reports/Reports.utils.tsx b/apps/studio/components/interfaces/Reports/Reports.utils.tsx index 0be4bb73107..76908e4b42e 100644 --- a/apps/studio/components/interfaces/Reports/Reports.utils.tsx +++ b/apps/studio/components/interfaces/Reports/Reports.utils.tsx @@ -1,14 +1,14 @@ import dayjs from 'dayjs' -import useDbQuery, { DbQueryHook } from 'hooks/analytics/useDbQuery' -import useLogsQuery, { LogsQueryHook } from 'hooks/analytics/useLogsQuery' -import type { BaseQueries, PresetConfig, ReportQuery } from './Reports.types' import { isUnixMicro, unixMicroToIsoTimestamp, } from 'components/interfaces/Settings/Logs/Logs.utils' import { REPORT_STATUS_CODE_COLORS } from 'data/reports/report.utils' +import useDbQuery, { DbQueryHook } from 'hooks/analytics/useDbQuery' +import useLogsQuery, { LogsQueryHook } from 'hooks/analytics/useLogsQuery' import { getHttpStatusCodeInfo } from 'lib/http-status-codes' +import type { BaseQueries, PresetConfig, ReportQuery } from './Reports.types' /** * Converts a query params string to an object diff --git a/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx b/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx index 8e363debfeb..ec707ca748e 100644 --- a/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx +++ b/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx @@ -3,6 +3,7 @@ import { ChevronDown, User as IconUser, Loader2, Search, X } from 'lucide-react' import { useMemo, useState } from 'react' import { toast } from 'sonner' +import { keepPreviousData } from '@tanstack/react-query' import { LOCAL_STORAGE_KEYS, useParams } from 'common' import AlertError from 'components/ui/AlertError' import { InlineLink } from 'components/ui/InlineLink' @@ -52,19 +53,26 @@ const UserImpersonationSelector = () => { const { data: project } = useSelectedProjectQuery() - const { data, isSuccess, isLoading, isError, error, isFetching, isPreviousData } = - useUsersInfiniteQuery( - { - projectRef: project?.ref, - connectionString: project?.connectionString, - keywords: debouncedSearchText.trim().toLocaleLowerCase(), - }, - { - keepPreviousData: true, - } - ) + const { + data, + isSuccess, + isPending: isLoading, + isError, + error, + isFetching, + isPlaceholderData, + } = useUsersInfiniteQuery( + { + projectRef: project?.ref, + connectionString: project?.connectionString, + keywords: debouncedSearchText.trim().toLocaleLowerCase(), + }, + { + placeholderData: keepPreviousData, + } + ) const users = useMemo(() => data?.pages.flatMap((page) => page.result) ?? [], [data?.pages]) - const isSearching = isPreviousData && isFetching + const isSearching = isPlaceholderData && isFetching const impersonatingUser = state.role?.type === 'postgrest' && state.role.role === 'authenticated' && diff --git a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx index edf37944ce4..1cb968d19be 100644 --- a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx +++ b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx @@ -45,7 +45,7 @@ export const OngoingQueriesPanel = () => { data, error, isError, - isLoading: isLoadingOngoingQueries, + isPending: isLoadingOngoingQueries, isFetching: isFetchingOngoingQueries, refetch, } = useOngoingQueriesQuery( diff --git a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx index a76ce0f469c..3cf86321863 100644 --- a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx +++ b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx @@ -87,7 +87,7 @@ export const PostgrestConfig = () => { const { data: config, isError, - isLoading: isLoadingConfig, + isPending: isLoadingConfig, } = useProjectPostgrestConfigQuery({ projectRef }) const { data: extensions } = useDatabaseExtensionsQuery({ projectRef: project?.ref, @@ -95,7 +95,7 @@ export const PostgrestConfig = () => { }) const { data: allSchemas = [], - isLoading: isLoadingSchemas, + isPending: isLoadingSchemas, isSuccess: isSuccessSchemas, } = useSchemasQuery({ projectRef: project?.ref, diff --git a/apps/studio/components/interfaces/Settings/API/ServiceList.tsx b/apps/studio/components/interfaces/Settings/API/ServiceList.tsx index bb2d6f4cb07..e64d6f90777 100644 --- a/apps/studio/components/interfaces/Settings/API/ServiceList.tsx +++ b/apps/studio/components/interfaces/Settings/API/ServiceList.tsx @@ -18,7 +18,7 @@ import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' import { PostgrestConfig } from './PostgrestConfig' export const ServiceList = () => { - const { data: project, isLoading } = useSelectedProjectQuery() + const { data: project, isPending: isLoading } = useSelectedProjectQuery() const { ref: projectRef } = useParams() const state = useDatabaseSelectorStateSnapshot() @@ -28,7 +28,7 @@ export const ServiceList = () => { const { data: databases, isError, - isLoading: isLoadingDatabases, + isPending: isLoadingDatabases, } = useReadReplicasQuery({ projectRef }) const { data: loadBalancers } = useLoadBalancersQuery({ projectRef }) diff --git a/apps/studio/components/interfaces/Settings/Addons/Addons.tsx b/apps/studio/components/interfaces/Settings/Addons/Addons.tsx index 3e6e15dcfa1..035f592f918 100644 --- a/apps/studio/components/interfaces/Settings/Addons/Addons.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/Addons.tsx @@ -58,7 +58,7 @@ export const Addons = () => { ]) const { data: selectedOrg } = useSelectedOrganizationQuery() - const { data: selectedProject, isLoading: isLoadingProject } = useSelectedProjectQuery() + const { data: selectedProject, isPending: isLoadingProject } = useSelectedProjectQuery() const { data: parentProject } = useProjectDetailQuery({ ref: selectedProject?.parent_project_ref, }) @@ -102,7 +102,7 @@ export const Addons = () => { const { data: addons, error, - isLoading, + isPending: isLoading, isError, isSuccess, } = useProjectAddonsQuery({ projectRef }) diff --git a/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx index 3719992b0d5..dbc8995cbbf 100644 --- a/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx @@ -9,6 +9,7 @@ import { useProjectAddonRemoveMutation } from 'data/subscriptions/project-addon- import { useProjectAddonUpdateMutation } from 'data/subscriptions/project-addon-update-mutation' import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query' import type { AddonVariantId } from 'data/subscriptions/types' +import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { DOCS_URL } from 'lib/constants' @@ -24,7 +25,6 @@ import { SidePanel, cn, } from 'ui' -import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements' const CustomDomainSidePanel = () => { const { ref: projectRef } = useParams() @@ -41,7 +41,7 @@ const CustomDomainSidePanel = () => { const { panel, closePanel } = useAddonsPagePanel() const visible = panel === 'customDomain' - const { data: addons, isLoading } = useProjectAddonsQuery({ projectRef }) + const { data: addons, isPending: isLoading } = useProjectAddonsQuery({ projectRef }) const { mutate: updateAddon, isPending: isUpdating } = useProjectAddonUpdateMutation({ onSuccess: () => { toast.success(`Successfully enabled custom domain`) diff --git a/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx index 9f9805bd0c2..872f88ea008 100644 --- a/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx @@ -10,6 +10,7 @@ import { useProjectAddonRemoveMutation } from 'data/subscriptions/project-addon- import { useProjectAddonUpdateMutation } from 'data/subscriptions/project-addon-update-mutation' import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query' import type { AddonVariantId } from 'data/subscriptions/types' +import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { useIsAwsCloudProvider } from 'hooks/misc/useSelectedProject' @@ -18,7 +19,6 @@ import { formatCurrency } from 'lib/helpers' import { useAddonsPagePanel } from 'state/addons-page' import { Button, Radio, SidePanel, cn } from 'ui' import { Admonition } from 'ui-patterns' -import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements' const IPv4SidePanel = () => { const isAws = useIsAwsCloudProvider() @@ -35,7 +35,7 @@ const IPv4SidePanel = () => { const { panel, closePanel } = useAddonsPagePanel() const visible = panel === 'ipv4' - const { data: addons, isLoading } = useProjectAddonsQuery({ projectRef }) + const { data: addons, isPending: isLoading } = useProjectAddonsQuery({ projectRef }) const { mutate: updateAddon, isPending: isUpdating } = useProjectAddonUpdateMutation({ onSuccess: () => { toast.success(`Successfully enabled IPv4`) diff --git a/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx index e8510c3e88d..4f3bcc9d10e 100644 --- a/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx @@ -73,7 +73,7 @@ const PITRSidePanel = () => { const { panel, closePanel } = useAddonsPagePanel() const visible = panel === 'pitr' - const { data: addons, isLoading } = useProjectAddonsQuery({ projectRef }) + const { data: addons, isPending: isLoading } = useProjectAddonsQuery({ projectRef }) const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: organization?.slug }) const hasHipaaAddon = subscriptionHasHipaaAddon(subscription) && projectSettings?.is_sensitive diff --git a/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx b/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx index b22bb74fb12..b71f4ed2537 100644 --- a/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx +++ b/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx @@ -25,7 +25,7 @@ const BannedIPs = () => { const [selectedIPToUnban, setSelectedIPToUnban] = useState(null) // Track the selected IP for unban const { - isLoading: isLoadingIPList, + isPending: isLoadingIPList, isFetching: isFetchingIPList, data: ipList, error: ipListError, diff --git a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx index 8337c0a45b3..49f2a56007f 100644 --- a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx +++ b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx @@ -61,7 +61,7 @@ export const ConnectionPooling = () => { const { data: pgbouncerConfig, error: pgbouncerConfigError, - isLoading: isLoadingPgbouncerConfig, + isPending: isLoadingPgbouncerConfig, isError: isErrorPgbouncerConfig, isSuccess: isSuccessPgbouncerConfig, } = usePgbouncerConfigQuery({ projectRef }) diff --git a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx index baf056e4b77..972820c7a7f 100644 --- a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx +++ b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx @@ -39,10 +39,10 @@ const DiskSizeConfigurationModal = ({ }: DiskSizeConfigurationProps) => { const { ref: projectRef } = useParams() const { data: organization } = useSelectedOrganizationQuery() - const { data: project, isLoading: isLoadingProject } = useSelectedProjectQuery() + const { data: project, isPending: isLoadingProject } = useSelectedProjectQuery() const { lastDatabaseResizeAt } = project ?? {} - const { data: projectSubscriptionData, isLoading: isLoadingSubscription } = + const { data: projectSubscriptionData, isPending: isLoadingSubscription } = useOrgSubscriptionQuery({ orgSlug: organization?.slug }, { enabled: visible }) const isLoading = isLoadingProject || isLoadingSubscription diff --git a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx index f138b40cc57..3cfba7f74b7 100644 --- a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx +++ b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx @@ -75,7 +75,7 @@ export const NetworkRestrictions = () => { const [isDisallowingAll, setIsDisallowingAll] = useState(false) const [selectedRestrictionToRemove, setSelectedRestrictionToRemove] = useState() - const { data, isLoading } = useNetworkRestrictionsQuery({ projectRef: ref }) + const { data, isPending: isLoading } = useNetworkRestrictionsQuery({ projectRef: ref }) const { can: canUpdateNetworkRestrictions } = useAsyncCheckPermissions( PermissionAction.UPDATE, 'projects', diff --git a/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx index b7c259049c9..2065ccb2fc6 100644 --- a/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx +++ b/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx @@ -29,7 +29,7 @@ const SSLConfiguration = () => { const { data: settings } = useProjectSettingsV2Query({ projectRef: ref }) const { data: sslEnforcementConfiguration, - isLoading, + isPending: isLoading, isSuccess, } = useSSLEnforcementQuery({ projectRef: ref, diff --git a/apps/studio/components/interfaces/Settings/General/ComplianceConfig/ProjectComplianceMode.tsx b/apps/studio/components/interfaces/Settings/General/ComplianceConfig/ProjectComplianceMode.tsx index 232e40dd350..c073eca684a 100644 --- a/apps/studio/components/interfaces/Settings/General/ComplianceConfig/ProjectComplianceMode.tsx +++ b/apps/studio/components/interfaces/Settings/General/ComplianceConfig/ProjectComplianceMode.tsx @@ -34,7 +34,7 @@ export const ComplianceConfig = () => { data: settings, error, isError, - isLoading, + isPending: isLoading, isSuccess, } = useProjectSettingsV2Query({ projectRef: ref }) const initialIsSensitive = settings?.is_sensitive || false diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx index 2a117718107..39068ee77ae 100644 --- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx +++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx @@ -27,19 +27,20 @@ export const CustomDomainConfig = () => { const plan = organization?.plan?.id - const { data: addons, isLoading: isLoadingAddons } = useProjectAddonsQuery({ projectRef: ref }) + const { data: addons, isPending: isLoadingAddons } = useProjectAddonsQuery({ projectRef: ref }) const hasCustomDomainAddon = !!addons?.selected_addons.find((x) => x.type === 'custom_domain') const { data: customDomainData, - isLoading: isCustomDomainsLoading, + isPending: isCustomDomainsLoading, isError, isSuccess, status: customDomainStatus, } = useCustomDomainsQuery( { projectRef: ref }, { - refetchInterval: (data) => { + refetchInterval: (query) => { + const data = query.state.data // while setting up the ssl certificate, we want to poll every 5 seconds if (data?.customDomain?.ssl.status) { return 10000 // 10 seconds diff --git a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx index 43ce28a704e..b49ef4ef8d5 100644 --- a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx +++ b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx @@ -44,7 +44,7 @@ export const TransferProjectButton = () => { const { data: transferPreviewData, error: transferPreviewError, - isLoading: transferPreviewIsLoading, + isPending: transferPreviewIsLoading, } = useProjectTransferPreviewQuery( { projectRef, targetOrganizationSlug: selectedOrg }, { enabled: !isTransferring && isOpen } diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx index 9633fa4f4a0..20e4cff7c83 100644 --- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx +++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx @@ -23,11 +23,11 @@ import { DocsButton } from 'components/ui/DocsButton' import Panel from 'components/ui/Panel' import ShimmeringLoader from 'components/ui/ShimmeringLoader' import { DataPoint } from 'data/analytics/constants' +import { mapMultiResponseToAnalyticsData } from 'data/analytics/infra-monitoring-queries' import { InfraMonitoringAttribute, useInfraMonitoringAttributesQuery, } from 'data/analytics/infra-monitoring-query' -import { mapMultiResponseToAnalyticsData } from 'data/analytics/infra-monitoring-queries' import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query' import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query' import { useResourceWarningsQuery } from 'data/usage/resource-warnings-query' @@ -62,7 +62,7 @@ export const InfrastructureActivity = () => { const state = useDatabaseSelectorStateSnapshot() const [dateRange, setDateRange] = useState() - const { data: subscription, isLoading: isLoadingSubscription } = useOrgSubscriptionQuery({ + const { data: subscription, isPending: isLoadingSubscription } = useOrgSubscriptionQuery({ orgSlug: organization?.slug, }) const isFreePlan = organization?.plan?.id === 'free' @@ -153,7 +153,7 @@ export const InfrastructureActivity = () => { } } - const { data: infraMonitoringData, isLoading: isLoadingInfraData } = + const { data: infraMonitoringData, isPending: isLoadingInfraData } = useInfraMonitoringAttributesQuery({ projectRef, attributes: INFRA_ATTRIBUTES, diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx index 0488c89862c..c0b3d9906e2 100644 --- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx +++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx @@ -130,9 +130,6 @@ const DeployNewReplicaPanel = ({ { refetchInterval, refetchOnWindowFocus: false, - onSuccess: (data) => { - if (data.is_physical_backups_enabled) setRefetchInterval(false) - }, } ) diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/Edge.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/Edge.tsx index a033486cca8..40759ea6c35 100644 --- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/Edge.tsx +++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/Edge.tsx @@ -36,7 +36,7 @@ export const SmoothstepEdge = ({ const { data: lagDuration, - isLoading, + isPending: isLoading, isError, } = useReplicationLagQuery( { diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx index 579c84cf363..0e21dcf7ca4 100644 --- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx +++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx @@ -54,7 +54,7 @@ const InstanceConfigurationUI = ({ diagramOnly = false }: InstanceConfigurationU const isOrioleDb = useIsOrioleDb() const { resolvedTheme } = useTheme() const { ref: projectRef } = useParams() - const { isLoading: isLoadingProject } = useSelectedProjectQuery() + const { isPending: isLoadingProject } = useSelectedProjectQuery() const isAws = useIsAwsCloudProvider() const { infrastructureReadReplicas } = useIsFeatureEnabled(['infrastructure:read_replicas']) @@ -78,7 +78,7 @@ const InstanceConfigurationUI = ({ diagramOnly = false }: InstanceConfigurationU data, error, refetch: refetchReplicas, - isLoading, + isPending: isLoading, isError, isSuccess: isSuccessReplicas, } = useReadReplicasQuery({ projectRef }) diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx index 0d4f9155883..55ad91726e2 100644 --- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx +++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx @@ -42,7 +42,7 @@ const InfrastructureInfo = () => { const { data, error, - isLoading: isLoadingUpgradeEligibility, + isPending: isLoadingUpgradeEligibility, isError: isErrorUpgradeEligibility, isSuccess: isSuccessUpgradeEligibility, } = useProjectUpgradeEligibilityQuery({ @@ -52,7 +52,7 @@ const InfrastructureInfo = () => { const { data: serviceVersions, error: serviceVersionsError, - isLoading: isLoadingServiceVersions, + isPending: isLoadingServiceVersions, isError: isErrorServiceVersions, isSuccess: isSuccessServiceVersions, } = useProjectServiceVersionsQuery({ projectRef: ref }) diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx index 3d42111d127..29e921e58ec 100644 --- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx +++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx @@ -1,6 +1,6 @@ import { zodResolver } from '@hookform/resolvers/zod' import { PermissionAction } from '@supabase/shared-types/out/constants' -import { ChevronDown, Info, Loader2, PlusIcon, RefreshCw } from 'lucide-react' +import { ChevronDown, Loader2, PlusIcon, RefreshCw } from 'lucide-react' import { useEffect, useMemo, useState } from 'react' import { useForm } from 'react-hook-form' import { toast } from 'sonner' @@ -88,7 +88,7 @@ const GitHubIntegrationConnectionForm = ({ const { data: githubReposData, - isLoading: isLoadingGitHubRepos, + isPending: isLoadingGitHubRepos, refetch: refetchGitHubRepositories, } = useGitHubRepositoriesQuery({ enabled: Boolean(gitHubAuthorization), diff --git a/apps/studio/components/interfaces/Settings/Logs/ErrorCodeDialog.tsx b/apps/studio/components/interfaces/Settings/Logs/ErrorCodeDialog.tsx index a14b40e82e6..8c851b4ce72 100644 --- a/apps/studio/components/interfaces/Settings/Logs/ErrorCodeDialog.tsx +++ b/apps/studio/components/interfaces/Settings/Logs/ErrorCodeDialog.tsx @@ -1,3 +1,6 @@ +import { useErrorCodesQuery } from 'data/content-api/docs-error-codes-query' +import { type ErrorCodeQueryQuery, Service } from 'data/graphql/graphql' +import { AlertTriangle } from 'lucide-react' import { Alert_Shadcn_, AlertDescription_Shadcn_, @@ -10,9 +13,6 @@ import { DialogHeader, DialogTitle, } from 'ui' -import { useErrorCodesQuery } from 'data/content-api/docs-error-codes-query' -import { type ErrorCodeQueryQuery, Service } from 'data/graphql/graphql' -import { AlertTriangle } from 'lucide-react' import ShimmeringLoader from 'ui-patterns/ShimmeringLoader' interface ErrorCodeDialogProps { @@ -28,10 +28,12 @@ export const ErrorCodeDialog = ({ errorCode, service, }: ErrorCodeDialogProps) => { - const { data, isLoading, isSuccess, refetch } = useErrorCodesQuery( - { code: errorCode, service }, - { enabled: open } - ) + const { + data, + isPending: isLoading, + isSuccess, + refetch, + } = useErrorCodesQuery({ code: errorCode, service }, { enabled: open }) return ( diff --git a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx index d288eb5f730..2247c75d26f 100644 --- a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx +++ b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx @@ -45,7 +45,7 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => { error: factorsError, isError: isErrorFactors, isSuccess: isSuccessFactors, - isLoading: isLoadingFactors, + isPending: isLoadingFactors, } = useMfaListFactorsQuery() const { mutate: mfaChallengeAndVerify, diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructions.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructions.tsx index 67d0494b2cc..89e9af57518 100644 --- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructions.tsx +++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/CreateTable/CreateTableInstructions.tsx @@ -48,7 +48,7 @@ export const CreateTableInstructions = ({ const s3SecretKeyVaultID = wrapperValues.vault_aws_secret_access_key const tokenVaultID = wrapperValues.vault_token - const { data: decryptedS3AccessKey, isLoading: isDecryptingS3AccessKey } = + const { data: decryptedS3AccessKey, isPending: isDecryptingS3AccessKey } = useVaultSecretDecryptedValueQuery( { projectRef: project?.ref, @@ -58,7 +58,7 @@ export const CreateTableInstructions = ({ { enabled: showKeys } ) - const { data: decryptedS3SecretKey, isLoading: isDecryptingS3SecretKey } = + const { data: decryptedS3SecretKey, isPending: isDecryptingS3SecretKey } = useVaultSecretDecryptedValueQuery( { projectRef: project?.ref, @@ -68,7 +68,7 @@ export const CreateTableInstructions = ({ { enabled: showKeys } ) - const { data: decryptedToken, isLoading: isDecryptingToken } = useVaultSecretDecryptedValueQuery( + const { data: decryptedToken, isPending: isDecryptingToken } = useVaultSecretDecryptedValueQuery( { projectRef: project?.ref, connectionString: project?.connectionString, diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/DecryptedReadOnlyInput.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/DecryptedReadOnlyInput.tsx index 59df8e3d8f2..570d75ec45d 100644 --- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/DecryptedReadOnlyInput.tsx +++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/DecryptedReadOnlyInput.tsx @@ -24,7 +24,7 @@ export const DecryptedReadOnlyInput = ({ const { data: project } = useSelectedProjectQuery() const [showHidden, setShowHidden] = useState(false) - const { data: decryptedValue, isLoading: isDecryptedValueLoading } = + const { data: decryptedValue, isPending: isDecryptedValueLoading } = useVaultSecretDecryptedValueQuery( { projectRef: project?.ref, diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/TableRowComponent.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/TableRowComponent.tsx index 0bfc7b9fc9d..7c018dc3f4f 100644 --- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/TableRowComponent.tsx +++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/TableRowComponent.tsx @@ -66,7 +66,7 @@ export const TableRowComponent = ({ table, schema, namespace }: TableRowComponen projectRef, bucketId, }) - const { data, isLoading: isLoadingPipelineStatus } = useReplicationPipelineStatusQuery({ + const { data, isPending: isLoadingPipelineStatus } = useReplicationPipelineStatusQuery({ projectRef, pipelineId: pipeline?.id, }) diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/index.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/index.tsx index 2294c4102fe..e7083db2c2a 100644 --- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/index.tsx +++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/index.tsx @@ -74,7 +74,7 @@ export const NamespaceWithTables = ({ const { data: tablesData = [], - isLoading: isLoadingNamespaceTables, + isPending: isLoadingNamespaceTables, isSuccess: isSuccessNamespaceTables, } = useIcebergNamespaceTablesQuery( { @@ -83,8 +83,8 @@ export const NamespaceWithTables = ({ projectRef, }, { - refetchInterval: (_data) => { - const data = _data ?? [] + refetchInterval: (query) => { + const data = query.state.data ?? [] if (pollIntervalNamespaceTables === 0) return false const publicationTables = publication?.tables ?? [] diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateForeignSchemaDialog.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateForeignSchemaDialog.tsx index cb11302d2e4..84c65cfb2c7 100644 --- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateForeignSchemaDialog.tsx +++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateForeignSchemaDialog.tsx @@ -66,7 +66,7 @@ export const UpdateForeignSchemaDialog = ({ values: { schema: schemasAssociatedWithNamespace[0] }, }) - const { mutateAsync: importForeignSchema, isLoading: isUpdating } = + const { mutateAsync: importForeignSchema, isPending: isUpdating } = useFDWImportForeignSchemaMutation() const onSubmit: SubmitHandler> = async (values) => { diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx index 231b5f165b9..78a1eca16ac 100644 --- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx +++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx @@ -81,7 +81,8 @@ export const AnalyticBucketDetails = () => { const { data, isSuccess: isSuccessPipelineStatus } = useReplicationPipelineStatusQuery( { projectRef, pipelineId: pipeline?.id }, { - refetchInterval: (data) => { + refetchInterval: (query) => { + const data = query.state.data if (data?.status.name !== 'started') return 4000 else return false }, @@ -115,7 +116,7 @@ export const AnalyticBucketDetails = () => { const { data: namespacesData = [], - isLoading: isLoadingNamespaces, + isPending: isLoadingNamespaces, isSuccess: isSuccessNamespaces, } = useIcebergNamespacesQuery( { @@ -123,12 +124,12 @@ export const AnalyticBucketDetails = () => { warehouse: wrapperValues.warehouse, }, { - refetchInterval: (_data) => { - const data = _data ?? [] + refetchInterval: (query) => { + const data = query.state.data if (pollIntervalNamespaces === 0) return false const publicationTableSchemas = publication?.tables.map((x) => x.schema) ?? [] - const isSynced = !publicationTableSchemas.some((x) => !data.includes(x)) + const isSynced = !publicationTableSchemas.some((x) => !data?.includes(x)) if (isSynced) { setPollIntervalNamespaces(0) return false diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/useAnalyticsBucketAssociatedEntities.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/useAnalyticsBucketAssociatedEntities.tsx index 46facd6b8e2..7c7fbbebca5 100644 --- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/useAnalyticsBucketAssociatedEntities.tsx +++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/useAnalyticsBucketAssociatedEntities.tsx @@ -1,12 +1,12 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' +import { useFDWDeleteMutation } from 'data/fdw/fdw-delete-mutation' import { useDeleteDestinationPipelineMutation } from 'data/replication/delete-destination-pipeline-mutation' import { useReplicationDestinationsQuery } from 'data/replication/destinations-query' import { useReplicationPipelinesQuery } from 'data/replication/pipelines-query' import { useDeletePublicationMutation } from 'data/replication/publication-delete-mutation' import { useReplicationPublicationsQuery } from 'data/replication/publications-query' import { useReplicationSourcesQuery } from 'data/replication/sources-query' -import { useFDWDeleteMutation } from 'data/fdw/fdw-delete-mutation' import { useS3AccessKeyDeleteMutation } from 'data/storage/s3-access-key-delete-mutation' import { useStorageCredentialsQuery } from 'data/storage/s3-access-key-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/useAnalyticsBucketWrapperInstance.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/useAnalyticsBucketWrapperInstance.tsx index 904aff48796..1d514f95739 100644 --- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/useAnalyticsBucketWrapperInstance.tsx +++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/useAnalyticsBucketWrapperInstance.tsx @@ -13,10 +13,10 @@ export const useAnalyticsBucketWrapperInstance = ( { bucketId }: { bucketId?: string }, options?: { enabled?: boolean } ) => { - const { data: project, isLoading: isLoadingProject } = useSelectedProjectQuery() + const { data: project, isPending: isLoadingProject } = useSelectedProjectQuery() const defaultEnabled = options?.enabled ?? true - const { data, isLoading: isLoadingFDWs } = useFDWsQuery( + const { data, isPending: isLoadingFDWs } = useFDWsQuery( { projectRef: project?.ref, connectionString: project?.connectionString, diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/useIcebergWrapper.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/useIcebergWrapper.tsx index b5d629295a3..9da05a53932 100644 --- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/useIcebergWrapper.tsx +++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/useIcebergWrapper.tsx @@ -4,7 +4,7 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' export const useIcebergWrapperExtension = () => { const { data: project } = useSelectedProjectQuery() - const { data: extensionsData, isLoading: isExtensionsLoading } = useDatabaseExtensionsQuery({ + const { data: extensionsData, isPending: isExtensionsLoading } = useDatabaseExtensionsQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx index a3b93f29272..19d3f328e3f 100644 --- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx +++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx @@ -45,7 +45,7 @@ export const AnalyticsBuckets = () => { data: buckets = [], error: bucketsError, isError: isErrorBuckets, - isLoading: isLoadingBuckets, + isPending: isLoadingBuckets, isSuccess: isSuccessBuckets, } = useAnalyticsBucketsQuery({ projectRef: ref, diff --git a/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx b/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx index 4638c87b62b..ac3d60c4702 100644 --- a/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx +++ b/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx @@ -52,7 +52,7 @@ export const FilesBuckets = () => { data: bucketsData, error: bucketsError, isError: isErrorBuckets, - isLoading: isLoadingBuckets, + isPending: isLoadingBuckets, isSuccess: isSuccessBuckets, isFetching: isFetchingBuckets, fetchNextPage, diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx index 48551d1cc5e..1d9224fefa4 100644 --- a/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx +++ b/apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx @@ -4,7 +4,6 @@ import { isEmpty } from 'lodash' import { AlertCircle, ChevronDown, Copy, Download, Loader, Trash2, X } from 'lucide-react' import SVG from 'react-inlinesvg' -import { useParams } from 'common' import { ButtonTooltip } from 'components/ui/ButtonTooltip' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { BASE_PATH } from 'lib/constants' @@ -27,7 +26,7 @@ const PREVIEW_SIZE_LIMIT = 10 * 1024 * 1024 // 10MB const PreviewFile = ({ item }: { item: StorageItem }) => { const { projectRef, selectedBucket } = useStorageExplorerStateSnapshot() - const { data: previewUrl, isLoading } = useFetchFileUrlQuery({ + const { data: previewUrl, isPending: isLoading } = useFetchFileUrlQuery({ file: item, projectRef: projectRef, bucket: selectedBucket, diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx index 20c60845e26..641f0acd8eb 100644 --- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx +++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx @@ -47,12 +47,12 @@ export const StoragePolicies = () => { parseAsString.withDefault('').withOptions({ history: 'replace', clearOnDefault: true }) ) - const { data: buckets = [], isLoading: isLoadingBuckets } = useBucketsQuery({ projectRef }) + const { data: buckets = [], isPending: isLoadingBuckets } = useBucketsQuery({ projectRef }) const { data: policies = [], refetch, - isLoading: isLoadingPolicies, + isPending: isLoadingPolicies, } = useDatabasePoliciesQuery({ projectRef: project?.ref, connectionString: project?.connectionString, diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx index c7852cfce25..0630947b9a7 100644 --- a/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx +++ b/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx @@ -59,7 +59,7 @@ import { getConnectionURL } from './StorageSettings.utils' export const S3Connection = () => { const { ref: projectRef } = useParams() const isProjectActive = useIsProjectActive() - const { data: project, isLoading: projectIsLoading } = useSelectedProjectQuery() + const { data: project, isPending: projectIsLoading } = useSelectedProjectQuery() const [openCreateCred, setOpenCreateCred] = useState(false) const [openDeleteDialog, setOpenDeleteDialog] = useState(false) @@ -81,7 +81,7 @@ export const S3Connection = () => { isSuccess: isSuccessStorageConfig, isError: isErrorStorageConfig, } = useProjectStorageConfigQuery({ projectRef }) - const { data: storageCreds, isLoading: isLoadingStorageCreds } = useStorageCredentialsQuery( + const { data: storageCreds, isPending: isLoadingStorageCreds } = useStorageCredentialsQuery( { projectRef }, { enabled: canReadS3Credentials } ) diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx index b5d7af47d25..81b293ff703 100644 --- a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx +++ b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx @@ -78,7 +78,7 @@ export const StorageSettings = () => { const { data: config, error, - isLoading, + isPending: isLoading, isSuccess, isError, } = useProjectStorageConfigQuery({ projectRef }) @@ -94,7 +94,7 @@ export const StorageSettings = () => { const isSpendCapOn = organization?.plan.id === 'pro' && organization?.usage_billing_enabled === false - const { data: buckets = [], isLoading: isLoadingBuckets } = useBucketsQuery({ projectRef }) + const { data: buckets = [], isPending: isLoadingBuckets } = useBucketsQuery({ projectRef }) // Calculate the minimum file size limit from existing buckets const minBucketFileSizeLimit = useMemo(() => { diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/DeleteVectorBucketModal.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/DeleteVectorBucketModal.tsx index 6d5e656a174..46e9b9f550f 100644 --- a/apps/studio/components/interfaces/Storage/VectorBuckets/DeleteVectorBucketModal.tsx +++ b/apps/studio/components/interfaces/Storage/VectorBuckets/DeleteVectorBucketModal.tsx @@ -47,7 +47,7 @@ export const DeleteVectorBucketModal = ({ }, }) - const { data: { indexes = [] } = {}, isLoading: isLoadingIndexes } = useVectorBucketsIndexesQuery( + const { data: { indexes = [] } = {}, isPending: isLoadingIndexes } = useVectorBucketsIndexesQuery( { projectRef: project?.ref, vectorBucketName: bucketName, diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/index.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/index.tsx index fe43688fb53..d740223975f 100644 --- a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/index.tsx +++ b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/index.tsx @@ -73,7 +73,7 @@ export const VectorBucketDetails = () => { { enabled: isSuccess && !!_bucket } ) - const { data, isLoading: isLoadingIndexes } = useVectorBucketsIndexesQuery({ + const { data, isPending: isLoadingIndexes } = useVectorBucketsIndexesQuery({ projectRef, vectorBucketName: bucket?.vectorBucketName, }) diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx index 56f013aced9..080624cd20a 100644 --- a/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx +++ b/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx @@ -38,7 +38,7 @@ export const VectorsBuckets = () => { data, error: bucketsError, isError: isErrorBuckets, - isLoading: isLoadingBuckets, + isPending: isLoadingBuckets, isSuccess: isSuccessBuckets, } = useVectorBucketsQuery({ projectRef }) const bucketsList = data?.vectorBuckets ?? [] diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/useS3VectorsWrapper.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/useS3VectorsWrapper.tsx index 89bec0b65c3..b987200d9e9 100644 --- a/apps/studio/components/interfaces/Storage/VectorBuckets/useS3VectorsWrapper.tsx +++ b/apps/studio/components/interfaces/Storage/VectorBuckets/useS3VectorsWrapper.tsx @@ -10,7 +10,7 @@ export const useS3VectorsWrapperExtension = (): { state: 'not-found' | 'loading' | 'installed' | 'needs-upgrade' | 'not-installed' } => { const { data: project } = useSelectedProjectQuery() - const { data: extensionsData, isLoading: isExtensionsLoading } = useDatabaseExtensionsQuery({ + const { data: extensionsData, isPending: isExtensionsLoading } = useDatabaseExtensionsQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/useS3VectorsWrapperInstance.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/useS3VectorsWrapperInstance.tsx index 6de07856474..59e2196d70a 100644 --- a/apps/studio/components/interfaces/Storage/VectorBuckets/useS3VectorsWrapperInstance.tsx +++ b/apps/studio/components/interfaces/Storage/VectorBuckets/useS3VectorsWrapperInstance.tsx @@ -10,9 +10,9 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { getVectorBucketFDWName } from './VectorBuckets.utils' export const useS3VectorsWrapperInstance = ({ bucketId }: { bucketId?: string }) => { - const { data: project, isLoading: isLoadingProject } = useSelectedProjectQuery() + const { data: project, isPending: isLoadingProject } = useSelectedProjectQuery() - const { data, isLoading: isLoadingFDWs } = useFDWsQuery( + const { data, isPending: isLoadingFDWs } = useFDWsQuery( { projectRef: project?.ref, connectionString: project?.connectionString, diff --git a/apps/studio/components/interfaces/Storage/useBucketPolicyCount.ts b/apps/studio/components/interfaces/Storage/useBucketPolicyCount.ts index 8b307702236..1dbf7c6b3b6 100644 --- a/apps/studio/components/interfaces/Storage/useBucketPolicyCount.ts +++ b/apps/studio/components/interfaces/Storage/useBucketPolicyCount.ts @@ -4,11 +4,11 @@ import { useBucketsQuery } from 'data/storage/buckets-query' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' export const useBucketPolicyCount = () => { - const { data: project, isLoading: isLoadingProject } = useSelectedProjectQuery() - const { data: buckets = [], isLoading: isLoadingBuckets } = useBucketsQuery({ + const { data: project, isPending: isLoadingProject } = useSelectedProjectQuery() + const { data: buckets = [], isPending: isLoadingBuckets } = useBucketsQuery({ projectRef: project?.ref, }) - const { data: policiesData = [], isLoading: isLoadingPolicies } = useDatabasePoliciesQuery({ + const { data: policiesData = [], isPending: isLoadingPolicies } = useDatabasePoliciesQuery({ projectRef: project?.ref, connectionString: project?.connectionString, schema: 'storage', diff --git a/apps/studio/components/interfaces/Support/SupportFormPage.tsx b/apps/studio/components/interfaces/Support/SupportFormPage.tsx index 2034a4067e5..2944f24749b 100644 --- a/apps/studio/components/interfaces/Support/SupportFormPage.tsx +++ b/apps/studio/components/interfaces/Support/SupportFormPage.tsx @@ -122,7 +122,7 @@ function SupportFormWrapper({ children }: PropsWithChildren) { } function SupportFormHeader() { - const { data, isLoading, isError } = usePlatformStatusQuery() + const { data, isPending: isLoading, isError } = usePlatformStatusQuery() const isHealthy = data?.isHealthy return ( diff --git a/apps/studio/components/interfaces/Support/useSupportForm.ts b/apps/studio/components/interfaces/Support/useSupportForm.ts index 34575b4c873..1f8c5323024 100644 --- a/apps/studio/components/interfaces/Support/useSupportForm.ts +++ b/apps/studio/components/interfaces/Support/useSupportForm.ts @@ -69,7 +69,7 @@ export function useSupportForm(dispatch: Dispatch): UseSuppo }, [form]) const hasAppliedOrgProjectRef = useRef(false) - const { data: organizations, isLoading: organizationsLoading } = useOrganizationsQuery() + const { data: organizations, isPending: organizationsLoading } = useOrganizationsQuery() // Organization slug and project ref need to be validated after loading from // URL params diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx index 273e3315df8..2dd441c345d 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx @@ -77,7 +77,7 @@ export const ForeignKeySelector = ({ includeColumns: false, }) - const { data: selectedTable, isLoading: isLoadingSelectedTable } = useTableQuery( + const { data: selectedTable, isPending: isLoadingSelectedTable } = useTableQuery( { projectRef: project?.ref, connectionString: project?.connectionString, diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx index ab07199af1d..efd1891c9ac 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from 'react' import { DndProvider } from 'react-dnd' import { HTML5Backend } from 'react-dnd-html5-backend' +import { keepPreviousData } from '@tanstack/react-query' import { useParams } from 'common' import { formatSortURLParams, @@ -99,7 +100,13 @@ export const ForeignRowSelector = ({ const roleImpersonationState = useRoleImpersonationStateSnapshot() - const { data, isLoading, isSuccess, isError, isRefetching } = useTableRowsQuery( + const { + data, + isPending: isLoading, + isSuccess, + isError, + isRefetching, + } = useTableRowsQuery( { projectRef: project?.ref, connectionString: project?.connectionString, @@ -111,7 +118,7 @@ export const ForeignRowSelector = ({ roleImpersonationState: roleImpersonationState as RoleImpersonationState, }, { - keepPreviousData: true, + placeholderData: keepPreviousData, } ) diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx index 1eb06b97c5a..8eeb36e0783 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx @@ -34,7 +34,13 @@ export const ForeignKeysManagement = ({ const [open, setOpen] = useState(false) const [selectedFk, setSelectedFk] = useState() - const { data, error, isLoading, isSuccess, isError } = useForeignKeyConstraintsQuery({ + const { + data, + error, + isPending: isLoading, + isSuccess, + isError, + } = useForeignKeyConstraintsQuery({ projectRef: project?.ref, connectionString: project?.connectionString, schema: selectedSchema, diff --git a/apps/studio/components/interfaces/TableGridEditor/ViewEntityAutofixSecurityModal.tsx b/apps/studio/components/interfaces/TableGridEditor/ViewEntityAutofixSecurityModal.tsx index 762e2bb2d07..ba0cf1617fa 100644 --- a/apps/studio/components/interfaces/TableGridEditor/ViewEntityAutofixSecurityModal.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/ViewEntityAutofixSecurityModal.tsx @@ -23,7 +23,11 @@ export default function ViewEntityAutofixSecurityModal({ }: ViewEntityAutofixSecurityModalProps) { const { data: project } = useSelectedProjectQuery() const queryClient = useQueryClient() - const { isSuccess, isLoading, data } = useViewDefinitionQuery( + const { + isSuccess, + isPending: isLoading, + data, + } = useViewDefinitionQuery( { id: table?.id, projectRef: project?.ref, diff --git a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx index d1ece93f8cd..6aae086d11b 100644 --- a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx +++ b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx @@ -57,7 +57,7 @@ export function ServiceFlowPanel({ // Query the logs API directly const { data: serviceFlowData, - isLoading, + isPending: isLoading, error, } = useUnifiedLogInspectionQuery( { diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx index 28b339df648..84bc9c4b588 100644 --- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx +++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx @@ -125,7 +125,7 @@ export const UnifiedLogs = () => { } = useUnifiedLogsInfiniteQuery({ projectRef, search: searchParameters }) const { data: counts, - isLoading: isLoadingCounts, + isPending: isLoadingCounts, isFetching: isFetchingCounts, refetch: refetchCounts, } = useUnifiedLogsCountQuery({ diff --git a/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx b/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx index b6f94d86e43..8ffd180568a 100644 --- a/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx +++ b/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx @@ -83,7 +83,7 @@ export const BranchDropdown = () => { const { data: branches, - isLoading, + isPending: isLoading, isError, isSuccess, } = useBranchesQuery({ projectRef }, { enabled: Boolean(projectDetails) }) diff --git a/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx b/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx index df9c502c731..812f90a6b11 100644 --- a/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx +++ b/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx @@ -30,7 +30,7 @@ export const OrganizationDropdown = () => { const router = useRouter() const { slug: routeSlug } = useParams() const { data: selectedOrganization } = useSelectedOrganizationQuery() - const { data: organizations, isLoading: isLoadingOrganizations } = useOrganizationsQuery() + const { data: organizations, isPending: isLoadingOrganizations } = useOrganizationsQuery() const organizationCreationEnabled = useIsFeatureEnabled('organizations:create') diff --git a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx index 446dc8c7986..b0c0af5bf81 100644 --- a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx +++ b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx @@ -35,11 +35,11 @@ export const sanitizeRoute = (route: string, routerQueries: ParsedUrlQuery) => { export const ProjectDropdown = () => { const router = useRouter() const { ref } = useParams() - const { data: project, isLoading: isLoadingProject } = useSelectedProjectQuery() + const { data: project, isPending: isLoadingProject } = useSelectedProjectQuery() const { data: selectedOrganization } = useSelectedOrganizationQuery() const isBranch = project?.parentRef !== project?.ref - const { data: parentProject, isLoading: isLoadingParentProject } = useProjectDetailQuery( + const { data: parentProject, isPending: isLoadingParentProject } = useProjectDetailQuery( { ref: project?.parent_project_ref }, { enabled: isBranch } ) diff --git a/apps/studio/components/layouts/DocsLayout/DocsLayout.tsx b/apps/studio/components/layouts/DocsLayout/DocsLayout.tsx index cbaa098120a..c8679c24aa6 100644 --- a/apps/studio/components/layouts/DocsLayout/DocsLayout.tsx +++ b/apps/studio/components/layouts/DocsLayout/DocsLayout.tsx @@ -19,10 +19,11 @@ function DocsLayout({ title, children }: { title: string; children: ReactElement const { data: selectedProject } = useSelectedProjectQuery() const isPaused = selectedProject?.status === PROJECT_STATUS.INACTIVE - const { data, isLoading, error } = useOpenAPISpecQuery( - { projectRef: ref }, - { enabled: !isPaused } - ) + const { + data, + isPending: isLoading, + error, + } = useOpenAPISpecQuery({ projectRef: ref }, { enabled: !isPaused }) const isNewAPIDocsEnabled = useIsAPIDocsSidePanelEnabled() const hideMenu = isNewAPIDocsEnabled && router.pathname.endsWith('/graphiql') diff --git a/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx b/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx index e7e064f0175..2135799e473 100644 --- a/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx +++ b/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx @@ -101,7 +101,7 @@ export function LogsSidebarMenuV2() { ]) const enablePgReplicate = useIsETLPrivateAlpha() - const { data: etlData, isLoading: isETLLoading } = useReplicationSourcesQuery( + const { data: etlData, isPending: isETLLoading } = useReplicationSourcesQuery( { projectRef: ref, }, @@ -119,7 +119,7 @@ export function LogsSidebarMenuV2() { const { plan: orgPlan } = useCurrentOrgPlan() const isFreePlan = orgPlan?.id === 'free' - const { data: savedQueriesRes, isLoading: savedQueriesLoading } = useContentQuery({ + const { data: savedQueriesRes, isPending: savedQueriesLoading } = useContentQuery({ projectRef: ref, type: 'log_sql', }) diff --git a/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx b/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx index 4237519d1b3..f8ccbd46b5a 100644 --- a/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx +++ b/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx @@ -16,9 +16,9 @@ import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import { useProfile } from 'lib/profile' import { Menu, cn } from 'ui' +import { InnerSideBarEmptyPanel } from 'ui-patterns' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' import { ObservabilityMenuItem } from './ObservabilityMenuItem' -import { InnerSideBarEmptyPanel } from 'ui-patterns' const ObservabilityMenu = () => { const router = useRouter() @@ -58,11 +58,11 @@ const ObservabilityMenu = () => { return queryString ? `?${queryString}` : '' }, [router.query]) - const { data: content, isLoading } = useContentQuery({ + const { data: content, isPending: isLoading } = useContentQuery({ projectRef: ref, type: 'report', }) - const { mutate: deleteReport, isLoading: isDeleting } = useContentDeleteMutation({ + const { mutate: deleteReport, isPending: isDeleting } = useContentDeleteMutation({ onSuccess: () => { setDeleteModalOpen(false) toast.success('Successfully deleted report') diff --git a/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx b/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx index abf35eaa354..2287fe84dd6 100644 --- a/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx +++ b/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx @@ -35,7 +35,8 @@ const BuildingState = () => { { projectRef: ref }, { enabled: project?.status !== PROJECT_STATUS.ACTIVE_HEALTHY, - refetchInterval: (data) => { + refetchInterval: (query) => { + const data = query.state.data return data?.status === PROJECT_STATUS.ACTIVE_HEALTHY ? false : 4000 }, } diff --git a/apps/studio/components/layouts/ProjectLayout/LoadingState.tsx b/apps/studio/components/layouts/ProjectLayout/LoadingState.tsx index cfd897d7a8e..16d774c331d 100644 --- a/apps/studio/components/layouts/ProjectLayout/LoadingState.tsx +++ b/apps/studio/components/layouts/ProjectLayout/LoadingState.tsx @@ -4,7 +4,7 @@ import { useProjectDetailQuery } from 'data/projects/project-detail-query' export const LoadingState = () => { const { ref } = useParams() - const { data: project, isLoading } = useProjectDetailQuery({ ref }) + const { data: project, isPending: isLoading } = useProjectDetailQuery({ ref }) const projectName = ref !== 'default' ? project?.name : 'Welcome to your project' diff --git a/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx b/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx index 38f31fce41a..366cb1463ca 100644 --- a/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx +++ b/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx @@ -70,7 +70,7 @@ export const ProjectPausedState = ({ product }: ProjectPausedStateProps) => { error: pauseStatusError, isError, isSuccess: isPauseStatusSuccess, - isLoading, + isPending: isLoading, } = useProjectPauseStatusQuery({ ref }, { enabled: project?.status === PROJECT_STATUS.INACTIVE }) const finalDaysRemainingBeforeRestoreDisabled = diff --git a/apps/studio/components/layouts/ProjectLayout/PausingState.tsx b/apps/studio/components/layouts/ProjectLayout/PausingState.tsx index 07509eb308f..a2499c29a66 100644 --- a/apps/studio/components/layouts/ProjectLayout/PausingState.tsx +++ b/apps/studio/components/layouts/ProjectLayout/PausingState.tsx @@ -23,7 +23,8 @@ const PausingState = ({ project }: PausingStateProps) => { { projectRef: ref }, { enabled: startPolling, - refetchInterval: (data) => { + refetchInterval: (query) => { + const data = query.state.data return data?.status === PROJECT_STATUS.INACTIVE ? false : 2000 }, } diff --git a/apps/studio/components/layouts/ProjectLayout/ResizingState.tsx b/apps/studio/components/layouts/ProjectLayout/ResizingState.tsx index 9a2d96d34e5..0c7e0f0f259 100644 --- a/apps/studio/components/layouts/ProjectLayout/ResizingState.tsx +++ b/apps/studio/components/layouts/ProjectLayout/ResizingState.tsx @@ -12,7 +12,8 @@ export const ResizingState = () => { // setting a refetch interval here will cause the `useSelectedProject()` in `ProjectLayout.tsx` to // rerender every 4 seconds while the project is resizing. Once resizing is complete, it will // no longer show this state. - refetchInterval(data) { + refetchInterval: (query) => { + const data = query.state.data return data?.status !== PROJECT_STATUS.ACTIVE_HEALTHY ? 4000 : false }, } diff --git a/apps/studio/components/layouts/ProjectLayout/RestartingState.tsx b/apps/studio/components/layouts/ProjectLayout/RestartingState.tsx index 6394fd5627d..278a3bb32aa 100644 --- a/apps/studio/components/layouts/ProjectLayout/RestartingState.tsx +++ b/apps/studio/components/layouts/ProjectLayout/RestartingState.tsx @@ -12,7 +12,8 @@ const RestartingState = () => { // setting a refetch interval here will cause the `useSelectedProject()` in `ProjectLayout.tsx` to // rerender every 4 seconds while the project is restarting. Once restarting is complete, it will // no longer show this state. - refetchInterval(data) { + refetchInterval: (query) => { + const data = query.state.data return data?.status !== PROJECT_STATUS.ACTIVE_HEALTHY ? 4000 : false }, } diff --git a/apps/studio/components/layouts/ProjectLayout/RestoringState.tsx b/apps/studio/components/layouts/ProjectLayout/RestoringState.tsx index afb93d573e2..43ae5f80dd5 100644 --- a/apps/studio/components/layouts/ProjectLayout/RestoringState.tsx +++ b/apps/studio/components/layouts/ProjectLayout/RestoringState.tsx @@ -30,7 +30,8 @@ const RestoringState = () => { { projectRef: ref }, { enabled: project?.status !== PROJECT_STATUS.ACTIVE_HEALTHY, - refetchInterval: (data) => { + refetchInterval: (query) => { + const data = query.state.data return data?.status === PROJECT_STATUS.ACTIVE_HEALTHY ? false : 4000 }, } diff --git a/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx b/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx index 5283d43e30d..15cbe3c13e1 100644 --- a/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx +++ b/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx @@ -57,7 +57,7 @@ const ReportsMenu = () => { return queryString ? `?${queryString}` : '' }, [router.query]) - const { data: content, isLoading } = useContentQuery({ + const { data: content, isPending: isLoading } = useContentQuery({ projectRef: ref, type: 'report', }) diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx index af4caf81d54..25e3866604d 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx @@ -3,6 +3,7 @@ import { useRouter } from 'next/router' import { useEffect, useMemo, useState } from 'react' import { toast } from 'sonner' +import { keepPreviousData } from '@tanstack/react-query' import { LOCAL_STORAGE_KEYS, useParams } from 'common' import DownloadSnippetModal from 'components/interfaces/SQLEditor/DownloadSnippetModal' import { MoveQueryModal } from 'components/interfaces/SQLEditor/MoveQueryModal' @@ -85,12 +86,12 @@ export const SQLEditorNav = ({ sort = 'inserted_at' }: SQLEditorNavProps) => { data: privateSnippetsPages, isSuccess, isLoading, - isPreviousData, + isPlaceholderData, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage, - } = useSQLSnippetFoldersQuery({ projectRef, sort }, { keepPreviousData: true }) + } = useSQLSnippetFoldersQuery({ projectRef, sort }, { placeholderData: keepPreviousData }) const [subResults, setSubResults] = useState<{ [id: string]: { snippets?: Snippet[]; isLoading: boolean } @@ -122,7 +123,7 @@ export const SQLEditorNav = ({ sort = 'inserted_at' }: SQLEditorNavProps) => { }, { snippets: rootSnippets, - isLoading: isLoading || (isPreviousData && isFetching), + isLoading: isLoading || (isPlaceholderData && isFetching), snippetIds: new Set(rootSnippets.map((snippet) => snippet.id)), } ) @@ -133,7 +134,7 @@ export const SQLEditorNav = ({ sort = 'inserted_at' }: SQLEditorNavProps) => { } return snippetInfo - }, [privateSnippetsPages?.pages, subResults, isLoading, isPreviousData, isFetching, snippet]) + }, [privateSnippetsPages?.pages, subResults, isLoading, isPlaceholderData, isFetching, snippet]) const privateSnippets = useMemo( () => @@ -171,7 +172,7 @@ export const SQLEditorNav = ({ sort = 'inserted_at' }: SQLEditorNavProps) => { // ================= const { data: favoriteSqlSnippetsData, - isLoading: isLoadingFavoriteSqlSnippets, + isPending: isLoadingFavoriteSqlSnippets, hasNextPage: hasMoreFavoriteSqlSnippets, fetchNextPage: fetchNextFavoriteSqlSnippets, isFetchingNextPage: isFetchingMoreFavoriteSqlSnippets, @@ -182,7 +183,7 @@ export const SQLEditorNav = ({ sort = 'inserted_at' }: SQLEditorNavProps) => { favorite: true, sort, }, - { enabled: showFavoriteSnippets, keepPreviousData: true } + { enabled: showFavoriteSnippets, placeholderData: keepPreviousData } ) const favoriteSnippets = useMemo(() => { @@ -233,7 +234,7 @@ export const SQLEditorNav = ({ sort = 'inserted_at' }: SQLEditorNavProps) => { visibility: 'project', sort, }, - { enabled: showSharedSnippets, keepPreviousData: true } + { enabled: showSharedSnippets, placeholderData: keepPreviousData } ) const sharedSnippets = useMemo(() => { diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx index 89e82df6d92..3753976bfca 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx @@ -15,6 +15,7 @@ import Link from 'next/link' import { useRouter } from 'next/router' import { ComponentProps, useEffect } from 'react' +import { keepPreviousData } from '@tanstack/react-query' import { IS_PLATFORM } from 'common' import { useParams } from 'common/hooks/useParams' import { createSqlSnippetSkeletonV2 } from 'components/interfaces/SQLEditor/SQLEditor.utils' @@ -126,7 +127,7 @@ export const SQLEditorTreeViewItem = ({ isFetchingNextPage: isFetchingNextPageInFolder, hasNextPage: hasNextPageInFolder, fetchNextPage: fetchNestPageInFolder, - isPreviousData, + isPlaceholderData, isFetching, } = useSQLSnippetFolderContentsQuery( { @@ -137,7 +138,7 @@ export const SQLEditorTreeViewItem = ({ }, { enabled: isEnabled, - keepPreviousData: true, + placeholderData: keepPreviousData, } ) useEffect(() => { @@ -157,11 +158,11 @@ export const SQLEditorTreeViewItem = ({ useEffect(() => { if (isEnabled) { onFolderContentsChangeRef.current?.({ - isLoading: isLoading || (isPreviousData && isFetching), + isLoading: isLoading || (isPlaceholderData && isFetching), snippets: data?.pages.flatMap((page) => page.contents ?? []), }) } - }, [data?.pages, isFetching, isLoading, isPreviousData, isEnabled]) + }, [data?.pages, isFetching, isLoading, isPlaceholderData, isEnabled]) const isInFolder = parentId !== undefined diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SearchList.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SearchList.tsx index 643f1cf76a1..2a8e7a357d6 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SearchList.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SearchList.tsx @@ -1,6 +1,7 @@ import { Loader2 } from 'lucide-react' import { useMemo, useState } from 'react' +import { keepPreviousData } from '@tanstack/react-query' import { useParams } from 'common' import DownloadSnippetModal from 'components/interfaces/SQLEditor/DownloadSnippetModal' import RenameQueryModal from 'components/interfaces/SQLEditor/RenameQueryModal' @@ -31,24 +32,29 @@ export const SearchList = ({ search }: SearchListProps) => { const [selectedSnippetToRename, setSelectedSnippetToRename] = useState() const [selectedSnippetToDelete, setSelectedSnippetToDelete] = useState() - const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } = - useContentInfiniteQuery( - { - projectRef, - type: 'sql', - limit: SNIPPET_PAGE_LIMIT, - name: search.length === 0 ? undefined : search, - }, - { keepPreviousData: true } - ) + const { + data, + isPending: isLoading, + hasNextPage, + fetchNextPage, + isFetchingNextPage, + } = useContentInfiniteQuery( + { + projectRef, + type: 'sql', + limit: SNIPPET_PAGE_LIMIT, + name: search.length === 0 ? undefined : search, + }, + { placeholderData: keepPreviousData } + ) - const { data: count, isLoading: isLoadingCount } = useContentCountQuery( + const { data: count, isPending: isLoadingCount } = useContentCountQuery( { projectRef, type: 'sql', name: search, }, - { keepPreviousData: true } + { placeholderData: keepPreviousData } ) const totalNumber = count ? count.private + count.shared : 0 diff --git a/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx b/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx index 0f975237051..ce4fdd73fd2 100644 --- a/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx +++ b/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx @@ -93,7 +93,7 @@ function RunSnippetPage() { const { ref } = useParams() const { data: snippetPages, - isLoading, + isPending: isLoading, isError, isSuccess, } = useSqlSnippetsQuery({ @@ -302,7 +302,7 @@ function TableSelector() { const { data: protectedSchemas } = useProtectedSchemas() const { data: tablesData, - isLoading, + isPending: isLoading, isError, isSuccess, } = useTablesQuery({ diff --git a/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx index b7ec41960b5..bd2960ae959 100644 --- a/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx +++ b/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx @@ -40,6 +40,7 @@ import { import { useTableEditorTabsCleanUp } from '../Tabs/Tabs.utils' import EntityListItem from './EntityListItem' import { TableMenuEmptyState } from './TableMenuEmptyState' +import { keepPreviousData } from '@tanstack/react-query' export const TableEditorMenu = () => { const { id: _id, ref: projectRef } = useParams() @@ -76,7 +77,7 @@ export const TableEditorMenu = () => { filterTypes: visibleTypes, }, { - keepPreviousData: Boolean(searchText), + placeholderData: Boolean(searchText) ? keepPreviousData : undefined, } ) diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx index 6f0eb73e1af..55deff04b1a 100644 --- a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx +++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx @@ -49,7 +49,7 @@ interface AIAssistantProps { export const AIAssistant = ({ className }: AIAssistantProps) => { const router = useRouter() const { data: project } = useSelectedProjectQuery() - const { data: selectedOrganization, isLoading: isLoadingOrganization } = + const { data: selectedOrganization, isPending: isLoadingOrganization } = useSelectedOrganizationQuery() const { ref, id: entityId } = useParams() const searchParams = useSearchParamsShallow() diff --git a/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx b/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx index 9bcdaf7e5ab..832160d4fad 100644 --- a/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx +++ b/apps/studio/components/ui/AIAssistantPanel/AIOnboarding.tsx @@ -38,7 +38,7 @@ export const AIOnboarding = ({ const { ref: projectRef } = useParams() const { data: lints, - isLoading: isLoadingLints, + isPending: isLoadingLints, isFetching: isFetchingLints, } = useProjectLintsQuery({ projectRef }) const isLintsLoading = isLoadingLints || isFetchingLints diff --git a/apps/studio/components/ui/AdvisorPanel/AdvisorPanel.tsx b/apps/studio/components/ui/AdvisorPanel/AdvisorPanel.tsx index 083e50217fb..f18dfac35c8 100644 --- a/apps/studio/components/ui/AdvisorPanel/AdvisorPanel.tsx +++ b/apps/studio/components/ui/AdvisorPanel/AdvisorPanel.tsx @@ -75,7 +75,7 @@ export const AdvisorPanel = () => { const { data: lintData, - isLoading: isLintsLoading, + isPending: isLintsLoading, isError: isLintsError, } = useProjectLintsQuery( { projectRef: project?.ref }, @@ -108,7 +108,7 @@ export const AdvisorPanel = () => { const { data: notificationsData, - isLoading: isNotificationsLoading, + isPending: isNotificationsLoading, isError: isNotificationsError, } = useNotificationsV2Query( { diff --git a/apps/studio/components/ui/Charts/ChartHandler.tsx b/apps/studio/components/ui/Charts/ChartHandler.tsx index 6f2893323e6..4f3c2ce4e4f 100644 --- a/apps/studio/components/ui/Charts/ChartHandler.tsx +++ b/apps/studio/components/ui/Charts/ChartHandler.tsx @@ -5,20 +5,20 @@ import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui' import AreaChart from 'components/ui/Charts/AreaChart' import BarChart from 'components/ui/Charts/BarChart' import { AnalyticsInterval } from 'data/analytics/constants' +import { mapMultiResponseToAnalyticsData } from 'data/analytics/infra-monitoring-queries' import { InfraMonitoringAttribute, useInfraMonitoringAttributesQuery, } from 'data/analytics/infra-monitoring-query' -import { mapMultiResponseToAnalyticsData } from 'data/analytics/infra-monitoring-queries' import { ProjectDailyStatsAttribute, useProjectDailyStatsQuery, } from 'data/analytics/project-daily-stats-query' +import dayjs from 'dayjs' import { Activity, BarChartIcon, Loader2 } from 'lucide-react' import { useDatabaseSelectorStateSnapshot } from 'state/database-selector' import { WarningIcon } from 'ui' import type { ChartData } from './Charts.types' -import dayjs from 'dayjs' interface ChartHandlerProps { id?: string @@ -73,7 +73,7 @@ const ChartHandler = ({ const databaseIdentifier = state.selectedDatabaseId - const { data: dailyStatsData, isLoading: isFetchingDailyStats } = useProjectDailyStatsQuery( + const { data: dailyStatsData, isPending: isFetchingDailyStats } = useProjectDailyStatsQuery( { projectRef: ref as string, attribute: attribute as ProjectDailyStatsAttribute, @@ -83,7 +83,7 @@ const ChartHandler = ({ { enabled: provider === 'daily-stats' && data === undefined } ) - const { data: infraMonitoringData, isLoading: isFetchingInfraMonitoring } = + const { data: infraMonitoringData, isPending: isFetchingInfraMonitoring } = useInfraMonitoringAttributesQuery( { projectRef: ref as string, diff --git a/apps/studio/components/ui/ComputeBadgeWrapper.tsx b/apps/studio/components/ui/ComputeBadgeWrapper.tsx index 610f43f7337..2a5a9e2901b 100644 --- a/apps/studio/components/ui/ComputeBadgeWrapper.tsx +++ b/apps/studio/components/ui/ComputeBadgeWrapper.tsx @@ -42,7 +42,7 @@ export const ComputeBadgeWrapper = ({ const cpuArchitecture = getCloudProviderArchitecture(cloudProvider) // fetches addons - const { data: addons, isLoading: isLoadingAddons } = useProjectAddonsQuery( + const { data: addons, isPending: isLoadingAddons } = useProjectAddonsQuery( { projectRef }, { enabled: open } ) @@ -65,7 +65,7 @@ export const ComputeBadgeWrapper = ({ const isHighestCompute = computeSize === highestComputeAvailable?.replace('ci_', '') - const { data, isLoading: isLoadingSubscriptions } = useOrgSubscriptionQuery( + const { data, isPending: isLoadingSubscriptions } = useOrgSubscriptionQuery( { orgSlug: slug }, { enabled: open } ) diff --git a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckboxAsync.tsx b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckboxAsync.tsx index 79ad290266d..a6489841b27 100644 --- a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckboxAsync.tsx +++ b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckboxAsync.tsx @@ -9,6 +9,7 @@ import type { DataTableCheckboxFilterField } from '../DataTable.types' import { formatCompactNumber } from '../DataTable.utils' import { InputWithAddons } from '../primitives/InputWithAddons' import { useDataTable } from '../providers/DataTableProvider' +import { keepPreviousData } from '@tanstack/react-query' export function DataTableFilterCheckboxAsync({ value: _value, @@ -36,7 +37,7 @@ export function DataTableFilterCheckboxAsync({ facetSearch: debouncedSearch, }, { - keepPreviousData: true, + placeholderData: keepPreviousData, enabled: debouncedSearch.length > 0, initialData: debouncedSearch.length === 0 ? options : undefined, } diff --git a/apps/studio/components/ui/DatabaseSelector.tsx b/apps/studio/components/ui/DatabaseSelector.tsx index ccffbffc349..e5831043cf1 100644 --- a/apps/studio/components/ui/DatabaseSelector.tsx +++ b/apps/studio/components/ui/DatabaseSelector.tsx @@ -61,7 +61,7 @@ const DatabaseSelector = ({ const state = useDatabaseSelectorStateSnapshot() const selectedDatabaseId = _selectedDatabaseId ?? state.selectedDatabaseId - const { data, isLoading, isSuccess } = useReadReplicasQuery({ projectRef }) + const { data, isPending: isLoading, isSuccess } = useReadReplicasQuery({ projectRef }) const databases = data ?? [] const sortedDatabases = databases .sort((a, b) => (a.inserted_at > b.inserted_at ? 1 : 0)) diff --git a/apps/studio/components/ui/FunctionSelector.tsx b/apps/studio/components/ui/FunctionSelector.tsx index 8eb073f80d6..70c4c74f3fb 100644 --- a/apps/studio/components/ui/FunctionSelector.tsx +++ b/apps/studio/components/ui/FunctionSelector.tsx @@ -7,6 +7,7 @@ import { DatabaseFunctionsData, useDatabaseFunctionsQuery, } from 'data/database-functions/database-functions-query' +import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import Link from 'next/link' import { useRouter } from 'next/router' import { @@ -26,7 +27,6 @@ import { Popover_Shadcn_, ScrollArea, } from 'ui' -import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' type DatabaseFunction = DatabaseFunctionsData[number] @@ -59,7 +59,14 @@ const FunctionSelector = ({ const { data: project } = useSelectedProjectQuery() const [open, setOpen] = useState(false) - const { data, error, isLoading, isError, isSuccess, refetch } = useDatabaseFunctionsQuery({ + const { + data, + error, + isPending: isLoading, + isError, + isSuccess, + refetch, + } = useDatabaseFunctionsQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) diff --git a/apps/studio/components/ui/OrganizationProjectSelector.tsx b/apps/studio/components/ui/OrganizationProjectSelector.tsx index c42f87523ce..be069a415d5 100644 --- a/apps/studio/components/ui/OrganizationProjectSelector.tsx +++ b/apps/studio/components/ui/OrganizationProjectSelector.tsx @@ -1,3 +1,4 @@ +import { keepPreviousData } from '@tanstack/react-query' import { useDebounce, useIntersectionObserver } from '@uidotdev/usehooks' import { OrgProject, useOrgProjectsInfiniteQuery } from 'data/projects/org-projects-infinite-query' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' @@ -90,7 +91,7 @@ export const OrganizationProjectSelector = ({ fetchNextPage, } = useOrgProjectsInfiniteQuery( { slug, search: search.length === 0 ? search : debouncedSearch }, - { enabled: fetchOnMount || open, keepPreviousData: true } + { enabled: fetchOnMount || open, placeholderData: keepPreviousData } ) const projects = useMemo(() => data?.pages.flatMap((page) => page.projects), [data?.pages]) || [] diff --git a/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx b/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx index 2d31fc8e936..4c90a5b8342 100644 --- a/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx +++ b/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx @@ -28,12 +28,12 @@ export const DisplayApiSettings = ({ const { data: settings, isError: isProjectSettingsError, - isLoading: isProjectSettingsLoading, + isPending: isProjectSettingsLoading, } = useProjectSettingsV2Query({ projectRef }) const { data, isError: isJwtSecretUpdateStatusError, - isLoading: isJwtSecretUpdateStatusLoading, + isPending: isJwtSecretUpdateStatusLoading, } = useJwtSecretUpdatingStatusQuery({ projectRef }) const jwtSecretUpdateStatus = data?.jwtSecretUpdateStatus diff --git a/apps/studio/components/ui/ProjectSettings/DisplayConfigSettings.tsx b/apps/studio/components/ui/ProjectSettings/DisplayConfigSettings.tsx index 8ad33c4f4d4..b42a18f47fc 100644 --- a/apps/studio/components/ui/ProjectSettings/DisplayConfigSettings.tsx +++ b/apps/studio/components/ui/ProjectSettings/DisplayConfigSettings.tsx @@ -13,7 +13,7 @@ export const DisplayConfigSettings = () => { const { ref: projectRef } = useParams() const { data: settings, - isLoading: isProjectSettingsLoading, + isPending: isProjectSettingsLoading, isError: isProjectSettingsError, } = useProjectSettingsV2Query({ projectRef, @@ -23,7 +23,7 @@ export const DisplayConfigSettings = () => { const { data, isError: isJwtSecretUpdateStatusError, - isLoading: isJwtSecretUpdateStatusLoading, + isPending: isJwtSecretUpdateStatusLoading, } = useJwtSecretUpdatingStatusQuery({ projectRef }) const jwtSecretUpdateStatus = data?.jwtSecretUpdateStatus const isNotUpdatingJwtSecret = diff --git a/apps/studio/components/ui/SchemaComboBox.tsx b/apps/studio/components/ui/SchemaComboBox.tsx index 42a409afdab..4b96692a215 100644 --- a/apps/studio/components/ui/SchemaComboBox.tsx +++ b/apps/studio/components/ui/SchemaComboBox.tsx @@ -47,7 +47,7 @@ export const SchemaComboBox = ({ const { data: project } = useSelectedProjectQuery() const { data, - isLoading: isSchemasLoading, + isPending: isSchemasLoading, isSuccess: isSchemasSuccess, isError: isSchemasError, error: schemasError, diff --git a/apps/studio/components/ui/SchemaSelector.tsx b/apps/studio/components/ui/SchemaSelector.tsx index 62cb0f90af5..58626dc3d40 100644 --- a/apps/studio/components/ui/SchemaSelector.tsx +++ b/apps/studio/components/ui/SchemaSelector.tsx @@ -60,7 +60,7 @@ const SchemaSelector = ({ const { data: project } = useSelectedProjectQuery() const { data, - isLoading: isSchemasLoading, + isPending: isSchemasLoading, isSuccess: isSchemasSuccess, isError: isSchemasError, error: schemasError, diff --git a/apps/studio/components/ui/org-selector.tsx b/apps/studio/components/ui/org-selector.tsx index 5c09baf40f9..d563cb74a6a 100644 --- a/apps/studio/components/ui/org-selector.tsx +++ b/apps/studio/components/ui/org-selector.tsx @@ -87,7 +87,7 @@ const OrganizationCard = ({ export function OrganizationSelector({ onSelect, maxOrgsToShow = 5 }: ProjectClaimChooseOrgProps) { const { data: organizations = [], - isLoading: isLoadingOrgs, + isPending: isLoadingOrgs, isSuccess: isSuccessOrgs, isError: isErrorOrgs, } = useOrganizationsQuery() diff --git a/apps/studio/data/auth/users-infinite-query.ts b/apps/studio/data/auth/users-infinite-query.ts index c9f524880c7..c924b7d36d1 100644 --- a/apps/studio/data/auth/users-infinite-query.ts +++ b/apps/studio/data/auth/users-infinite-query.ts @@ -1,5 +1,5 @@ import { getPaginatedUsersSQL } from '@supabase/pg-meta/src/sql/studio/get-users-paginated' -import { useInfiniteQuery } from '@tanstack/react-query' +import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query' import { OptimizedSearchColumns } from '@supabase/pg-meta/src/sql/studio/get-users-types' import type { components } from 'data/api' @@ -40,12 +40,21 @@ export const useUsersInfiniteQuery = ( order, column, }: UsersVariables, - { enabled = true, ...options }: UseCustomInfiniteQueryOptions = {} + { + enabled = true, + ...options + }: UseCustomInfiniteQueryOptions< + UsersData, + UsersError, + InfiniteData, + readonly unknown[], + string | number | undefined + > = {} ) => { const { data: project } = useSelectedProjectQuery() const isActive = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY - return useInfiniteQuery({ + return useInfiniteQuery({ queryKey: authKeys.usersInfinite(projectRef, { keywords, filter, @@ -75,6 +84,7 @@ export const useUsersInfiniteQuery = ( ) }, enabled: enabled && typeof projectRef !== 'undefined' && isActive, + initialPageParam: undefined, getNextPageParam(lastPage, pages) { const hasNextPage = lastPage.result.length >= USERS_PAGE_LIMIT if (column) { diff --git a/apps/studio/data/config/disk-attributes-query.ts b/apps/studio/data/config/disk-attributes-query.ts index 07c1b9ced35..55d630a3fe4 100644 --- a/apps/studio/data/config/disk-attributes-query.ts +++ b/apps/studio/data/config/disk-attributes-query.ts @@ -53,10 +53,13 @@ export const useRemainingDurationForDiskAttributeUpdate = ({ projectRef?: string enabled?: boolean }) => { - const { data, isLoading, isError, isSuccess, error } = useDiskAttributesQuery( - { projectRef }, - { enabled } - ) + const { + data, + isPending: isLoading, + isError, + isSuccess, + error, + } = useDiskAttributesQuery({ projectRef }, { enabled }) const lastModifiedAtString = dayjs(data?.last_modified_at ?? '').utc() const secondsFromNow = Math.max( diff --git a/apps/studio/data/config/jwt-secret-updating-status-query.ts b/apps/studio/data/config/jwt-secret-updating-status-query.ts index c2ac6980191..c28dd8863e3 100644 --- a/apps/studio/data/config/jwt-secret-updating-status-query.ts +++ b/apps/studio/data/config/jwt-secret-updating-status-query.ts @@ -56,16 +56,17 @@ export const useJwtSecretUpdatingStatusQuery = { const client = useQueryClient() - const query = useQuery({ + const query = useQuery({ queryKey: configKeys.jwtSecretUpdatingStatus(projectRef), queryFn: ({ signal }) => getJwtSecretUpdatingStatus({ projectRef }, signal), enabled: enabled && typeof projectRef !== 'undefined', - refetchInterval(data) { + refetchInterval: (query) => { + const data = query.state.data if (!data) { return false } - const { jwtSecretUpdateStatus } = data as unknown as JwtSecretUpdatingStatusResponse + const { jwtSecretUpdateStatus } = data const interval = jwtSecretUpdateStatus === JwtSecretUpdateStatus.Updating ? 1000 : false diff --git a/apps/studio/data/config/project-settings-v2-query.ts b/apps/studio/data/config/project-settings-v2-query.ts index a7684df716b..c957b930eaa 100644 --- a/apps/studio/data/config/project-settings-v2-query.ts +++ b/apps/studio/data/config/project-settings-v2-query.ts @@ -53,7 +53,7 @@ export const useProjectSettingsV2Query = ( queryKey: configKeys.settingsV2(projectRef), queryFn: ({ signal }) => getProjectSettings({ projectRef }, signal), enabled: enabled && typeof projectRef !== 'undefined', - refetchInterval: (_, query) => { + refetchInterval: (query) => { const data = query.state.data const apiKeys = data?.service_api_keys ?? [] const interval = diff --git a/apps/studio/data/config/project-upgrade-status-query.ts b/apps/studio/data/config/project-upgrade-status-query.ts index 908456c7cb9..5c5fb43f552 100644 --- a/apps/studio/data/config/project-upgrade-status-query.ts +++ b/apps/studio/data/config/project-upgrade-status-query.ts @@ -45,20 +45,20 @@ export const useProjectUpgradingStatusQuery = { const client = useQueryClient() - const query = useQuery({ + const query = useQuery({ queryKey: configKeys.upgradeStatus(projectRef), queryFn: ({ signal }) => getProjectUpgradingStatus({ projectRef, trackingId }, signal), enabled: enabled && typeof projectRef !== 'undefined', - refetchInterval(data) { - const response = data as unknown as ProjectUpgradingStatusData - if (!response) return false + refetchInterval: (query) => { + const data = query.state.data + if (!data) return false const interval = // Transited to UPGRADING state via client, but job not yet picked up (projectStatus === PROJECT_STATUS.UPGRADING && - response.databaseUpgradeStatus?.status !== DatabaseUpgradeStatus.Upgrading) || + data.databaseUpgradeStatus?.status !== DatabaseUpgradeStatus.Upgrading) || // Project currently getting upgraded - response.databaseUpgradeStatus?.status === DatabaseUpgradeStatus.Upgrading + data.databaseUpgradeStatus?.status === DatabaseUpgradeStatus.Upgrading ? 5000 : false @@ -70,7 +70,7 @@ export const useProjectUpgradingStatusQuery = { if (!query.isSuccess) return - const response = query.data as unknown as ProjectUpgradingStatusData + const response = query.data as ProjectUpgradingStatusData if (response.databaseUpgradeStatus?.status === DatabaseUpgradeStatus.Upgraded) { client.invalidateQueries({ queryKey: configKeys.upgradeEligibility(projectRef) }) } diff --git a/apps/studio/data/content/content-infinite-query.ts b/apps/studio/data/content/content-infinite-query.ts index 94c953b7ac8..e45fd2a09fa 100644 --- a/apps/studio/data/content/content-infinite-query.ts +++ b/apps/studio/data/content/content-infinite-query.ts @@ -1,4 +1,4 @@ -import { useInfiniteQuery } from '@tanstack/react-query' +import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query' import { get, handleError } from 'data/fetchers' import { UseCustomInfiniteQueryOptions } from 'types' @@ -52,13 +52,20 @@ export const useContentInfiniteQuery = ( { enabled = true, ...options - }: UseCustomInfiniteQueryOptions = {} + }: UseCustomInfiniteQueryOptions< + ContentData, + ContentError, + InfiniteData, + readonly unknown[], + string | undefined + > = {} ) => { - return useInfiniteQuery({ + return useInfiniteQuery({ queryKey: contentKeys.infiniteList(projectRef, { type, name, limit, sort }), queryFn: ({ signal, pageParam }) => getContent({ projectRef, type, name, limit, sort, cursor: pageParam }, signal), enabled: enabled && typeof projectRef !== 'undefined', + initialPageParam: undefined, getNextPageParam: (lastPage) => lastPage.cursor, ...options, }) diff --git a/apps/studio/data/content/sql-folder-contents-query.ts b/apps/studio/data/content/sql-folder-contents-query.ts index e6eb557c539..9a8b9360bce 100644 --- a/apps/studio/data/content/sql-folder-contents-query.ts +++ b/apps/studio/data/content/sql-folder-contents-query.ts @@ -1,4 +1,4 @@ -import { useInfiniteQuery } from '@tanstack/react-query' +import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query' import { get, handleError } from 'data/fetchers' import type { ResponseError, UseCustomInfiniteQueryOptions } from 'types' @@ -54,15 +54,17 @@ export const useSQLSnippetFolderContentsQuery = , + readonly unknown[], + string | undefined > = {} ) => - useInfiniteQuery({ + useInfiniteQuery({ queryKey: contentKeys.folderContents(projectRef, folderId, { name, sort }), queryFn: ({ signal, pageParam }) => getSQLSnippetFolderContents({ projectRef, folderId, cursor: pageParam, name, sort }, signal), - enabled: enabled && typeof projectRef !== 'undefined' && typeof folderId !== 'undefined', + initialPageParam: undefined, getNextPageParam(lastPage) { return lastPage.cursor }, diff --git a/apps/studio/data/content/sql-folders-query.ts b/apps/studio/data/content/sql-folders-query.ts index e0abb4932c4..d91904fc791 100644 --- a/apps/studio/data/content/sql-folders-query.ts +++ b/apps/studio/data/content/sql-folders-query.ts @@ -1,4 +1,4 @@ -import { useInfiniteQuery } from '@tanstack/react-query' +import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query' import { components } from 'api-types' import { get, handleError } from 'data/fetchers' @@ -60,13 +60,20 @@ export const useSQLSnippetFoldersQuery = ( { enabled = true, ...options - }: UseCustomInfiniteQueryOptions = {} + }: UseCustomInfiniteQueryOptions< + SQLSnippetFoldersData, + SQLSnippetFoldersError, + InfiniteData, + readonly unknown[], + string | undefined + > = {} ) => - useInfiniteQuery({ + useInfiniteQuery({ queryKey: contentKeys.folders(projectRef, { name, sort }), queryFn: ({ signal, pageParam }) => getSQLSnippetFolders({ projectRef, cursor: pageParam, name, sort }, signal), enabled: enabled && typeof projectRef !== 'undefined', + initialPageParam: undefined, getNextPageParam(lastPage) { return lastPage.cursor }, diff --git a/apps/studio/data/content/sql-snippets-query.ts b/apps/studio/data/content/sql-snippets-query.ts index 3c941176ac7..f6eefe42df6 100644 --- a/apps/studio/data/content/sql-snippets-query.ts +++ b/apps/studio/data/content/sql-snippets-query.ts @@ -1,4 +1,4 @@ -import { useInfiniteQuery } from '@tanstack/react-query' +import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query' import { get } from 'data/fetchers' import { UseCustomInfiniteQueryOptions } from 'types' @@ -62,13 +62,20 @@ export const useSqlSnippetsQuery = ( { enabled = true, ...options - }: UseCustomInfiniteQueryOptions = {} + }: UseCustomInfiniteQueryOptions< + SqlSnippetsData, + SqlSnippetsError, + InfiniteData, + readonly unknown[], + string | undefined + > = {} ) => - useInfiniteQuery({ + useInfiniteQuery({ queryKey: contentKeys.sqlSnippets(projectRef, { sort, name, visibility, favorite }), queryFn: ({ signal, pageParam: cursor }) => getSqlSnippets({ projectRef, cursor, sort, name, visibility, favorite }, signal), enabled: enabled && typeof projectRef !== 'undefined', + initialPageParam: undefined, getNextPageParam(lastPage) { return lastPage.cursor }, diff --git a/apps/studio/data/database-cron-jobs/database-cron-jobs-infinite-query.ts b/apps/studio/data/database-cron-jobs/database-cron-jobs-infinite-query.ts index bb0e0173438..fb8d737f4bf 100644 --- a/apps/studio/data/database-cron-jobs/database-cron-jobs-infinite-query.ts +++ b/apps/studio/data/database-cron-jobs/database-cron-jobs-infinite-query.ts @@ -1,4 +1,4 @@ -import { useInfiniteQuery } from '@tanstack/react-query' +import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query' import { executeSql } from 'data/sql/execute-sql-query' import type { ResponseError, UseCustomInfiniteQueryOptions } from 'types' @@ -90,10 +90,12 @@ export const useCronJobsInfiniteQuery = ( }: UseCustomInfiniteQueryOptions< DatabaseCronJobsInfiniteData, DatabaseCronJobsInfiniteError, - TData + InfiniteData, + readonly unknown[], + number > = {} ) => - useInfiniteQuery({ + useInfiniteQuery({ queryKey: databaseCronJobsKeys.listInfinite(projectRef, searchTerm), queryFn: ({ pageParam }) => { return getDatabaseCronJobs({ @@ -105,6 +107,7 @@ export const useCronJobsInfiniteQuery = ( }, staleTime: 0, enabled: enabled && typeof projectRef !== 'undefined', + initialPageParam: 0, getNextPageParam(lastPage, pages) { const page = pages.length const hasNextPage = lastPage.length >= CRON_JOBS_PAGE_LIMIT diff --git a/apps/studio/data/database-cron-jobs/database-cron-jobs-runs-infinite-query.ts b/apps/studio/data/database-cron-jobs/database-cron-jobs-runs-infinite-query.ts index 049b7a6d64f..e30bc633db0 100644 --- a/apps/studio/data/database-cron-jobs/database-cron-jobs-runs-infinite-query.ts +++ b/apps/studio/data/database-cron-jobs/database-cron-jobs-runs-infinite-query.ts @@ -1,4 +1,4 @@ -import { useInfiniteQuery } from '@tanstack/react-query' +import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query' import { last } from 'lodash' import { executeSql } from 'data/sql/execute-sql-query' @@ -59,9 +59,15 @@ export const useCronJobRunsInfiniteQuery = ( { enabled = true, ...options - }: UseCustomInfiniteQueryOptions = {} + }: UseCustomInfiniteQueryOptions< + DatabaseCronJobRunData, + DatabaseCronJobError, + InfiniteData, + readonly unknown[], + string | undefined + > = {} ) => - useInfiniteQuery({ + useInfiniteQuery({ queryKey: databaseCronJobsKeys.runsInfinite(projectRef, jobId, { status }), queryFn: ({ pageParam }) => { return getDatabaseCronJobRuns({ @@ -73,7 +79,7 @@ export const useCronJobRunsInfiniteQuery = ( }, staleTime: 0, enabled: enabled && typeof projectRef !== 'undefined', - + initialPageParam: undefined, getNextPageParam(lastPage) { const hasNextPage = lastPage.length <= CRON_JOB_RUNS_PAGE_SIZE if (!hasNextPage) return undefined diff --git a/apps/studio/data/database-queues/database-queue-messages-infinite-query.ts b/apps/studio/data/database-queues/database-queue-messages-infinite-query.ts index c392fbd5645..968cbba10ce 100644 --- a/apps/studio/data/database-queues/database-queue-messages-infinite-query.ts +++ b/apps/studio/data/database-queues/database-queue-messages-infinite-query.ts @@ -1,4 +1,4 @@ -import { useInfiniteQuery } from '@tanstack/react-query' +import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query' import dayjs from 'dayjs' import { last } from 'lodash' @@ -86,9 +86,15 @@ export const useQueueMessagesInfiniteQuery = ( { enabled = true, ...options - }: UseCustomInfiniteQueryOptions = {} + }: UseCustomInfiniteQueryOptions< + DatabaseQueueData, + DatabaseQueueError, + InfiniteData, + readonly unknown[], + string | undefined + > = {} ) => - useInfiniteQuery({ + useInfiniteQuery({ queryKey: databaseQueuesKeys.getMessagesInfinite(projectRef, queueName, { status }), queryFn: ({ pageParam }) => { return getDatabaseQueue({ @@ -101,7 +107,7 @@ export const useQueueMessagesInfiniteQuery = ( }, staleTime: 0, enabled: enabled && typeof projectRef !== 'undefined', - + initialPageParam: undefined, getNextPageParam(lastPage) { const hasNextPage = lastPage.length <= QUEUE_MESSAGES_PAGE_SIZE if (!hasNextPage) return undefined diff --git a/apps/studio/data/entity-types/entity-types-infinite-query.ts b/apps/studio/data/entity-types/entity-types-infinite-query.ts index 12ec54dc866..21a7306cb00 100644 --- a/apps/studio/data/entity-types/entity-types-infinite-query.ts +++ b/apps/studio/data/entity-types/entity-types-infinite-query.ts @@ -1,4 +1,4 @@ -import { QueryClient, useInfiniteQuery } from '@tanstack/react-query' +import { InfiniteData, QueryClient, useInfiniteQuery } from '@tanstack/react-query' import { executeSql, ExecuteSqlVariables } from 'data/sql/execute-sql-query' import type { ResponseError, UseCustomInfiniteQueryOptions } from 'types' import { ENTITY_TYPE } from './entity-type-constants' @@ -130,9 +130,15 @@ export const useEntityTypesQuery = ( { enabled = true, ...options - }: UseCustomInfiniteQueryOptions = {} + }: UseCustomInfiniteQueryOptions< + EntityTypesData, + EntityTypesError, + InfiniteData, + readonly unknown[], + number | undefined + > = {} ) => { - return useInfiniteQuery({ + return useInfiniteQuery({ queryKey: entityTypeKeys.list(projectRef, { schemas, search, sort, limit, filterTypes }), queryFn: ({ signal, pageParam }) => getEntityTypes( @@ -149,6 +155,7 @@ export const useEntityTypesQuery = ( signal ), enabled: enabled && typeof projectRef !== 'undefined', + initialPageParam: undefined, getNextPageParam(lastPage, pages) { const page = pages.length const currentTotalCount = page * limit @@ -178,6 +185,7 @@ export function prefetchEntityTypes( ) { return client.prefetchInfiniteQuery({ queryKey: entityTypeKeys.list(projectRef, { schemas, search, sort, limit, filterTypes }), + initialPageParam: 0, queryFn: ({ signal, pageParam }) => getEntityTypes( { diff --git a/apps/studio/data/logs/unified-logs-chart-query.ts b/apps/studio/data/logs/unified-logs-chart-query.ts index f795c9f199f..f4c3cf32105 100644 --- a/apps/studio/data/logs/unified-logs-chart-query.ts +++ b/apps/studio/data/logs/unified-logs-chart-query.ts @@ -1,11 +1,11 @@ -import { useQuery } from '@tanstack/react-query' +import { keepPreviousData, useQuery } from '@tanstack/react-query' import { getLogsChartQuery } from 'components/interfaces/UnifiedLogs/UnifiedLogs.queries' import { handleError, post } from 'data/fetchers' import { ExecuteSqlError } from 'data/sql/execute-sql-query' +import { UseCustomQueryOptions } from 'types' import { logsKeys } from './keys' import { UNIFIED_LOGS_QUERY_OPTIONS, UnifiedLogsVariables } from './unified-logs-infinite-query' -import { UseCustomQueryOptions } from 'types' export async function getUnifiedLogsChart( { projectRef, search }: UnifiedLogsVariables, @@ -155,7 +155,7 @@ export const useUnifiedLogsChartQuery = ( queryKey: logsKeys.unifiedLogsChart(projectRef, search), queryFn: ({ signal }) => getUnifiedLogsChart({ projectRef, search }, signal), enabled: enabled && typeof projectRef !== 'undefined', - keepPreviousData: true, + placeholderData: keepPreviousData, ...UNIFIED_LOGS_QUERY_OPTIONS, ...options, }) diff --git a/apps/studio/data/logs/unified-logs-infinite-query.ts b/apps/studio/data/logs/unified-logs-infinite-query.ts index 8013c05f4a2..5357af0f488 100644 --- a/apps/studio/data/logs/unified-logs-infinite-query.ts +++ b/apps/studio/data/logs/unified-logs-infinite-query.ts @@ -1,4 +1,4 @@ -import { useInfiniteQuery } from '@tanstack/react-query' +import { InfiniteData, keepPreviousData, useInfiniteQuery } from '@tanstack/react-query' import { getUnifiedLogsQuery } from 'components/interfaces/UnifiedLogs/UnifiedLogs.queries' import { @@ -159,19 +159,26 @@ export const useUnifiedLogsInfiniteQuery = ( { enabled = true, ...options - }: UseCustomInfiniteQueryOptions = {} + }: UseCustomInfiniteQueryOptions< + UnifiedLogsData, + UnifiedLogsError, + InfiniteData, + readonly unknown[], + PageParam | null + > = {} ) => { - return useInfiniteQuery({ + return useInfiniteQuery({ queryKey: logsKeys.unifiedLogsInfinite(projectRef, search), queryFn: ({ signal, pageParam }) => { return getUnifiedLogs({ projectRef, search, pageParam }, signal) }, enabled: enabled && typeof projectRef !== 'undefined', - keepPreviousData: true, + placeholderData: keepPreviousData, getPreviousPageParam: (firstPage) => { if (!firstPage.prevCursor) return null return { cursor: firstPage.prevCursor, direction: 'prev' } as const }, + initialPageParam: null, getNextPageParam(lastPage) { if (!lastPage.nextCursor || lastPage.data.length === 0) return null return { cursor: lastPage.nextCursor, direction: 'next' } as const diff --git a/apps/studio/data/notifications/notifications-v2-query.ts b/apps/studio/data/notifications/notifications-v2-query.ts index 39ba36d5f0a..3590a163d94 100644 --- a/apps/studio/data/notifications/notifications-v2-query.ts +++ b/apps/studio/data/notifications/notifications-v2-query.ts @@ -1,4 +1,4 @@ -import { useInfiniteQuery } from '@tanstack/react-query' +import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query' import { get, handleError } from 'data/fetchers' import type { components } from 'data/api' @@ -64,15 +64,22 @@ export type NotificationsError = ResponseError export const useNotificationsV2Query = ( { status, filters, limit = NOTIFICATIONS_PAGE_LIMIT }: Omit, { - enabled = true, + enabled, ...options - }: UseCustomInfiniteQueryOptions = {} + }: UseCustomInfiniteQueryOptions< + NotificationsData, + NotificationsError, + InfiniteData, + readonly unknown[], + number | undefined + > = {} ) => { - return useInfiniteQuery({ + return useInfiniteQuery({ queryKey: notificationKeys.listV2({ status, filters, limit }), queryFn: ({ signal, pageParam }) => getNotifications({ status, filters, limit, page: pageParam }, signal), enabled: enabled, + initialPageParam: 0, getNextPageParam(lastPage, pages) { const page = pages.length if ((lastPage ?? []).length < limit) return undefined diff --git a/apps/studio/data/projects/org-projects-infinite-query.ts b/apps/studio/data/projects/org-projects-infinite-query.ts index 855fbf61c11..d13b328d006 100644 --- a/apps/studio/data/projects/org-projects-infinite-query.ts +++ b/apps/studio/data/projects/org-projects-infinite-query.ts @@ -1,4 +1,4 @@ -import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query' +import { InfiniteData, useInfiniteQuery, useQueryClient } from '@tanstack/react-query' import { useCallback } from 'react' import { components } from 'api-types' @@ -66,15 +66,22 @@ export const useOrgProjectsInfiniteQuery = ( { enabled = true, ...options - }: UseCustomInfiniteQueryOptions = {} + }: UseCustomInfiniteQueryOptions< + OrgProjectsInfiniteData, + OrgProjectsInfiniteError, + InfiniteData, + readonly unknown[], + number | undefined + > = {} ) => { const { profile } = useProfile() - return useInfiniteQuery({ + return useInfiniteQuery({ queryKey: projectKeys.infiniteListByOrg(slug, { limit, sort, search, statuses }), queryFn: ({ signal, pageParam }) => getOrganizationProjects({ slug, limit, page: pageParam, sort, search, statuses }, signal), enabled: enabled && profile !== undefined && typeof slug !== 'undefined', staleTime: 30 * 60 * 1000, // 30 minutes + initialPageParam: 0, getNextPageParam(lastPage, pages) { const page = pages.length const currentTotalCount = page * limit diff --git a/apps/studio/data/projects/project-detail-query.ts b/apps/studio/data/projects/project-detail-query.ts index 432833bfa70..195155bb520 100644 --- a/apps/studio/data/projects/project-detail-query.ts +++ b/apps/studio/data/projects/project-detail-query.ts @@ -51,10 +51,10 @@ export const useProjectDetailQuery = ( queryFn: ({ signal }) => getProjectDetail({ ref }, signal), enabled: enabled && typeof ref !== 'undefined', staleTime: 30 * 1000, - refetchInterval(data) { - const result = data && (data as unknown as ProjectDetailData) - const status = result && result.status - const connectionString = result && result.connectionString + refetchInterval: (query) => { + const data = query.state.data + const status = data && data.status + const connectionString = data && data.connectionString if (status === 'COMING_UP' || status === 'UNKNOWN' || !isValidConnString(connectionString)) { return 5 * 1000 // 5 seconds diff --git a/apps/studio/data/projects/projects-infinite-query.ts b/apps/studio/data/projects/projects-infinite-query.ts index 556333a8d96..f9d147350b6 100644 --- a/apps/studio/data/projects/projects-infinite-query.ts +++ b/apps/studio/data/projects/projects-infinite-query.ts @@ -1,4 +1,4 @@ -import { useInfiniteQuery } from '@tanstack/react-query' +import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query' import { components } from 'api-types' import { get, handleError } from 'data/fetchers' @@ -50,15 +50,22 @@ export const useProjectsInfiniteQuery = ( { enabled = true, ...options - }: UseCustomInfiniteQueryOptions = {} + }: UseCustomInfiniteQueryOptions< + ProjectsInfiniteData, + ProjectsInfiniteError, + InfiniteData, + readonly unknown[], + number + > = {} ) => { const { profile } = useProfile() - return useInfiniteQuery({ + return useInfiniteQuery({ queryKey: projectKeys.infiniteList({ limit, sort, search }), queryFn: ({ signal, pageParam }) => getProjects({ limit, page: pageParam, sort, search }, signal), enabled: enabled && profile !== undefined, staleTime: 30 * 60 * 1000, // 30 minutes + initialPageParam: 0, getNextPageParam(lastPage, pages) { const page = pages.length const currentTotalCount = page * limit diff --git a/apps/studio/data/read-replicas/replicas-query.ts b/apps/studio/data/read-replicas/replicas-query.ts index ea8e86b6377..30214522541 100644 --- a/apps/studio/data/read-replicas/replicas-query.ts +++ b/apps/studio/data/read-replicas/replicas-query.ts @@ -48,7 +48,7 @@ export const usePrimaryDatabase = ({ projectRef }: { projectRef?: string }) => { const { data: databases = [], error, - isLoading, + isPending: isLoading, isError, isSuccess, } = useReadReplicasQuery({ projectRef }) diff --git a/apps/studio/data/replication/use-table-reset.ts b/apps/studio/data/replication/use-table-reset.ts index 86136afdfda..bf401e89559 100644 --- a/apps/studio/data/replication/use-table-reset.ts +++ b/apps/studio/data/replication/use-table-reset.ts @@ -1,7 +1,7 @@ import { useState } from 'react' import { toast } from 'sonner' -import { RollbackType, useRollbackTableMutation } from './rollback-table-mutation' import { useRestartPipelineHelper } from './restart-pipeline-helper' +import { RollbackType, useRollbackTableMutation } from './rollback-table-mutation' interface UseTableResetParams { tableName: string @@ -17,7 +17,7 @@ export const useTableReset = ({ tableName, onSuccess, onError }: UseTableResetPa const [isRestartingPipeline, setIsRestartingPipeline] = useState(false) const { restartPipeline } = useRestartPipelineHelper() - const { mutate: rollbackTable, isLoading: isRollingBack } = useRollbackTableMutation({ + const { mutate: rollbackTable, isPending: isRollingBack } = useRollbackTableMutation({ onSuccess: async (_, vars) => { const { projectRef, pipelineId } = vars toast.success(`Table "${tableName}" reset successfully and pipeline is being restarted`) diff --git a/apps/studio/data/reports/database-report-query.ts b/apps/studio/data/reports/database-report-query.ts index 3ca572b75ad..b7c52d2fb06 100644 --- a/apps/studio/data/reports/database-report-query.ts +++ b/apps/studio/data/reports/database-report-query.ts @@ -13,7 +13,7 @@ export const useDatabaseReport = () => { const largeObjects = queryHooks.largeObjects() as DbQueryHook const activeHooks = [largeObjects] - const isLoading = activeHooks.some((hook) => hook.isLoading) + const isPending = activeHooks.some((hook) => hook.isLoading) return { data: { @@ -26,7 +26,7 @@ export const useDatabaseReport = () => { largeObjects: largeObjects.params, }, largeObjectsSql: largeObjects.resolvedSql, - isLoading, + isPending, refresh: () => largeObjects.runQuery, } } diff --git a/apps/studio/data/reports/report.utils.ts b/apps/studio/data/reports/report.utils.ts index 0c6b38b61c2..12be4e71e32 100644 --- a/apps/studio/data/reports/report.utils.ts +++ b/apps/studio/data/reports/report.utils.ts @@ -39,7 +39,7 @@ export const REPORT_STATUS_CODE_COLORS: { [key: string]: { light: string; dark: } export const useEdgeFnIdToName = ({ projectRef }: { projectRef: string }) => { - const { data: edgeFunctions, isLoading } = useEdgeFunctionsQuery({ + const { data: edgeFunctions, isPending: isLoading } = useEdgeFunctionsQuery({ projectRef, }) diff --git a/apps/studio/data/reports/storage-report-query.ts b/apps/studio/data/reports/storage-report-query.ts index 19a2ac23030..f994fe6fd0a 100644 --- a/apps/studio/data/reports/storage-report-query.ts +++ b/apps/studio/data/reports/storage-report-query.ts @@ -1,10 +1,10 @@ -import { useEffect, useState } from 'react' import isEqual from 'lodash/isEqual' +import { useEffect, useState } from 'react' import { useParams } from 'common' import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants' -import { queriesFactory } from 'components/interfaces/Reports/Reports.utils' import { ReportFilterItem } from 'components/interfaces/Reports/Reports.types' +import { queriesFactory } from 'components/interfaces/Reports/Reports.utils' import { useDatabaseSelectorStateSnapshot } from 'state/database-selector' import type { LogsEndpointParams } from 'components/interfaces/Settings/Logs/Logs.types' diff --git a/apps/studio/data/storage/buckets-query.ts b/apps/studio/data/storage/buckets-query.ts index b082ed2a09c..e4776d87895 100644 --- a/apps/studio/data/storage/buckets-query.ts +++ b/apps/studio/data/storage/buckets-query.ts @@ -1,8 +1,9 @@ import { + InfiniteData, + keepPreviousData, useInfiniteQuery, useQuery, useQueryClient, - type UseInfiniteQueryResult, } from '@tanstack/react-query' import { useMemo } from 'react' @@ -152,19 +153,26 @@ export const usePaginatedBucketsQuery = ( { enabled = true, ...options - }: UseCustomInfiniteQueryOptions = {} + }: UseCustomInfiniteQueryOptions< + BucketsWithPaginationData, + BucketsError, + InfiniteData, + readonly unknown[], + number + > = {} ) => { const { data: project } = useSelectedProjectQuery() const isActive = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY - const { keepPreviousData, ...restOptions } = options - const resolvedKeepPreviousData = keepPreviousData ?? true + const { placeholderData, ...restOptions } = options + const resolvedPlaceholderData = placeholderData ?? keepPreviousData - return useInfiniteQuery({ + return useInfiniteQuery({ queryKey: storageKeys.bucketsList(projectRef, params), queryFn: ({ signal, pageParam }) => getBucketsPaginated({ projectRef, page: pageParam, ...params }, signal), enabled: enabled && typeof projectRef !== 'undefined' && isActive, + initialPageParam: 0, getNextPageParam: (lastPage, pages) => { const nextPageNumber = pages.length const limit = params.limit ?? DEFAULT_PAGE_SIZE @@ -174,7 +182,7 @@ export const usePaginatedBucketsQuery = ( return nextPageNumber }, ...restOptions, - keepPreviousData: resolvedKeepPreviousData, + placeholderData: resolvedPlaceholderData, retry: shouldRetryBucketsQuery, }) } @@ -190,7 +198,7 @@ export const useBucketInfoQueryPreferCached = (bucketId?: string, projectRef?: s if (!bucketId) return undefined const bucketsPages = queryClient.getQueryData(storageKeys.bucketsList(projectRef)) as - | UseInfiniteQueryResult['data'] + | InfiniteData | undefined const buckets = bucketsPages?.pages.flatMap((page) => page) ?? [] return buckets.find((b) => b.name === bucketId) diff --git a/apps/studio/data/tables/keys.ts b/apps/studio/data/tables/keys.ts index 7eb0142fed4..02d4221fe80 100644 --- a/apps/studio/data/tables/keys.ts +++ b/apps/studio/data/tables/keys.ts @@ -2,7 +2,7 @@ export const tableKeys = { list: (projectRef: string | undefined, schema?: string, includeColumns?: boolean) => ['projects', projectRef, 'tables', schema, includeColumns].filter(Boolean), retrieve: (projectRef: string | undefined, name: string, schema: string) => - ['projects', projectRef, 'tables', schema, name].filter(Boolean), + ['projects', projectRef, 'table', schema, name].filter(Boolean), rolesAccess: (projectRef: string | undefined, schema: string) => [ 'projects', projectRef, diff --git a/apps/studio/hooks/analytics/useDbQuery.tsx b/apps/studio/hooks/analytics/useDbQuery.tsx index 519fdfba296..d4a60c4dd1a 100644 --- a/apps/studio/hooks/analytics/useDbQuery.tsx +++ b/apps/studio/hooks/analytics/useDbQuery.tsx @@ -50,7 +50,7 @@ const useDbQuery = ({ const { data, error: rqError, - isLoading, + isPending, isRefetching, refetch, } = useQuery({ @@ -81,7 +81,7 @@ const useDbQuery = ({ return { error, data, - isLoading, + isLoading: isPending, isRefetching, params, runQuery: refetch, diff --git a/apps/studio/hooks/analytics/useLogsPreview.tsx b/apps/studio/hooks/analytics/useLogsPreview.tsx index 1d9b6924f61..5e04dbc70dc 100644 --- a/apps/studio/hooks/analytics/useLogsPreview.tsx +++ b/apps/studio/hooks/analytics/useLogsPreview.tsx @@ -120,6 +120,7 @@ function useLogsPreview({ return data as unknown as Logs }, refetchOnWindowFocus: false, + initialPageParam: undefined as string | undefined, getNextPageParam(lastPage) { if ((lastPage.result?.length ?? 0) === 0) { return undefined diff --git a/apps/studio/hooks/analytics/useLogsQuery.tsx b/apps/studio/hooks/analytics/useLogsQuery.tsx index 646ba8c7f98..cfe3f2b82a2 100644 --- a/apps/studio/hooks/analytics/useLogsQuery.tsx +++ b/apps/studio/hooks/analytics/useLogsQuery.tsx @@ -67,7 +67,7 @@ const useLogsQuery = ( const { data, error: rqError, - isLoading, + isPending: isLoading, isRefetching, refetch, } = useQuery({ diff --git a/apps/studio/hooks/analytics/useSingleLog.tsx b/apps/studio/hooks/analytics/useSingleLog.tsx index bb4156e3f6c..03582882266 100644 --- a/apps/studio/hooks/analytics/useSingleLog.tsx +++ b/apps/studio/hooks/analytics/useSingleLog.tsx @@ -41,7 +41,7 @@ function useSingleLog({ const { data, error: rcError, - isLoading, + isPending, isRefetching, refetch, } = useQuery({ @@ -73,7 +73,7 @@ function useSingleLog({ data: !!result ? { ...result, metadata: logsMetadata ? result?.metadata : undefined } : undefined, - isLoading: (enabled && isLoading) || isRefetching, + isLoading: (enabled && isPending) || isRefetching, error, refresh: () => refetch(), } diff --git a/apps/studio/hooks/branches/useBranchMergeDiff.ts b/apps/studio/hooks/branches/useBranchMergeDiff.ts index 63f4fdbe4b8..ec7deb6f7c2 100644 --- a/apps/studio/hooks/branches/useBranchMergeDiff.ts +++ b/apps/studio/hooks/branches/useBranchMergeDiff.ts @@ -1,6 +1,6 @@ -import { useMemo } from 'react' import { useBranchDiffQuery } from 'data/branches/branch-diff-query' import { useMigrationsQuery } from 'data/database/migrations-query' +import { useMemo } from 'react' import { useEdgeFunctionsDiff, type EdgeFunctionsDiffResult } from './useEdgeFunctionsDiff' interface UseBranchMergeDiffProps { @@ -54,7 +54,7 @@ export const useBranchMergeDiff = ({ // Get database diff const { data: diffContent, - isLoading: isDatabaseDiffLoading, + isPending: isDatabaseDiffLoading, isRefetching: isDatabaseDiffRefetching, error: databaseDiffError, refetch: refetchDatabaseDiff, diff --git a/apps/studio/hooks/branches/useEdgeFunctionsDiff.ts b/apps/studio/hooks/branches/useEdgeFunctionsDiff.ts index 32133ad80d3..c61cbc2c469 100644 --- a/apps/studio/hooks/branches/useEdgeFunctionsDiff.ts +++ b/apps/studio/hooks/branches/useEdgeFunctionsDiff.ts @@ -1,6 +1,4 @@ -import { useMemo, useCallback } from 'react' import { useQueries, useQueryClient } from '@tanstack/react-query' -import { handleError } from 'data/fetchers' import { getEdgeFunctionBody, type EdgeFunctionBodyData, @@ -9,8 +7,10 @@ import { useEdgeFunctionsQuery, type EdgeFunctionsData, } from 'data/edge-functions/edge-functions-query' -import { basename } from 'path' import { edgeFunctionsKeys } from 'data/edge-functions/keys' +import { handleError } from 'data/fetchers' +import { basename } from 'path' +import { useCallback, useMemo } from 'react' interface UseEdgeFunctionsDiffProps { currentBranchRef?: string @@ -58,7 +58,7 @@ export const useEdgeFunctionsDiff = ({ // Fetch edge functions for both branches const { data: currentBranchFunctions, - isLoading: isCurrentFunctionsLoading, + isPending: isCurrentFunctionsLoading, refetch: refetchCurrentBranchFunctions, } = useEdgeFunctionsQuery( { projectRef: currentBranchRef }, @@ -71,7 +71,7 @@ export const useEdgeFunctionsDiff = ({ const { data: mainBranchFunctions, - isLoading: isMainFunctionsLoading, + isPending: isMainFunctionsLoading, refetch: refetchMainBranchFunctions, } = useEdgeFunctionsQuery( { projectRef: mainBranchRef }, diff --git a/apps/studio/hooks/misc/useCheckEntitlements.ts b/apps/studio/hooks/misc/useCheckEntitlements.ts index 4dbef6012f3..ab06352ae34 100644 --- a/apps/studio/hooks/misc/useCheckEntitlements.ts +++ b/apps/studio/hooks/misc/useCheckEntitlements.ts @@ -1,13 +1,13 @@ -import { useEntitlementsQuery } from 'data/entitlements/entitlements-query' -import { useMemo } from 'react' -import { useSelectedOrganizationQuery } from './useSelectedOrganization' import type { Entitlement, EntitlementConfig, EntitlementType, FeatureKey, } from 'data/entitlements/entitlements-query' +import { useEntitlementsQuery } from 'data/entitlements/entitlements-query' import { IS_PLATFORM } from 'lib/constants' +import { useMemo } from 'react' +import { useSelectedOrganizationQuery } from './useSelectedOrganization' function isNumericConfig( config: EntitlementConfig, @@ -66,7 +66,7 @@ export function useCheckEntitlements( const shouldGetSelectedOrg = !organizationSlug && options?.enabled !== false const { data: selectedOrg, - isLoading: isLoadingSelectedOrg, + isPending: isLoadingSelectedOrg, isSuccess: isSuccessSelectedOrg, } = useSelectedOrganizationQuery({ enabled: shouldGetSelectedOrg, @@ -77,7 +77,7 @@ export function useCheckEntitlements( const { data: entitlementsData, - isLoading: isLoadingEntitlements, + isPending: isLoadingEntitlements, isSuccess: isSuccessEntitlements, } = useEntitlementsQuery({ slug: finalOrgSlug! }, { enabled }) diff --git a/apps/studio/hooks/misc/useCheckPermissions.ts b/apps/studio/hooks/misc/useCheckPermissions.ts index b7ce793b75b..8e76bea5845 100644 --- a/apps/studio/hooks/misc/useCheckPermissions.ts +++ b/apps/studio/hooks/misc/useCheckPermissions.ts @@ -81,7 +81,7 @@ function useGetProjectPermissions( ) { const { data, - isLoading: isLoadingPermissions, + isPending: isLoadingPermissions, isSuccess: isSuccessPermissions, } = usePermissionsQuery({ enabled: permissionsOverride === undefined && enabled, @@ -91,7 +91,7 @@ function useGetProjectPermissions( const getOrganizationDataFromParamsSlug = organizationSlugOverride === undefined && enabled const { data: organizationData, - isLoading: isLoadingOrganization, + isPending: isLoadingOrganization, isSuccess: isSuccessOrganization, } = useSelectedOrganizationQuery({ enabled: getOrganizationDataFromParamsSlug, @@ -104,7 +104,7 @@ function useGetProjectPermissions( const getProjectDataFromParamsRef = !!urlProjectRef && projectRefOverride === undefined && enabled const { data: projectData, - isLoading: isLoadingProject, + isPending: isLoadingProject, isSuccess: isSuccessProject, } = useSelectedProjectQuery({ enabled: getProjectDataFromParamsRef, diff --git a/apps/studio/hooks/misc/useReportDateRange.ts b/apps/studio/hooks/misc/useReportDateRange.ts index c993d6f6677..41913a3f6c1 100644 --- a/apps/studio/hooks/misc/useReportDateRange.ts +++ b/apps/studio/hooks/misc/useReportDateRange.ts @@ -1,15 +1,15 @@ -import { useCallback, useMemo, useState } from 'react' -import dayjs from 'dayjs' -import { createParser, useQueryState } from 'nuqs' -import { DatePickerValue } from 'components/interfaces/Settings/Logs/Logs.DatePickers' import { + REPORT_DATERANGE_HELPER_LABELS, REPORTS_DATEPICKER_HELPERS, ReportsDatetimeHelper, - REPORT_DATERANGE_HELPER_LABELS, } from 'components/interfaces/Reports/Reports.constants' -import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan' +import { DatePickerValue } from 'components/interfaces/Settings/Logs/Logs.DatePickers' import { maybeShowUpgradePrompt } from 'components/interfaces/Settings/Logs/Logs.utils' import { AnalyticsInterval } from 'data/analytics/constants' +import dayjs from 'dayjs' +import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan' +import { createParser, useQueryState } from 'nuqs' +import { useCallback, useMemo, useState } from 'react' export const DATERANGE_LIMITS: { [key: string]: number } = { free: 1, diff --git a/apps/studio/hooks/misc/withAuth.tsx b/apps/studio/hooks/misc/withAuth.tsx index 2e4588f21ed..98dc741cc96 100644 --- a/apps/studio/hooks/misc/withAuth.tsx +++ b/apps/studio/hooks/misc/withAuth.tsx @@ -40,7 +40,7 @@ export function withAuth( const [isSessionTimeoutModalOpen, setIsSessionTimeoutModalOpen] = useState(false) const { - isLoading: isAALLoading, + isPending: isAALLoading, data: aalData, isError: isErrorAAL, error: errorAAL, diff --git a/apps/studio/lib/profile.tsx b/apps/studio/lib/profile.tsx index 211251d186e..3b747d95609 100644 --- a/apps/studio/lib/profile.tsx +++ b/apps/studio/lib/profile.tsx @@ -72,7 +72,7 @@ export const ProfileProvider = ({ children }: PropsWithChildren<{}>) => { const { error, data: profile, - isLoading: isLoadingProfile, + isPending: isLoadingProfile, isError, isSuccess, } = useProfileQuery({ @@ -129,7 +129,7 @@ export function useProfileNameAndPicture(): { isLoading: boolean } { const { profile, isLoading: isLoadingProfile } = useProfile() - const { data: identitiesData, isLoading: isLoadingIdentities } = useProfileIdentitiesQuery() + const { data: identitiesData, isPending: isLoadingIdentities } = useProfileIdentitiesQuery() const username = profile?.username const isGitHubProfile = profile?.auth0_id?.startsWith('github') diff --git a/apps/studio/package.json b/apps/studio/package.json index 5d93f0c8adc..cd14c2fbb84 100644 --- a/apps/studio/package.json +++ b/apps/studio/package.json @@ -65,8 +65,8 @@ "@supabase/shared-types": "0.1.83", "@supabase/sql-to-rest": "^0.1.6", "@supabase/supabase-js": "catalog:", - "@tanstack/react-query": "^4.42.0", - "@tanstack/react-query-devtools": "^4.42.0", + "@tanstack/react-query": "^5.0.0", + "@tanstack/react-query-devtools": "^5.0.0", "@tanstack/react-table": "^8.21.3", "@tanstack/react-virtual": "^3.13.12", "@types/d3-geo": "^3.1.0", diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx index 0336be2e13c..6b78331cff0 100644 --- a/apps/studio/pages/_app.tsx +++ b/apps/studio/pages/_app.tsx @@ -20,7 +20,7 @@ import 'ui/build/css/themes/light.css' import { loader } from '@monaco-editor/react' import * as Sentry from '@sentry/nextjs' -import { Hydrate, QueryClientProvider } from '@tanstack/react-query' +import { HydrationBoundary, QueryClientProvider } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' import dayjs from 'dayjs' import customParseFormat from 'dayjs/plugin/customParseFormat' @@ -120,7 +120,7 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) { - + {!isTestEnv && ( - + )} - + diff --git a/apps/studio/pages/authorize.tsx b/apps/studio/pages/authorize.tsx index 5d16dfb355c..63ba3e39af4 100644 --- a/apps/studio/pages/authorize.tsx +++ b/apps/studio/pages/authorize.tsx @@ -66,9 +66,15 @@ const APIAuthorizationPage: NextPageWithLayout = () => { const { data: organizations, isSuccess: isSuccessOrganizations, - isLoading: isLoadingOrganizations, + isPending: isLoadingOrganizations, } = useOrganizationsQuery() - const { data: requester, isLoading, isError, error } = useApiAuthorizationQuery({ id: auth_id }) + const { + data: requester, + isPending: isLoading, + isError, + isSuccess, + error, + } = useApiAuthorizationQuery({ id: auth_id }) const isApproved = (requester?.approved_at ?? null) !== null const isExpired = dayjs().isAfter(dayjs(requester?.expires_at)) const isMcpClient = requester?.registration_type === 'dynamic' diff --git a/apps/studio/pages/aws-marketplace-onboarding.tsx b/apps/studio/pages/aws-marketplace-onboarding.tsx index 573e9e32a69..4c9b42c5b27 100644 --- a/apps/studio/pages/aws-marketplace-onboarding.tsx +++ b/apps/studio/pages/aws-marketplace-onboarding.tsx @@ -20,7 +20,7 @@ const AwsMarketplaceOnboarding: NextPageWithLayout = () => { } = useRouter() const { data: organizations, isFetched: isOrganizationsFetched } = useOrganizationsQuery() - const { data: onboardingInfo, isLoading: isLoadingOnboardingInfo } = + const { data: onboardingInfo, isPending: isLoadingOnboardingInfo } = useCloudMarketplaceOnboardingInfoQuery({ buyerId: buyerId as string, }) diff --git a/apps/studio/pages/claim-project.tsx b/apps/studio/pages/claim-project.tsx index 117a0fc28a9..400fe63f66a 100644 --- a/apps/studio/pages/claim-project.tsx +++ b/apps/studio/pages/claim-project.tsx @@ -35,7 +35,7 @@ const ClaimProjectPage: NextPageWithLayout = () => { const { data: requester, - isLoading: isLoadingRequester, + isPending: isLoadingRequester, isError: isErrorRequester, error: errorRequester, } = useApiAuthorizationQuery({ id: auth_id }) @@ -49,7 +49,7 @@ const ClaimProjectPage: NextPageWithLayout = () => { data: projectClaim, error: errorProjectClaim, isError: isErrorProjectClaim, - isLoading: isLoadingProjectClaim, + isPending: isLoadingProjectClaim, isSuccess: isSuccessProjectClaim, } = useOrganizationProjectClaimQuery( { diff --git a/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx b/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx index 49beed946d2..44aa1cef64b 100644 --- a/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx +++ b/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx @@ -157,7 +157,8 @@ const CreateProject = () => { { enabled: newProjectRef !== undefined, // refetch until the project is created - refetchInterval: (data) => { + refetchInterval: (query) => { + const data = query.state.data return ((data?.service_api_keys ?? []).length ?? 0) > 0 ? false : 1000 }, } diff --git a/apps/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx b/apps/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx index 6df3aad7e7e..475c7abb0f6 100644 --- a/apps/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx +++ b/apps/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx @@ -46,7 +46,7 @@ const VercelIntegration: NextPageWithLayout = () => { x.metadata?.configuration_id === configurationId ) - const { data: vercelProjectsData, isLoading: isLoadingVercelProjectsData } = + const { data: vercelProjectsData, isPending: isLoadingVercelProjectsData } = useVercelProjectsQuery( { organization_integration_id: integration?.id, diff --git a/apps/studio/pages/integrations/vercel/install.tsx b/apps/studio/pages/integrations/vercel/install.tsx index 2030ab86411..90fbae5ead3 100644 --- a/apps/studio/pages/integrations/vercel/install.tsx +++ b/apps/studio/pages/integrations/vercel/install.tsx @@ -43,7 +43,7 @@ const VercelIntegration: NextPageWithLayout = () => { const { data: organizationsData, - isLoading: isLoadingOrganizationsQuery, + isPending: isLoadingOrganizationsQuery, isSuccess: isOrganizationsDataSuccess, } = useOrganizationsQuery() diff --git a/apps/studio/pages/org/[slug]/audit.tsx b/apps/studio/pages/org/[slug]/audit.tsx index 5b806f0cc3e..7a8393212bb 100644 --- a/apps/studio/pages/org/[slug]/audit.tsx +++ b/apps/studio/pages/org/[slug]/audit.tsx @@ -8,7 +8,7 @@ import type { NextPageWithLayout } from 'types' import { LogoLoader } from 'ui' const OrgAuditLogs: NextPageWithLayout = () => { - const { isLoading: isLoadingPermissions } = usePermissionsQuery() + const { isPending: isLoadingPermissions } = usePermissionsQuery() const { data: selectedOrganization } = useSelectedOrganizationQuery() return ( diff --git a/apps/studio/pages/org/[slug]/general.tsx b/apps/studio/pages/org/[slug]/general.tsx index 487a1cd9b1f..5638f123a25 100644 --- a/apps/studio/pages/org/[slug]/general.tsx +++ b/apps/studio/pages/org/[slug]/general.tsx @@ -8,7 +8,7 @@ import type { NextPageWithLayout } from 'types' import { LogoLoader } from 'ui' const OrgGeneralSettings: NextPageWithLayout = () => { - const { isLoading: isLoadingPermissions } = usePermissionsQuery() + const { isPending: isLoadingPermissions } = usePermissionsQuery() const { data: selectedOrganization } = useSelectedOrganizationQuery() return ( diff --git a/apps/studio/pages/org/[slug]/team.tsx b/apps/studio/pages/org/[slug]/team.tsx index b2ac479ddfa..cc8751263aa 100644 --- a/apps/studio/pages/org/[slug]/team.tsx +++ b/apps/studio/pages/org/[slug]/team.tsx @@ -7,7 +7,7 @@ import type { NextPageWithLayout } from 'types' import { LogoLoader } from 'ui' const OrgTeamSettings: NextPageWithLayout = () => { - const { isLoading: isLoadingPermissions } = usePermissionsQuery() + const { isPending: isLoadingPermissions } = usePermissionsQuery() const { data: selectedOrganization } = useSelectedOrganizationQuery() return selectedOrganization === undefined && isLoadingPermissions ? ( diff --git a/apps/studio/pages/org/_/[[...routeSlug]].tsx b/apps/studio/pages/org/_/[[...routeSlug]].tsx index c89df6107e7..80bbe822a60 100644 --- a/apps/studio/pages/org/_/[[...routeSlug]].tsx +++ b/apps/studio/pages/org/_/[[...routeSlug]].tsx @@ -17,7 +17,7 @@ import { cn } from 'ui' const GenericOrganizationPage: NextPage = () => { const router = useRouter() - const { data: organizations, isLoading } = useOrganizationsQuery() + const { data: organizations, isPending: isLoading } = useOrganizationsQuery() const { routeSlug, ...queryParams } = router.query const queryString = Object.keys(queryParams).length > 0 diff --git a/apps/studio/pages/organizations.tsx b/apps/studio/pages/organizations.tsx index 3e892a721ef..379b333ab51 100644 --- a/apps/studio/pages/organizations.tsx +++ b/apps/studio/pages/organizations.tsx @@ -26,7 +26,13 @@ const OrganizationsPage: NextPageWithLayout = () => { const { error: orgNotFoundError, org: orgSlug } = useParams() const orgNotFound = orgNotFoundError === 'org_not_found' - const { data: organizations = [], error, isLoading, isError, isSuccess } = useOrganizationsQuery() + const { + data: organizations = [], + error, + isPending: isLoading, + isError, + isSuccess, + } = useOrganizationsQuery() const organizationCreationEnabled = useIsFeatureEnabled('organizations:create') const filteredOrganizations = diff --git a/apps/studio/pages/project/[ref]/advisors/performance.tsx b/apps/studio/pages/project/[ref]/advisors/performance.tsx index 9d87e820be3..daffc7b505c 100644 --- a/apps/studio/pages/project/[ref]/advisors/performance.tsx +++ b/apps/studio/pages/project/[ref]/advisors/performance.tsx @@ -29,7 +29,12 @@ const ProjectLints: NextPageWithLayout = () => { const [currentTab, setCurrentTab] = useState( (preset as LINTER_LEVELS) ?? LINTER_LEVELS.ERROR ) - const { data, isLoading, isRefetching, refetch } = useProjectLintsQuery({ + const { + data, + isPending: isLoading, + isRefetching, + refetch, + } = useProjectLintsQuery({ projectRef: project?.ref, }) diff --git a/apps/studio/pages/project/[ref]/advisors/security.tsx b/apps/studio/pages/project/[ref]/advisors/security.tsx index 4007964fa3e..14c647177d3 100644 --- a/apps/studio/pages/project/[ref]/advisors/security.tsx +++ b/apps/studio/pages/project/[ref]/advisors/security.tsx @@ -29,7 +29,12 @@ const ProjectLints: NextPageWithLayout = () => { const [currentTab, setCurrentTab] = useState( (preset as LINTER_LEVELS) ?? LINTER_LEVELS.ERROR ) - const { data, isLoading, isRefetching, refetch } = useProjectLintsQuery({ + const { + data, + isPending: isLoading, + isRefetching, + refetch, + } = useProjectLintsQuery({ projectRef: project?.ref, }) diff --git a/apps/studio/pages/project/[ref]/api/index.tsx b/apps/studio/pages/project/[ref]/api/index.tsx index e3723645d31..045bd19fe92 100644 --- a/apps/studio/pages/project/[ref]/api/index.tsx +++ b/apps/studio/pages/project/[ref]/api/index.tsx @@ -37,7 +37,7 @@ const DocView = () => { const { data: jsonSchema, error: jsonSchemaError, - isLoading, + isPending: isLoading, refetch, } = useProjectJsonSchemaQuery({ projectRef }) const { data: customDomainData } = useCustomDomainsQuery({ projectRef }) diff --git a/apps/studio/pages/project/[ref]/auth/overview.tsx b/apps/studio/pages/project/[ref]/auth/overview.tsx index ed86cf49022..6caef37cf1c 100644 --- a/apps/studio/pages/project/[ref]/auth/overview.tsx +++ b/apps/studio/pages/project/[ref]/auth/overview.tsx @@ -27,7 +27,7 @@ const AuthOverview: NextPageWithLayout = () => { const { data: metrics, - isLoading, + isPending: isLoading, error, } = useAuthOverviewQuery({ projectRef: ref }, { enabled: !!ref }) diff --git a/apps/studio/pages/project/[ref]/auth/policies.tsx b/apps/studio/pages/project/[ref]/auth/policies.tsx index 992749ed6c2..9d455127920 100644 --- a/apps/studio/pages/project/[ref]/auth/policies.tsx +++ b/apps/studio/pages/project/[ref]/auth/policies.tsx @@ -117,7 +117,7 @@ const AuthPoliciesPage: NextPageWithLayout = () => { const { data: policies, - isLoading: isLoadingPolicies, + isPending: isLoadingPolicies, isError: isPoliciesError, error: policiesError, } = useDatabasePoliciesQuery({ @@ -136,7 +136,7 @@ const AuthPoliciesPage: NextPageWithLayout = () => { const { data: tables, - isLoading, + isPending: isLoading, isSuccess, isError, error, diff --git a/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx b/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx index de2cfb1d8ce..d16a6ac2acb 100644 --- a/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx +++ b/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx @@ -76,7 +76,7 @@ const RedirectToTemplates = () => { 'custom_config_gotrue' ) - const { data: authConfig, isLoading: isLoadingConfig } = useAuthConfigQuery({ projectRef }) + const { data: authConfig, isPending: isLoadingConfig } = useAuthConfigQuery({ projectRef }) const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation({ onError: (error) => { diff --git a/apps/studio/pages/project/[ref]/branches/index.tsx b/apps/studio/pages/project/[ref]/branches/index.tsx index cf123689738..024c45cede2 100644 --- a/apps/studio/pages/project/[ref]/branches/index.tsx +++ b/apps/studio/pages/project/[ref]/branches/index.tsx @@ -51,7 +51,7 @@ const BranchesPage: NextPageWithLayout = () => { const { data: connections, error: connectionsError, - isLoading: isLoadingConnections, + isPending: isLoadingConnections, isSuccess: isSuccessConnections, isError: isErrorConnections, } = useGitHubConnectionsQuery({ @@ -61,7 +61,7 @@ const BranchesPage: NextPageWithLayout = () => { const { data: branches, error: branchesError, - isLoading: isLoadingBranches, + isPending: isLoadingBranches, isError: isErrorBranches, isSuccess: isSuccessBranches, } = useBranchesQuery({ projectRef }) diff --git a/apps/studio/pages/project/[ref]/branches/merge-requests.tsx b/apps/studio/pages/project/[ref]/branches/merge-requests.tsx index ebed655e877..199677704c2 100644 --- a/apps/studio/pages/project/[ref]/branches/merge-requests.tsx +++ b/apps/studio/pages/project/[ref]/branches/merge-requests.tsx @@ -66,7 +66,7 @@ const MergeRequestsPage: NextPageWithLayout = () => { const { data: branches = [], error: branchesError, - isLoading: isLoadingBranches, + isPending: isLoadingBranches, isError: isErrorBranches, isSuccess: isSuccessBranches, } = useBranchesQuery({ projectRef }) diff --git a/apps/studio/pages/project/[ref]/database/backups/pitr.tsx b/apps/studio/pages/project/[ref]/database/backups/pitr.tsx index 9d73eb964b3..7a255c62158 100644 --- a/apps/studio/pages/project/[ref]/database/backups/pitr.tsx +++ b/apps/studio/pages/project/[ref]/database/backups/pitr.tsx @@ -67,7 +67,13 @@ const PITR = () => { const { data: project } = useSelectedProjectQuery() const { data: organization } = useSelectedOrganizationQuery() const isOrioleDbInAws = useIsOrioleDbInAws() - const { data: backups, error, isLoading, isError, isSuccess } = useBackupsQuery({ projectRef }) + const { + data: backups, + error, + isPending: isLoading, + isError, + isSuccess, + } = useBackupsQuery({ projectRef }) const plan = organization?.plan?.id const isEnabled = backups?.pitr_enabled diff --git a/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx b/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx index 8187988a18c..0d4a438adcc 100644 --- a/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx +++ b/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx @@ -30,7 +30,13 @@ import { PageSection, PageSectionContent } from 'ui-patterns/PageSection' const DatabaseScheduledBackups: NextPageWithLayout = () => { const { ref: projectRef } = useParams() - const { data: backups, error, isLoading, isError, isSuccess } = useBackupsQuery({ projectRef }) + const { + data: backups, + error, + isPending: isLoading, + isError, + isSuccess, + } = useBackupsQuery({ projectRef }) const isOrioleDbInAws = useIsOrioleDbInAws() const isPitrEnabled = backups?.pitr_enabled diff --git a/apps/studio/pages/project/[ref]/database/column-privileges.tsx b/apps/studio/pages/project/[ref]/database/column-privileges.tsx index 6d28e88b2a3..d5fb4f215f1 100644 --- a/apps/studio/pages/project/[ref]/database/column-privileges.tsx +++ b/apps/studio/pages/project/[ref]/database/column-privileges.tsx @@ -49,7 +49,7 @@ const PrivilegesPage: NextPageWithLayout = () => { const { data: tableList, - isLoading: isLoadingTables, + isPending: isLoadingTables, isSuccess: isSuccessTables, } = useTablesQuery({ projectRef: project?.ref, @@ -66,7 +66,7 @@ const PrivilegesPage: NextPageWithLayout = () => { } }, [isSuccessTables, tableList, selectedSchema, selectedTable]) - const { data: allRoles, isLoading: isLoadingRoles } = useDatabaseRolesQuery({ + const { data: allRoles, isPending: isLoadingRoles } = useDatabaseRolesQuery({ projectRef: project?.ref, connectionString: project?.connectionString, }) @@ -77,7 +77,7 @@ const PrivilegesPage: NextPageWithLayout = () => { const { data: allTablePrivileges, - isLoading: isLoadingTablePrivileges, + isPending: isLoadingTablePrivileges, isError: isErrorTablePrivileges, error: errorTablePrivileges, } = useTablePrivilegesQuery({ @@ -103,7 +103,7 @@ const PrivilegesPage: NextPageWithLayout = () => { const { data: allColumnPrivileges, - isLoading: isLoadingColumnPrivileges, + isPending: isLoadingColumnPrivileges, isError: isErrorColumnPrivileges, error: errorColumnPrivileges, } = useColumnPrivilegesQuery({ diff --git a/apps/studio/pages/project/[ref]/database/tables/[id].tsx b/apps/studio/pages/project/[ref]/database/tables/[id].tsx index f3ecee9da00..ecb96d569db 100644 --- a/apps/studio/pages/project/[ref]/database/tables/[id].tsx +++ b/apps/studio/pages/project/[ref]/database/tables/[id].tsx @@ -23,7 +23,7 @@ const DatabaseTables: NextPageWithLayout = () => { const id = _id ? Number(_id) : undefined const { data: project } = useSelectedProjectQuery() - const { data: selectedTable, isLoading } = useTableEditorQuery({ + const { data: selectedTable, isPending: isLoading } = useTableEditorQuery({ projectRef: project?.ref, connectionString: project?.connectionString, id, diff --git a/apps/studio/pages/project/[ref]/editor/[id].tsx b/apps/studio/pages/project/[ref]/editor/[id].tsx index c67ce26d06a..6c7fc6fc21b 100644 --- a/apps/studio/pages/project/[ref]/editor/[id].tsx +++ b/apps/studio/pages/project/[ref]/editor/[id].tsx @@ -17,7 +17,7 @@ const TableEditorPage: NextPageWithLayout = () => { const store = useTabsStateSnapshot() const { data: project } = useSelectedProjectQuery() - const { data: selectedTable, isLoading } = useTableEditorQuery({ + const { data: selectedTable, isPending: isLoading } = useTableEditorQuery({ projectRef: project?.ref, connectionString: project?.connectionString, id, diff --git a/apps/studio/pages/project/[ref]/functions/[functionSlug]/code.tsx b/apps/studio/pages/project/[ref]/functions/[functionSlug]/code.tsx index df323591011..97c15b9ba20 100644 --- a/apps/studio/pages/project/[ref]/functions/[functionSlug]/code.tsx +++ b/apps/studio/pages/project/[ref]/functions/[functionSlug]/code.tsx @@ -37,7 +37,7 @@ const CodePage = () => { }) const { data: functionBody, - isLoading: isLoadingFiles, + isPending: isLoadingFiles, isError: isErrorLoadingFiles, isSuccess: isSuccessLoadingFiles, error: filesError, diff --git a/apps/studio/pages/project/[ref]/functions/[functionSlug]/invocations.tsx b/apps/studio/pages/project/[ref]/functions/[functionSlug]/invocations.tsx index cd89b526d14..d585211d813 100644 --- a/apps/studio/pages/project/[ref]/functions/[functionSlug]/invocations.tsx +++ b/apps/studio/pages/project/[ref]/functions/[functionSlug]/invocations.tsx @@ -7,7 +7,7 @@ import type { NextPageWithLayout } from 'types' export const LogPage: NextPageWithLayout = () => { const { ref, functionSlug } = useParams() - const { data: selectedFunction, isLoading } = useEdgeFunctionQuery({ + const { data: selectedFunction, isPending: isLoading } = useEdgeFunctionQuery({ projectRef: ref, slug: functionSlug, }) diff --git a/apps/studio/pages/project/[ref]/functions/[functionSlug]/logs.tsx b/apps/studio/pages/project/[ref]/functions/[functionSlug]/logs.tsx index 90264bf866b..1861a026530 100644 --- a/apps/studio/pages/project/[ref]/functions/[functionSlug]/logs.tsx +++ b/apps/studio/pages/project/[ref]/functions/[functionSlug]/logs.tsx @@ -8,7 +8,7 @@ import type { NextPageWithLayout } from 'types' export const LogPage: NextPageWithLayout = () => { const { ref, functionSlug } = useParams() - const { data: selectedFunction, isLoading } = useEdgeFunctionQuery({ + const { data: selectedFunction, isPending: isLoading } = useEdgeFunctionQuery({ projectRef: ref, slug: functionSlug, }) diff --git a/apps/studio/pages/project/[ref]/functions/index.tsx b/apps/studio/pages/project/[ref]/functions/index.tsx index 9ae93620c7d..5ecaa0fbec6 100644 --- a/apps/studio/pages/project/[ref]/functions/index.tsx +++ b/apps/studio/pages/project/[ref]/functions/index.tsx @@ -42,7 +42,7 @@ const EdgeFunctionsPage: NextPageWithLayout = () => { const { data: functions, error, - isLoading, + isPending: isLoading, isError, isSuccess, } = useEdgeFunctionsQuery({ projectRef: ref }) diff --git a/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx b/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx index aeda5008739..e180af79eb9 100644 --- a/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx +++ b/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx @@ -14,7 +14,7 @@ import { Loading } from 'ui' // [Joshen] This page looks like its not longer in use from a UI POV - double checking and deprecate + add redirects export const LogsSavedPage: NextPageWithLayout = () => { const { ref } = useParams() - const { data, isLoading } = useContentQuery({ + const { data, isPending: isLoading } = useContentQuery({ projectRef: ref, type: 'log_sql', }) diff --git a/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx b/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx index 08f18ff8c56..4c2c298b585 100644 --- a/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx +++ b/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx @@ -9,7 +9,7 @@ import { LogoLoader } from 'ui' export const LogPage: NextPageWithLayout = () => { const { ref } = useParams() - const { isLoading } = useSupavisorConfigurationQuery({ projectRef: ref ?? 'default' }) + const { isPending: isLoading } = useSupavisorConfigurationQuery({ projectRef: ref ?? 'default' }) // this prevents initial load of pooler logs before config has been retrieved if (isLoading) return diff --git a/apps/studio/pages/project/[ref]/observability/database.tsx b/apps/studio/pages/project/[ref]/observability/database.tsx index eff4f3fbd51..dbec6f5350d 100644 --- a/apps/studio/pages/project/[ref]/observability/database.tsx +++ b/apps/studio/pages/project/[ref]/observability/database.tsx @@ -37,7 +37,7 @@ import { getReportAttributesV2 } from 'data/reports/database-charts' import { useDatabaseReport } from 'data/reports/database-report-query' import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' -import { useReportDateRange, useRefreshHandler } from 'hooks/misc/useReportDateRange' +import { useRefreshHandler, useReportDateRange } from 'hooks/misc/useReportDateRange' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { DOCS_URL } from 'lib/constants' @@ -89,7 +89,7 @@ const DatabaseUsage = () => { const isReplicaSelected = state.selectedDatabaseId !== project?.ref const report = useDatabaseReport() - const { data, params, largeObjectsSql, isLoading, refresh } = report + const { data, params, largeObjectsSql, isPending: isLoading, refresh } = report const { data: databaseSizeData } = useDatabaseSizeQuery({ projectRef: project?.ref, diff --git a/apps/studio/pages/project/[ref]/observability/index.tsx b/apps/studio/pages/project/[ref]/observability/index.tsx index 67cf5b12f8c..f261b1f754b 100644 --- a/apps/studio/pages/project/[ref]/observability/index.tsx +++ b/apps/studio/pages/project/[ref]/observability/index.tsx @@ -20,7 +20,11 @@ export const UserReportPage: NextPageWithLayout = () => { const { profile } = useProfile() const [showCreateReportModal, setShowCreateReportModal] = useState(false) - const { isLoading, isSuccess, data } = useContentQuery({ + const { + isPending: isLoading, + isSuccess, + data, + } = useContentQuery({ projectRef: ref, type: 'report', }) diff --git a/apps/studio/pages/project/[ref]/settings/log-drains.tsx b/apps/studio/pages/project/[ref]/settings/log-drains.tsx index 0c3e78d33e0..0705afd87f4 100644 --- a/apps/studio/pages/project/[ref]/settings/log-drains.tsx +++ b/apps/studio/pages/project/[ref]/settings/log-drains.tsx @@ -7,18 +7,21 @@ import { LogDrainDestinationSheetForm } from 'components/interfaces/LogDrains/Lo import { LogDrains } from 'components/interfaces/LogDrains/LogDrains' import { LOG_DRAIN_TYPES, LogDrainType } from 'components/interfaces/LogDrains/LogDrains.constants' import DefaultLayout from 'components/layouts/DefaultLayout' +import { PageLayout } from 'components/layouts/PageLayout/PageLayout' import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout' import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold' import { DocsButton } from 'components/ui/DocsButton' import { - useCreateLogDrainMutation, LogDrainCreateVariables, + useCreateLogDrainMutation, } from 'data/log-drains/create-log-drain-mutation' import { LogDrainData, useLogDrainsQuery } from 'data/log-drains/log-drains-query' import { useUpdateLogDrainMutation } from 'data/log-drains/update-log-drain-mutation' +import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' -import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan' import { DOCS_URL } from 'lib/constants' +import { ChevronDown } from 'lucide-react' +import { cloneElement } from 'react' import type { NextPageWithLayout } from 'types' import { Alert_Shadcn_, @@ -29,11 +32,7 @@ import { DropdownMenuTrigger, } from 'ui' import { GenericSkeletonLoader } from 'ui-patterns' -import { PageLayout } from 'components/layouts/PageLayout/PageLayout' -import { ChevronDown } from 'lucide-react' -import { cloneElement } from 'react' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' -import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements' const LogDrainsSettings: NextPageWithLayout = () => { const { can: canManageLogDrains, isLoading: isLoadingPermissions } = useAsyncCheckPermissions( diff --git a/apps/studio/pages/project/_/[[...routeSlug]].tsx b/apps/studio/pages/project/_/[[...routeSlug]].tsx index 57ff0d12d1f..e80b6cc3bf7 100644 --- a/apps/studio/pages/project/_/[[...routeSlug]].tsx +++ b/apps/studio/pages/project/_/[[...routeSlug]].tsx @@ -44,7 +44,7 @@ const GenericProjectPage: NextPage = () => { const { data: organizations = [], isSuccess: isSuccessOrganizations, - isLoading: isLoadingOrganizations, + isPending: isLoadingOrganizations, isError: isErrorOrganizations, } = useOrganizationsQuery({ enabled: IS_PLATFORM, diff --git a/apps/studio/state/storage-explorer.tsx b/apps/studio/state/storage-explorer.tsx index 7c2c1de8a02..9f477d80513 100644 --- a/apps/studio/state/storage-explorer.tsx +++ b/apps/studio/state/storage-explorer.tsx @@ -987,7 +987,7 @@ function createStorageExplorerState({ const queryClient = getQueryClient() const storageConfiguration = queryClient .getQueryCache() - .find(configKeys.storage(state.projectRef))?.state.data as + .find({ queryKey: configKeys.storage(state.projectRef) })?.state.data as | ProjectStorageConfigResponse | undefined const fileSizeLimit = storageConfiguration?.fileSizeLimit diff --git a/apps/studio/types/react-query.ts b/apps/studio/types/react-query.ts index 9b34c2e5bef..c6a2f622ea8 100644 --- a/apps/studio/types/react-query.ts +++ b/apps/studio/types/react-query.ts @@ -1,4 +1,5 @@ import type { + DefaultError, QueryKey, UseInfiniteQueryOptions, UseMutationOptions, @@ -21,8 +22,11 @@ export type UseCustomMutationOptions< export type UseCustomInfiniteQueryOptions< TQueryFnData = unknown, - TError = unknown, + TError = DefaultError, TData = TQueryFnData, - TQueryData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, -> = UseInfiniteQueryOptions + TPageParam = unknown, +> = Omit< + UseInfiniteQueryOptions, + 'queryKey' | 'getNextPageParam' | 'initialPageParam' +> diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 09b59a8d2d2..9477b821c8a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -870,11 +870,11 @@ importers: specifier: 'catalog:' version: 2.87.0 '@tanstack/react-query': - specifier: ^4.42.0 - version: 4.42.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^5.0.0 + version: 5.83.0(react@18.3.1) '@tanstack/react-query-devtools': - specifier: ^4.42.0 - version: 4.42.0(@tanstack/react-query@4.42.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^5.0.0 + version: 5.90.2(@tanstack/react-query@5.83.0(react@18.3.1))(react@18.3.1) '@tanstack/react-table': specifier: ^8.21.3 version: 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -8715,37 +8715,20 @@ packages: resolution: {integrity: sha512-CNwKraj/Xa8H7DUyzrFBQC3wL96JzIxT4i9CW0hxqFNNmLDyUcMJr8264iqqfxC0u1lFSG96URad08T2Qhadpw==} engines: {node: '>=12'} - '@tanstack/match-sorter-utils@8.19.4': - resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==} - engines: {node: '>=12'} - - '@tanstack/query-core@4.41.0': - resolution: {integrity: sha512-193R4Jp9hjvlij6LryxrB5Mpbffd2L9PeWh3KlIy/hJV4SkBOfiQZ+jc5qAZLDCrdbkA5FjGj+UoDYw6TcNnyA==} - '@tanstack/query-core@5.13.4': resolution: {integrity: sha512-8+rJucXvC/xlr4OrxHhEIob/cTlbT4fgmz1VsvB0D12FRStKaXeLORNGcOhSAynRd2NL74SV/Qq0IIb4DedLcA==} '@tanstack/query-core@5.83.0': resolution: {integrity: sha512-0M8dA+amXUkyz5cVUm/B+zSk3xkQAcuXuz5/Q/LveT4ots2rBpPTZOzd7yJa2Utsf8D2Upl5KyjhHRY+9lB/XA==} - '@tanstack/react-query-devtools@4.42.0': - resolution: {integrity: sha512-N35fQ+tayyyNhKfkyH5OJdJL5eBx5S8lsyagtJre8rxtkyEjyQSEGyF+Xusao8LiqbYsi1ZMQgC7+e3zrwH3Kw==} - peerDependencies: - '@tanstack/react-query': ^4.42.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + '@tanstack/query-devtools@5.90.1': + resolution: {integrity: sha512-GtINOPjPUH0OegJExZ70UahT9ykmAhmtNVcmtdnOZbxLwT7R5OmRztR5Ahe3/Cu7LArEmR6/588tAycuaWb1xQ==} - '@tanstack/react-query@4.42.0': - resolution: {integrity: sha512-j0tiofkzE3CSrYKmVRaKuwGgvCE+P2OOEDlhmfjeZf5ufcuFHwYwwgw3j08n4WYPVZ+OpsHblcFYezhKA3jDwg==} + '@tanstack/react-query-devtools@5.90.2': + resolution: {integrity: sha512-vAXJzZuBXtCQtrY3F/yUNJCV4obT/A/n81kb3+YqLbro5Z2+phdAbceO+deU3ywPw8B42oyJlp4FhO0SoivDFQ==} peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - react-native: '*' - peerDependenciesMeta: - react-dom: - optional: true - react-native: - optional: true + '@tanstack/react-query': ^5.90.2 + react: ^18 || ^19 '@tanstack/react-query@5.13.4': resolution: {integrity: sha512-3HjvkFFriEQwffUXtKHPiwkfFXUGbs46YATTzzyK1+Pw6Ekd3kwzS50e45qdamWuEXmXxyo5S1zp534LdFG0Rw==} @@ -16954,9 +16937,6 @@ packages: remedial@1.0.8: resolution: {integrity: sha512-/62tYiOe6DzS5BqVsNpH/nkGlX45C/Sp6V+NtiN6JQNS1Viay7cWkazmRkrQrdFj2eshDe96SIQNIoMxqhzBOg==} - remove-accents@0.5.0: - resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==} - remove-trailing-separator@1.1.0: resolution: {integrity: sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==} @@ -17864,10 +17844,6 @@ packages: engines: {npm: '>=8'} hasBin: true - superjson@1.13.3: - resolution: {integrity: sha512-mJiVjfd2vokfDxsQPOwJ/PtanO87LhpYY88ubI5dUB1Ab58Txbyje3+jpm+/83R/fevaq/107NNhtYBLuoTrFg==} - engines: {node: '>=10'} - superjson@2.2.2: resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==} engines: {node: '>=16'} @@ -27495,32 +27471,17 @@ snapshots: '@tanstack/history@1.114.22': {} - '@tanstack/match-sorter-utils@8.19.4': - dependencies: - remove-accents: 0.5.0 - - '@tanstack/query-core@4.41.0': {} - '@tanstack/query-core@5.13.4': {} '@tanstack/query-core@5.83.0': {} - '@tanstack/react-query-devtools@4.42.0(@tanstack/react-query@4.42.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@tanstack/match-sorter-utils': 8.19.4 - '@tanstack/react-query': 4.42.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - superjson: 1.13.3 - use-sync-external-store: 1.5.0(react@18.3.1) + '@tanstack/query-devtools@5.90.1': {} - '@tanstack/react-query@4.42.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@tanstack/react-query-devtools@5.90.2(@tanstack/react-query@5.83.0(react@18.3.1))(react@18.3.1)': dependencies: - '@tanstack/query-core': 4.41.0 + '@tanstack/query-devtools': 5.90.1 + '@tanstack/react-query': 5.83.0(react@18.3.1) react: 18.3.1 - use-sync-external-store: 1.5.0(react@18.3.1) - optionalDependencies: - react-dom: 18.3.1(react@18.3.1) '@tanstack/react-query@5.13.4(react@18.3.1)': dependencies: @@ -38052,8 +38013,6 @@ snapshots: remedial@1.0.8: {} - remove-accents@0.5.0: {} - remove-trailing-separator@1.1.0: {} remove-trailing-spaces@1.0.9: {} @@ -39196,10 +39155,6 @@ snapshots: transitivePeerDependencies: - supports-color - superjson@1.13.3: - dependencies: - copy-anything: 3.0.5 - superjson@2.2.2: dependencies: copy-anything: 3.0.5