Shift fetching + reading of buckets to RQ

studio/components/layouts/StorageLayout/StorageLayout.tsx

@@ -11,6 +11,7 @@ import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStor
 import { formatPoliciesForStorage } from 'components/to-be-cleaned/Storage/Storage.utils'
 import DeleteBucketModal from 'components/to-be-cleaned/Storage/DeleteBucketModal'
 import { PROJECT_STATUS } from 'lib/constants'
+import { useBucketsQuery } from 'data/storage/buckets-query'
 
 interface Props {
   title: string
@@ -21,13 +22,11 @@ const StorageLayout: FC<Props> = ({ title, children }) => {
   const { ui, meta } = useStore()
   const { ref: projectRef } = useParams()
   const storageExplorerStore = useStorageStore()
-  const {
-    selectedBucketToEdit,
-    closeDeleteBucketModal,
-    showDeleteBucketModal,
-    deleteBucket,
-    buckets,
-  } = storageExplorerStore || {}
+  const { selectedBucketToEdit, closeDeleteBucketModal, showDeleteBucketModal, deleteBucket } =
+    storageExplorerStore || {}
+
+  const { data } = useBucketsQuery({ projectRef })
+  const buckets = data ?? []
 
   const { data: settings, isLoading } = useProjectApiQuery({ projectRef })
   const apiService = settings?.autoApiService

studio/components/layouts/StorageLayout/StorageMenu.tsx

@@ -14,6 +14,7 @@ import { StorageBucket } from 'components/interfaces/Storage/Storage.types'
 import EditBucketModal from 'components/interfaces/Storage/EditBucketModal'
 import CreateBucketModal from 'components/interfaces/Storage/CreateBucketModal'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { useBucketsQuery } from 'data/storage/buckets-query'
 
 interface Props {}
 
@@ -32,7 +33,10 @@ const StorageMenu: FC<Props> = () => {
     | 'logs'
 
   const storageExplorerStore = useStorageStore()
-  const { loaded, buckets, openDeleteBucketModal } = storageExplorerStore || {}
+  const { data } = useBucketsQuery({ projectRef: ref })
+  const { loaded, openDeleteBucketModal } = storageExplorerStore || {}
+
+  const buckets = data ?? []
 
   return (
     <>

studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePolicies.js

@@ -12,11 +12,18 @@ import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
 
 import { PolicyEditorModal } from 'components/interfaces/Auth/Policies'
+import { useBucketsQuery } from 'data/storage/buckets-query'
+import { useParams } from 'common'
 
 const StoragePolicies = () => {
   const { ui, meta } = useStore()
+  const { ref: projectRef } = useParams()
+
   const storageStore = useStorageStore()
-  const { loaded, buckets } = storageStore
+  const { loaded } = storageStore
+
+  const { data } = useBucketsQuery({ projectRef })
+  const buckets = data ?? []
 
   const roles = meta.roles.list((role) => !meta.roles.systemRoles.includes(role.name))
 

studio/data/storage/buckets-query.ts

@@ -0,0 +1,51 @@
+import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { get } from 'lib/common/fetch'
+import { API_URL, IS_PLATFORM } from 'lib/constants'
+import { useCallback } from 'react'
+import { storageKeys } from './keys'
+
+export type BucketsVariables = { projectRef?: string }
+
+export type BucketsResponse = {
+  id: string
+  name: string
+  owner: string
+  public: boolean
+  created_at: string
+  updated_at: string
+  file_size_limit: null | number
+  allowed_mime_types: null | string[]
+}
+
+export async function getBuckets({ projectRef }: BucketsVariables, signal?: AbortSignal) {
+  if (!projectRef) throw new Error('projectRef is required')
+
+  const response = await get(`${API_URL}/storage/${projectRef}/buckets`, { signal })
+  if (response.error) throw response.error
+  return response as BucketsResponse[]
+}
+
+export type BucketsData = Awaited<ReturnType<typeof getBuckets>>
+export type BucketsError = unknown
+
+export const useBucketsQuery = <TData = BucketsData>(
+  { projectRef }: BucketsVariables,
+  { enabled = true, ...options }: UseQueryOptions<BucketsData, BucketsError, TData> = {}
+) =>
+  useQuery<BucketsData, BucketsError, TData>(
+    storageKeys.buckets(projectRef),
+    ({ signal }) => getBuckets({ projectRef }, signal),
+    { enabled: IS_PLATFORM && enabled && typeof projectRef !== 'undefined', ...options }
+  )
+
+export const useBucketsPrefetch = ({ projectRef }: BucketsVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (projectRef) {
+      client.prefetchQuery(storageKeys.buckets(projectRef), ({ signal }) =>
+        getBuckets({ projectRef }, signal)
+      )
+    }
+  }, [projectRef])
+}

studio/data/storage/keys.ts

@@ -0,0 +1,3 @@
+export const storageKeys = {
+  buckets: (projectRef: string | undefined) => ['projects', projectRef, 'buckets'] as const,
+}

studio/pages/project/[ref]/storage/buckets/[bucketId].tsx

@@ -1,30 +1,24 @@
-import React, { useEffect } from 'react'
-import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
 import { find } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { useEffect } from 'react'
 
-import { API_URL } from 'lib/constants'
+import { useParams } from 'common'
+import { StorageLayout } from 'components/layouts'
+import { StorageExplorer } from 'components/to-be-cleaned/Storage'
+import { useBucketsQuery } from 'data/storage/buckets-query'
 import { useFlag, useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
-import { PROJECT_STATUS } from 'lib/constants'
-import { StorageLayout } from 'components/layouts'
-import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
-import { StorageExplorer } from 'components/to-be-cleaned/Storage'
-import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
+import { API_URL, PROJECT_STATUS } from 'lib/constants'
 import { NextPageWithLayout } from 'types'
 
-/**
- * PageLayout is used to setup layout - as usual it will requires inject global store
- */
 const PageLayout: NextPageWithLayout = () => {
-  const router = useRouter()
-  const { ref, bucketId } = router.query
+  const { ref, bucketId } = useParams()
 
   const { ui } = useStore()
   const project = ui.selectedProject
 
-  const storageStore = useStorageStore()
-  const { buckets, loaded } = storageStore
+  const { data, isSuccess } = useBucketsQuery({ projectRef: ref })
+  const buckets = data ?? []
 
   const kpsEnabled = useFlag('initWithKps')
 
@@ -40,7 +34,7 @@ const PageLayout: NextPageWithLayout = () => {
 
   return (
     <div className="storage-container flex flex-grow p-4">
-      {loaded ? (
+      {isSuccess ? (
         !bucket ? (
           <div className="flex h-full w-full items-center justify-center">
             <p className="text-sm text-scale-1100">Bucket {bucketId} cannot be found</p>

studio/pages/project/[ref]/storage/buckets/index.tsx

@@ -1,18 +1,13 @@
-import React, { useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { API_URL } from 'lib/constants'
-import { useFlag, useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import { post } from 'lib/common/fetch'
-import { PROJECT_STATUS } from 'lib/constants'
 import { StorageLayout } from 'components/layouts'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
+import { useFlag, useStore } from 'hooks'
+import { post } from 'lib/common/fetch'
+import { API_URL, PROJECT_STATUS } from 'lib/constants'
+import { observer } from 'mobx-react-lite'
+import { useEffect } from 'react'
 import { NextPageWithLayout } from 'types'
 
-/**
- * PageLayout is used to setup layout - as usual it will requires inject global store
- */
 const PageLayout: NextPageWithLayout = ({}) => {
   const { ref } = useParams()
   const { ui } = useStore()