Files
supabase/apps/studio/components/interfaces/Integrations/GraphQL/useSetIntrospection.ts
Charis 72cebe3976 feat(studio): toggle pg_graphql introspection from GraphiQL (#46170)
## Summary

- pg_graphql 1.6+ disables schema introspection by default, which breaks
GraphiQL's docs explorer and field autocomplete. This PR adds an in-app
notice + confirmation flow so users can opt into (or later opt out of)
introspection without leaving the GraphQL tab.
- Introspection state is read from, and written to, the `@graphql(...)`
directive embedded in the target schema's Postgres comment (`public` by
default). Other directive options the user has set are preserved when
the introspection key is toggled.
- Ships `parseSchemaComment` / `buildSchemaCommentWith` helpers (with
unit tests) and a `useSetIntrospection` mutation hook, plus collapsible
disabled-state and dismissible enabled-state notices rendered above
GraphiQL. GraphiQL is re-mounted after a toggle so it re-runs
introspection.

## Test plan

- [ ] On a project with pg_graphql >= 1.6 and introspection disabled:
disabled-state notice appears, confirm modal shows the SQL that will
run, enabling re-mounts GraphiQL and populates the docs explorer.
- [ ] On a project with introspection enabled: small enabled-state
banner appears, disabling clears the docs explorer and updates the
schema comment.
- [ ] Existing `@graphql({...})` options (e.g. `inflect_names`,
`max_rows`) survive a toggle; malformed directive text is replaced and a
warning is shown in the confirm modal.
- [ ] On pg_graphql < 1.6 (or extension not installed): no notice
renders, GraphiQL behaves as before.
- [ ] Collapsed-disabled-notice state persists per project via local
storage.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * GraphQL introspection toggle with enable/disable confirmation modal.
* Notices showing current introspection state with controls to change
it.
* GraphiQL automatically remounts and updates when introspection status
changes.
* Per-project persisted collapsed/expanded state for the introspection
notice.
* Background detection of introspection support and schema comment
handling for targeted schemas.

* **Tests**
* Comprehensive tests for parsing/building schema comment directives and
version behavior.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46170?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-21 07:07:35 -04:00

68 lines
2.5 KiB
TypeScript

import { ident, literal, safeSql } from '@supabase/pg-meta'
import { useQueryClient } from '@tanstack/react-query'
import { toast } from 'sonner'
import { buildSchemaCommentWith, parseSchemaComment } from './pgGraphqlSchemaComment'
import { pgGraphqlKeys } from '@/data/pg-graphql/keys'
import { useExecuteSqlMutation } from '@/data/sql/execute-sql-mutation'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
interface UseSetIntrospectionParams {
schema: string
currentSchemaComment: string | null | undefined
/** Target state — true enables introspection, false disables it. */
enabled: boolean
/** Fires synchronously when the mutation succeeds, before query invalidation — use to close the confirmation modal. */
onMutationSuccess: () => void
/** Fires after dependent queries are invalidated — use to trigger remounts that depend on fresh data. */
onInvalidated: () => void
}
export const useSetIntrospection = ({
schema,
currentSchemaComment,
enabled,
onMutationSuccess,
onInvalidated,
}: UseSetIntrospectionParams) => {
const { data: project } = useSelectedProjectQuery()
const queryClient = useQueryClient()
const parsed = parseSchemaComment(currentSchemaComment)
const nextComment = buildSchemaCommentWith(currentSchemaComment, { introspection: enabled })
const sql = safeSql`comment on schema ${ident(schema)} is ${literal(nextComment)};`
// If the existing directive was unparseable we'd be silently discarding the
// user's prior options. Surface that so the UI can warn before confirming.
const existingDirectiveIsMalformed = parsed.hasDirective && parsed.isMalformed
const otherExistingKeys = Object.keys(parsed.options).filter((k) => k !== 'introspection')
const pastVerb = enabled ? 'enabled' : 'disabled'
const presentVerb = enabled ? 'enable' : 'disable'
const { mutate, isPending } = useExecuteSqlMutation({
onSuccess: async (_data, variables) => {
toast.success(`Introspection ${pastVerb} on schema "${schema}".`)
onMutationSuccess()
await queryClient.invalidateQueries({
queryKey: pgGraphqlKeys.schemaComment(variables.projectRef, schema),
})
onInvalidated()
},
onError: (error) => {
toast.error(`Failed to ${presentVerb} introspection: ${error.message}`)
},
})
const apply = () => {
if (!project?.ref) return
mutate({
projectRef: project.ref,
connectionString: project.connectionString,
sql,
})
}
return { apply, isPending, sql, existingDirectiveIsMalformed, otherExistingKeys }
}