• Version 1.11.4
  • Published
  • 11.4 MB
  • 5 dependencies
  • MIT license


npm i graphiql
yarn add graphiql
pnpm add graphiql


An graphical interactive in-browser GraphQL IDE.



variable fillLeafs

const fillLeafs: any;

    variable getSelectedOperationName

    const getSelectedOperationName: any;

      variable mergeAst

      const mergeAst: any;

        variable onHasCompletion

        const onHasCompletion: any;

          variable ToolbarMenuItem

          const ToolbarMenuItem: FC<ToolbarMenuItemProps>;


            function DocExplorer

            DocExplorer: (props: DocExplorerProps) => JSX.Element;

              function QueryEditor

              QueryEditor: (props: UseQueryEditorArgs) => JSX.Element;

                function ToolbarGroup

                ToolbarGroup: ({ children }: ToolbarGroupProps) => JSX.Element;

                  function ToolbarSelectOption

                  ToolbarSelectOption: ({
                  }: ToolbarSelectOptionProps) => JSX.Element;

                    function VariableEditor

                    VariableEditor: ({ active, ...hookArgs }: VariableEditorProps) => JSX.Element;


                      class GraphiQL

                      class GraphiQL extends React.Component<GraphiQLProps> {}


                        constructor(props: GraphiQLProps);

                          property Button

                          static Button: typeof ToolbarButton;

                            property Footer

                            static Footer: typeof GraphiQLFooter;

                              property formatError

                              static formatError: (error: any) => string;

                                property formatResult

                                static formatResult: (result: any) => string;

                                  property Group

                                  static Group: ({ children }: ToolbarGroupProps) => JSX.Element;

                                    property HeaderEditor

                                    static HeaderEditor: ({ active, ...hookArgs }: any) => JSX.Element;
                                      static Logo: typeof GraphiQLLogo;

                                        property Menu

                                        static Menu: typeof ToolbarMenu;

                                          property MenuItem

                                          static MenuItem: React.FC<{
                                          onSelect: () => void;
                                          title: string;
                                          label: string;

                                            property QueryEditor

                                            static QueryEditor: (props: UseQueryEditorArgs) => JSX.Element;

                                              property ref

                                              ref: GraphiQLWithContext;

                                                property ResultViewer

                                                static ResultViewer: (props: UseResponseEditorArgs) => JSX.Element;

                                                  property Toolbar

                                                  static Toolbar: typeof GraphiQLToolbar;

                                                    property ToolbarButton

                                                    static ToolbarButton: typeof ToolbarButton;

                                                      property VariableEditor

                                                      static VariableEditor: ({ active, ...hookArgs }: any) => JSX.Element;

                                                        method autoCompleteLeafs

                                                        autoCompleteLeafs: () => string | undefined;

                                                          method componentDidMount

                                                          componentDidMount: () => void;

                                                            method getHeaderEditor

                                                            getHeaderEditor: () =>
                                                            | import('@graphiql/react/types/editor/types').CodeMirrorEditor
                                                            | null;

                                                              method getQueryEditor

                                                              getQueryEditor: () =>
                                                              | import('@graphiql/react/types/editor/context').CodeMirrorEditorWithOperationFacts
                                                              | null;

                                                                method getVariableEditor

                                                                getVariableEditor: () =>
                                                                | import('@graphiql/react/types/editor/types').CodeMirrorEditor
                                                                | null;

                                                                  method refresh

                                                                  refresh: () => void;

                                                                    method render

                                                                    render: () => JSX.Element;

                                                                      class ToolbarButton

                                                                      class ToolbarButton extends React.Component<
                                                                      > {}


                                                                        constructor(props: ToolbarButtonProps);

                                                                          property handleClick

                                                                          handleClick: () => void;

                                                                            method render

                                                                            render: () => JSX.Element;

                                                                              class ToolbarMenu

                                                                              class ToolbarMenu extends React.Component<ToolbarMenuProps, ToolbarMenuState> {}


                                                                                constructor(props: ToolbarMenuProps);

                                                                                  property handleOpen

                                                                                  handleOpen: MouseEventHandler<HTMLAnchorElement>;

                                                                                    method componentWillUnmount

                                                                                    componentWillUnmount: () => void;

                                                                                      method handleClick

                                                                                      handleClick: (e: MouseEvent | React.MouseEvent<HTMLAnchorElement>) => void;

                                                                                        method render

                                                                                        render: () => JSX.Element;

                                                                                          class ToolbarSelect

                                                                                          class ToolbarSelect extends React.Component<
                                                                                          > {}


                                                                                            constructor(props: ToolbarSelectProps);

                                                                                              property handleOpen

                                                                                              handleOpen: (e: React.MouseEvent) => void;

                                                                                                method componentWillUnmount

                                                                                                componentWillUnmount: () => void;

                                                                                                  method handleClick

                                                                                                  handleClick: (e: MouseEvent) => void;

                                                                                                    method render

                                                                                                    render: () => JSX.Element;

                                                                                                      Type Aliases

                                                                                                      type GraphiQLProps

                                                                                                      type GraphiQLProps = {
                                                                                                      fetcher: Fetcher;
                                                                                                      schema?: GraphQLSchema | IntrospectionQuery | null;
                                                                                                      validationRules?: ValidationRule[];
                                                                                                      query?: string;
                                                                                                      variables?: string;
                                                                                                      headers?: string;
                                                                                                      operationName?: string;
                                                                                                      response?: string;
                                                                                                      storage?: Storage;
                                                                                                      defaultQuery?: string;
                                                                                                      defaultVariableEditorOpen?: boolean;
                                                                                                      defaultSecondaryEditorOpen?: boolean;
                                                                                                      headerEditorEnabled?: boolean;
                                                                                                      shouldPersistHeaders?: boolean;
                                                                                                      externalFragments?: string | FragmentDefinitionNode[];
                                                                                                      onCopyQuery?: (query?: string) => void;
                                                                                                      onEditQuery?: (query?: string, documentAST?: DocumentNode) => void;
                                                                                                      onEditVariables?: (value: string) => void;
                                                                                                      onEditHeaders?: (value: string) => void;
                                                                                                      onEditOperationName?: (operationName: string) => void;
                                                                                                      onToggleDocs?: (docExplorerOpen: boolean) => void;
                                                                                                      getDefaultFieldNames?: GetDefaultFieldNamesFn;
                                                                                                      editorTheme?: string;
                                                                                                      keyMap?: KeyMap;
                                                                                                      onToggleHistory?: (historyPaneOpen: boolean) => void;
                                                                                                      ResultsTooltip?: ResponseTooltipType;
                                                                                                      dangerouslyAssumeSchemaIsValid?: boolean;
                                                                                                      inputValueDeprecation?: boolean;
                                                                                                      schemaDescription?: boolean;
                                                                                                      introspectionQueryName?: string;
                                                                                                      readOnly?: boolean;
                                                                                                      docExplorerOpen?: boolean;
                                                                                                      toolbar?: GraphiQLToolbarConfig;
                                                                                                      maxHistoryLength?: number;
                                                                                                      onSchemaChange?: (schema: GraphQLSchema) => void;
                                                                                                      beforeTopBarContent?: React.ReactElement | null;
                                                                                                      | boolean
                                                                                                      | {
                                                                                                      onTabChange?: (tab: TabsState) => void;
                                                                                                      children?: ReactNode;

                                                                                                        Package Files (9)

                                                                                                        Dependencies (5)

                                                                                                        Dev Dependencies (40)

                                                                                                        Peer Dependencies (3)


                                                                                                        To add a badge like this badgeto your package's README, use the codes available below.

                                                                                                        You may also use to create a custom badge linking to

                                                                                                        • Markdown
                                                                                                        • HTML
                                                                                                          <a href=""><img src="" alt=""></a>