supabase/apps/studio/data/prefetchers/project.$ref.tsx

import { useQueryClient } from '@tanstack/react-query'
import { useRouter } from 'next/router'
import { PropsWithChildren, useCallback } from 'react'

import PrefetchableLink, { PrefetchableLinkProps } from './PrefetchableLink'
import { prefetchProjectDetail } from '@/data/projects/project-detail-query'

export function usePrefetchProjectIndexPage() {
  const router = useRouter()
  const queryClient = useQueryClient()

  return useCallback(
    ({ projectRef }: { projectRef?: string }) => {
      // Prefetch code
      router.prefetch(`/project/${projectRef}`)

      // Prefetch data
      prefetchProjectDetail(queryClient, {
        ref: projectRef,
      }).catch(() => {
        // eat prefetching errors as they are not critical
      })
    },
    [queryClient, router]
  )
}

interface ProjectIndexPageLinkProps extends Omit<PrefetchableLinkProps, 'href' | 'prefetcher'> {
  projectRef?: string
  href?: PrefetchableLinkProps['href']
}

export function ProjectIndexPageLink({
  href,
  projectRef,
  children,
  ...props
}: PropsWithChildren<ProjectIndexPageLinkProps>) {
  const prefetch = usePrefetchProjectIndexPage()

  return (
    <PrefetchableLink
      href={href || `/project/${projectRef}`}
      prefetcher={() => prefetch({ projectRef })}
      {...props}
    >
      {children}
    </PrefetchableLink>
  )
}