graphiql/dist/GraphiQL.d.ts

An graphical interactive in-browser GraphQL IDE.

import { ReactNode, FC, ComponentPropsWithoutRef } from 'react';
import { GraphiQLProvider, QueryEditor, ResponseEditor, TopBar, EditorProps, VariableEditor, HeaderEditor, GraphiQLPlugin } from '@graphiql/react';
import { Fetcher, Transport } from '@graphiql/toolkit';
import { HistoryStore } from '@graphiql/plugin-history';
import { ActivityBar } from './ui';
export declare const DEFAULT_PLUGINS: readonly GraphiQLPlugin[];
/**
 * API docs for this live here:
 *
 * https://graphiql-test.netlify.app/typedoc/modules/graphiql.html#graphiqlprops
 *
 * Note: the XOR between `fetcher` and `transport` is preserved here explicitly.
 * `Omit` flattens discriminated unions, so it has to be re-applied at this
 * level so passing both props is a compile error at the `<GraphiQL>` call site.
 */
export type GraphiQLProps = GraphiQLInterfaceProps & Omit<ComponentPropsWithoutRef<typeof HistoryStore>, 'children'> & Omit<ComponentPropsWithoutRef<typeof GraphiQLProvider>, 'children' | 'fetcher' | 'plugins' | 'transport'> & {
    plugins?: readonly GraphiQLPlugin[];
} & ({
    fetcher: Fetcher;
    transport?: never;
} | {
    transport: Transport;
    fetcher?: never;
});
type AddSuffix<Obj extends Record<string, any>, Suffix extends string> = {
    [Key in keyof Obj as `${string & Key}${Suffix}`]: Obj[Key];
};
type QueryEditorProps = ComponentPropsWithoutRef<typeof QueryEditor>;
type VariableEditorProps = ComponentPropsWithoutRef<typeof VariableEditor>;
type HeaderEditorProps = ComponentPropsWithoutRef<typeof HeaderEditor>;
type ResponseEditorProps = ComponentPropsWithoutRef<typeof ResponseEditor>;
export interface GraphiQLInterfaceProps extends EditorProps, AddSuffix<Pick<QueryEditorProps, 'onEdit'>, 'Query'>, AddSuffix<Pick<VariableEditorProps, 'onEdit'>, 'Variables'>, AddSuffix<Pick<HeaderEditorProps, 'onEdit'>, 'Headers'>, Pick<ResponseEditorProps, 'responseTooltip'>, Pick<ComponentPropsWithoutRef<typeof ActivityBar>, 'forcedTheme' | 'showPersistHeadersSettings'>, Pick<ComponentPropsWithoutRef<typeof TopBar>, 'brand'> {
    children?: ReactNode;
    /**
     * Set the default state for the editor tools.
     * - `false` hides the editor tools
     * - `true` shows the editor tools
     * - `'variables'` specifically shows the variables editor
     * - `'headers'` specifically shows the request headers editor
     * By default, the editor tools are initially shown when at least one of the
     * editors has contents.
     */
    defaultEditorToolsVisibility?: boolean | 'variables' | 'headers';
    /**
     * Toggle if the headers' editor should be shown inside the editor tools.
     * @default true
     */
    isHeadersEditorEnabled?: boolean;
    /**
     * Additional class names which will be appended to the container element.
     */
    className?: string;
    /**
     * When the user clicks a close tab button, this function is invoked with
     * the index of the tab that is about to be closed. It can return a promise
     * that should resolve to `true` (meaning the tab may be closed) or `false`
     * (meaning the tab may not be closed).
     * @param index - The index of the tab that should be closed.
     */
    confirmCloseTab?(index: number): Promise<boolean> | boolean;
}
export declare const GraphiQLInterface: FC<GraphiQLInterfaceProps>;
export declare const GraphiQL: FC<GraphiQLProps> & {
    Footer: FC<{
        children: ReactNode;
    }>;
};
export {};