Entities() — supabase Function Reference

Source Code

apps/studio/components/interfaces/ProjectAPIDocs/Content/Entities.tsx lines 15–64

export const Entities = ({ language }: ContentProps) => {
  const { ref } = useParams()
  const [isGeneratingTypes, setIsGeneratingTypes] = useState(false)

  const { data: config } = useProjectPostgrestConfigQuery({ projectRef: ref })

  const onClickGenerateTypes = async () => {
    try {
      setIsGeneratingTypes(true)
      const res = await generateTypes({ ref, included_schemas: config?.db_schema })
      let element = document.createElement('a')
      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(res.types))
      element.setAttribute('download', 'supabase.ts')
      element.style.display = 'none'
      document.body.appendChild(element)
      element.click()
      document.body.removeChild(element)
      toast.success(`Successfully generated types! File is being downloaded`)
    } catch (error: any) {
      toast.error(`Failed to generate types: ${error.message}`)
    } finally {
      setIsGeneratingTypes(false)
    }
  }

  return (
    <>
      <ContentSnippet selectedLanguage={language} snippet={DOCS_CONTENT.entitiesIntroduction} />
      <div>
        <ContentSnippet selectedLanguage={language} snippet={DOCS_CONTENT.generatingTypes} />
        <div className="flex items-center gap-x-2 px-4 mt-3">
          <DocsButton href={`${DOCS_URL}/guides/database/api/generating-types`} />
          <Button
            type="default"
            disabled={isGeneratingTypes}
            loading={isGeneratingTypes}
            icon={<Download strokeWidth={1.5} />}
            onClick={onClickGenerateTypes}
          >
            Generate and download types
          </Button>
        </div>
        <p className="text-xs text-foreground-light px-4 mt-2">
          Remember to re-generate and download this file as you make changes to your tables.
        </p>
      </div>
      <ContentSnippet selectedLanguage={language} snippet={DOCS_CONTENT.graphql} />
    </>
  )
}