Files
supabase/apps/studio/data/storage/buckets-query.ts
T
Charis 9225eebccb feat(studio): use bucket pagination for api docs (#41090)
* feat(studio): use bucket pagination for api docs

API docs V2 updated to use pagination for fetchign storage buckets.

Also some refactoring to split up large components for docs V2
interfaces.

* fix(studio): use bucket endpoint for getting single bucket
2025-12-09 13:17:59 -05:00

230 lines
6.7 KiB
TypeScript

import {
useInfiniteQuery,
useQuery,
useQueryClient,
type UseInfiniteQueryResult,
} from '@tanstack/react-query'
import { useMemo } from 'react'
import { components } from 'api-types'
import { get, handleError } from 'data/fetchers'
import { MAX_RETRY_FAILURE_COUNT } from 'data/query-client'
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
import { PROJECT_STATUS } from 'lib/constants'
import {
ResponseError,
type UseCustomInfiniteQueryOptions,
type UseCustomQueryOptions,
} from 'types'
import { storageKeys } from './keys'
export type BucketsVariables = { projectRef?: string }
export type Bucket = components['schemas']['StorageBucketResponse']
export type BucketType = Bucket['type']
type GetBucketParams = {
projectRef?: string
bucketId?: string
}
async function getBucket({ projectRef, bucketId }: GetBucketParams, signal?: AbortSignal) {
if (!projectRef) throw new Error('projectRef is required')
if (!bucketId) throw new Error('bucketId is required')
const { data, error } = await get('/platform/storage/{ref}/buckets/{id}', {
params: {
path: { ref: projectRef, id: bucketId },
},
signal,
})
if (error) handleError(error)
return data
}
export async function getBuckets({ projectRef }: BucketsVariables, signal?: AbortSignal) {
if (!projectRef) throw new Error('projectRef is required')
const { data, error } = await get('/platform/storage/{ref}/buckets', {
params: {
path: { ref: projectRef },
},
signal,
})
if (error) handleError(error)
return data
}
type BucketSortColumn = 'id' | 'name' | 'updated_at' | 'created_at'
type BucketSortOrder = 'asc' | 'desc'
type BucketListPagination = {
page?: number
limit?: number
sortColumn?: BucketSortColumn
sortOrder?: BucketSortOrder
search?: string
}
export type BucketsListPaginatedVariables = BucketsVariables & BucketListPagination
const DEFAULT_PAGE_SIZE = 100
const DEFAULT_SORT_COLUMN: BucketSortColumn = 'created_at'
const DEFAULT_SORT_ORDER: BucketSortOrder = 'desc'
const getBucketsPaginated = async (
{
projectRef,
page = 0,
limit = DEFAULT_PAGE_SIZE,
sortColumn = DEFAULT_SORT_COLUMN,
sortOrder = DEFAULT_SORT_ORDER,
search,
}: BucketsListPaginatedVariables,
signal?: AbortSignal
) => {
if (!projectRef) throw new Error('projectRef is required')
const offset = page * limit
const trimmedSearch = search?.trim()
const resolvedSearch = !!trimmedSearch && trimmedSearch.length > 0 ? trimmedSearch : undefined
const { data, error } = await get('/platform/storage/{ref}/buckets', {
params: {
path: { ref: projectRef },
query: {
limit,
offset,
sortColumn,
sortOrder,
search: resolvedSearch,
},
},
signal,
})
if (error) handleError(error)
return data
}
type BucketData = Awaited<ReturnType<typeof getBucket>>
export type BucketsData = Awaited<ReturnType<typeof getBuckets>>
export type BucketsWithPaginationData = Awaited<ReturnType<typeof getBucketsPaginated>>
export type BucketsError = ResponseError
const useBucketQuery = <TData = BucketData>(
{ projectRef, bucketId }: GetBucketParams,
{ enabled = true, ...options }: UseCustomQueryOptions<BucketData, BucketsError, TData>
) => {
const { data: project } = useSelectedProjectQuery()
const isActive = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY
return useQuery<BucketData, BucketsError, TData>({
queryKey: storageKeys.bucket(projectRef, bucketId),
queryFn: ({ signal }) => getBucket({ projectRef, bucketId }, signal),
enabled: enabled && !!bucketId && isActive,
...options,
retry: shouldRetryBucketsQuery,
})
}
export const useBucketsQuery = <TData = BucketsData>(
{ projectRef }: BucketsVariables,
{ enabled = true, ...options }: UseCustomQueryOptions<BucketsData, BucketsError, TData> = {}
) => {
const { data: project } = useSelectedProjectQuery()
const isActive = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY
return useQuery<BucketsData, BucketsError, TData>({
queryKey: storageKeys.buckets(projectRef),
queryFn: ({ signal }) => getBuckets({ projectRef }, signal),
enabled: enabled && typeof projectRef !== 'undefined' && isActive,
...options,
retry: shouldRetryBucketsQuery,
})
}
export const usePaginatedBucketsQuery = <TData = BucketsWithPaginationData>(
{ projectRef, ...params }: Omit<BucketsListPaginatedVariables, 'page'>,
{
enabled = true,
...options
}: UseCustomInfiniteQueryOptions<BucketsWithPaginationData, BucketsError, TData> = {}
) => {
const { data: project } = useSelectedProjectQuery()
const isActive = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY
const { keepPreviousData, ...restOptions } = options
const resolvedKeepPreviousData = keepPreviousData ?? true
return useInfiniteQuery<BucketsWithPaginationData, BucketsError, TData>({
queryKey: storageKeys.bucketsList(projectRef, params),
queryFn: ({ signal, pageParam }) =>
getBucketsPaginated({ projectRef, page: pageParam, ...params }, signal),
enabled: enabled && typeof projectRef !== 'undefined' && isActive,
getNextPageParam: (lastPage, pages) => {
const nextPageNumber = pages.length
const limit = params.limit ?? DEFAULT_PAGE_SIZE
const lastPageCount = lastPage.length
if (lastPageCount < limit) return undefined
return nextPageNumber
},
...restOptions,
keepPreviousData: resolvedKeepPreviousData,
retry: shouldRetryBucketsQuery,
})
}
/**
* Tries to get the bucket info from the cache first. If not found, fetches
* from remote by name.
*/
export const useBucketInfoQueryPreferCached = (bucketId?: string, projectRef?: string) => {
const queryClient = useQueryClient()
const cachedBucketInfo = useMemo(() => {
if (!bucketId) return undefined
const bucketsPages = queryClient.getQueryData(storageKeys.bucketsList(projectRef)) as
| UseInfiniteQueryResult<Bucket[]>['data']
| undefined
const buckets = bucketsPages?.pages.flatMap((page) => page) ?? []
return buckets.find((b) => b.name === bucketId)
}, [bucketId, projectRef, queryClient])
const shouldFetchBucketInfo = !!bucketId && !cachedBucketInfo
const { data: remoteBucketInfo } = useBucketQuery(
{
projectRef,
bucketId,
},
{
enabled: shouldFetchBucketInfo,
}
)
if (!bucketId) return undefined
return cachedBucketInfo ?? remoteBucketInfo
}
const shouldRetryBucketsQuery = (failureCount: number, error: unknown) => {
if (error instanceof ResponseError) {
if (
error.message.includes('Missing tenant config') ||
error.message.includes('Project has no active API keys')
) {
return false
}
}
if (failureCount < MAX_RETRY_FAILURE_COUNT) {
return true
}
return false
}