mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 11:55:05 +03:00
Charis
72cebe3976
## 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 -->
[](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 -->
55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { useState } from 'react'
|
|
import { Button } from 'ui'
|
|
|
|
import { IntrospectionConfirmModal } from './IntrospectionConfirmModal'
|
|
import { useSetIntrospection } from './useSetIntrospection'
|
|
|
|
interface IntrospectionEnabledNoticeProps {
|
|
schema: string
|
|
currentSchemaComment: string | null | undefined
|
|
onDisabled: () => void
|
|
}
|
|
|
|
export const IntrospectionEnabledNotice = ({
|
|
schema,
|
|
currentSchemaComment,
|
|
onDisabled,
|
|
}: IntrospectionEnabledNoticeProps) => {
|
|
const [showConfirm, setShowConfirm] = useState(false)
|
|
|
|
const { apply, isPending, sql, existingDirectiveIsMalformed, otherExistingKeys } =
|
|
useSetIntrospection({
|
|
schema,
|
|
currentSchemaComment,
|
|
enabled: false,
|
|
onMutationSuccess: () => setShowConfirm(false),
|
|
onInvalidated: onDisabled,
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center justify-between gap-3 border-b bg-surface-100 px-4 py-2 text-xs text-foreground-light">
|
|
<span>
|
|
GraphQL introspection is enabled for this project, so schemas are discoverable through the
|
|
API.
|
|
</span>
|
|
<Button type="default" size="tiny" onClick={() => setShowConfirm(true)}>
|
|
Disable introspection
|
|
</Button>
|
|
</div>
|
|
|
|
<IntrospectionConfirmModal
|
|
mode="disable"
|
|
visible={showConfirm}
|
|
schema={schema}
|
|
sql={sql}
|
|
otherExistingKeys={otherExistingKeys}
|
|
existingDirectiveIsMalformed={existingDirectiveIsMalformed}
|
|
isPending={isPending}
|
|
onCancel={() => setShowConfirm(false)}
|
|
onConfirm={apply}
|
|
/>
|
|
</>
|
|
)
|
|
}
|