Options
All
  • Public
  • Public/Protected
  • All
Menu

Package graphiql-react

Changelog | API Docs | NPM

@graphiql/react

A React SDK for building integrated GraphQL developer experiences for the web.

Purpose

This package contains a set of building blocks that allow its users to build GraphQL IDEs with ease. It's the set of components that make up GraphiQL, the first and official GraphQL IDE, owned and maintained by the GraphQL Foundation.

There are two kinds of building blocks that this package provides: Stateful context providers for state management and simple UI components.

Getting started

All the state for your GraphQL IDE lives in multiple contexts. The easiest way to get started is by using the GraphiQLProvider component that renders all the individual providers.

There is one required prop called fetcher. This is a function that performs GraphQL request against a given endpoint. You can easily create a fetcher using the method createGraphiQLFetcher from the @graphiql/toolkit package.

import { GraphiQLProvider } from '@graphiql/react';
import { createGraphiQLFetcher } from '@graphiql/toolkit';

const fetcher = createGraphiQLFetcher({
  url: 'https://my.graphql.api/graphql',
});

function MyGraphQLIDE() {
  return (
    <GraphiQLProvider fetcher={fetcher}>
      <div className="graphiql-container">Hello GraphQL</div>
    </GraphiQLProvider>
  );
}

Inside the provider you can now use any UI component provided by @graphiql/react. For example, you can render a query editor like this:

import { QueryEditor } from '@graphiql/react';

function MyGraphQLIDE() {
  return (
    <GraphiQLProvider fetcher={fetcher}>
      <div className="graphiql-container">
        <QueryEditor />
      </div>
    </GraphiQLProvider>
  );
}

The package also ships the necessary CSS that all its UI components need. You can import them from @graphiql/react/dist/style.css.

Note: In order for these styles to apply, the UI components need to be rendered inside an element that has a class name graphiql-container.

By default, the UI components will try to use the Roboto font for regular text and the Fira Code font for mono-space text. If you want to use the default fonts you can load them using these files:

  • @graphiql/react/font/roboto.css
  • @graphiql/react/font/fira-code.css.

You can of course use any other method to load these fonts (for example loading them from Google Fonts).

Further details on how to use @graphiql/react can be found in the reference implementation of a GraphQL IDE - GraphiQL - in the graphiql package.

Available contexts

There are multiple contexts that own different parts of the state that make up a complete GraphQL IDE. For each context there is a provider component (<name>ContextProvider) that makes sure the context is initialized and managed properly. These components contains all the logic related to state management. In addition, for each context there is also a hook (use<name>Context) that allows you to consume its current value.

Here is a list of all contexts that come with @graphiql/react

  • StorageContext: Provides a storage API that can be used to persist state in the browser (by default using localStorage)
  • EditorContext: Manages all the editors and tabs
  • SchemaContext: Fetches, validates and stores the GraphQL schema
  • ExecutionContext: Executes GraphQL requests
  • HistoryContext: Persists executed requests in storage
  • ExplorerContext: Handles the state for the docs explorer

All context properties are documented using JSDoc comments. If you're using an IDE like VSCode for development these descriptions will show up in auto-complete tooltips. All these descriptions can also be found in the API Docs.

Theming

All the components from @graphiql/react have been designed with customization in mind. We achieve this using CSS variables.

All variables that are available for customization can be found in the root.css file.

Colors

Colors are defined using the HSL format. All CSS variables for colors are defined as a list of the three values that make up HSL (hue, saturation and lightness).

This approach allows @graphiql/react to use transparent colors by passing the value of the CSS variable in the hsla function. This enables us to provide truly reusable UI elements where good contrasts are preserved regardless of the elements background.

Development

If you want to develop with @graphiql/react locally - in particular when working on the graphiql package - all you need to do is run yarn dev in the package folder in a separate terminal. This will build the package using Vite. When using it in combination with yarn dev-graphiql (running in the repo root) this will give you auto-reloading when working on graphiql and @graphiql/react simultaneously.

Index

References

Namespaces

Type aliases

Variables

Functions

Object literals

References

Argument

Re-exports Argument

Argument

Re-exports Argument

Argument

Re-exports Argument

Argument

Re-exports Argument

ArgumentIcon

Re-exports ArgumentIcon

ArgumentIcon

Re-exports ArgumentIcon

Button

Re-exports Button

Button

Re-exports Button

Button

Re-exports Button

Button

Re-exports Button

ButtonGroup

Re-exports ButtonGroup

ButtonGroup

Re-exports ButtonGroup

ButtonGroup

Re-exports ButtonGroup

ButtonGroup

Re-exports ButtonGroup

ChevronDownIcon

Re-exports ChevronDownIcon

ChevronDownIcon

Re-exports ChevronDownIcon

ChevronLeftIcon

Re-exports ChevronLeftIcon

ChevronLeftIcon

Re-exports ChevronLeftIcon

ChevronUpIcon

Re-exports ChevronUpIcon

ChevronUpIcon

Re-exports ChevronUpIcon

CloseIcon

Re-exports CloseIcon

CloseIcon

Re-exports CloseIcon

CommonEditorProps

Re-exports CommonEditorProps

CommonEditorProps

Re-exports CommonEditorProps

CommonEditorProps

Re-exports CommonEditorProps

CommonEditorProps

Re-exports CommonEditorProps

CopyIcon

Re-exports CopyIcon

CopyIcon

Re-exports CopyIcon

DOC_EXPLORER_PLUGIN

Re-exports DOC_EXPLORER_PLUGIN

DOC_EXPLORER_PLUGIN

Re-exports DOC_EXPLORER_PLUGIN

DefaultValue

Re-exports DefaultValue

DefaultValue

Re-exports DefaultValue

DefaultValue

Re-exports DefaultValue

DefaultValue

Re-exports DefaultValue

DeprecatedArgumentIcon

Re-exports DeprecatedArgumentIcon

DeprecatedArgumentIcon

Re-exports DeprecatedArgumentIcon

DeprecatedEnumValueIcon

Re-exports DeprecatedEnumValueIcon

DeprecatedEnumValueIcon

Re-exports DeprecatedEnumValueIcon

DeprecatedFieldIcon

Re-exports DeprecatedFieldIcon

DeprecatedFieldIcon

Re-exports DeprecatedFieldIcon

DeprecationReason

Re-exports DeprecationReason

DeprecationReason

Re-exports DeprecationReason

DeprecationReason

Re-exports DeprecationReason

DeprecationReason

Re-exports DeprecationReason

Dialog

Re-exports Dialog

Dialog

Re-exports Dialog

Dialog

Re-exports Dialog

Dialog

Re-exports Dialog

DialogRoot

Re-exports DialogRoot

DialogRoot

Re-exports DialogRoot

DialogRoot

Re-exports DialogRoot

DialogRoot

Re-exports DialogRoot

Directive

Re-exports Directive

Directive

Re-exports Directive

Directive

Re-exports Directive

Directive

Re-exports Directive

DirectiveIcon

Re-exports DirectiveIcon

DirectiveIcon

Re-exports DirectiveIcon

DocExplorer

Re-exports DocExplorer

DocExplorer

Re-exports DocExplorer

DocExplorer

Re-exports DocExplorer

DocExplorer

Re-exports DocExplorer

DocsFilledIcon

Re-exports DocsFilledIcon

DocsFilledIcon

Re-exports DocsFilledIcon

DocsIcon

Re-exports DocsIcon

DocsIcon

Re-exports DocsIcon

DropdownMenu

Re-exports DropdownMenu

DropdownMenu

Re-exports DropdownMenu

DropdownMenu

Re-exports DropdownMenu

DropdownMenu

Re-exports DropdownMenu

EditorContext

Re-exports EditorContext

EditorContext

Re-exports EditorContext

EditorContext

Re-exports EditorContext

EditorContext

Re-exports EditorContext

EditorContextProvider

Re-exports EditorContextProvider

EditorContextProvider

Re-exports EditorContextProvider

EditorContextProvider

Re-exports EditorContextProvider

EditorContextProvider

Re-exports EditorContextProvider

EditorContextProviderProps

Re-exports EditorContextProviderProps

EditorContextProviderProps

Re-exports EditorContextProviderProps

EditorContextProviderProps

Re-exports EditorContextProviderProps

EditorContextProviderProps

Re-exports EditorContextProviderProps

EditorContextType

Re-exports EditorContextType

EditorContextType

Re-exports EditorContextType

EditorContextType

Re-exports EditorContextType

EditorContextType

Re-exports EditorContextType

EnumValueIcon

Re-exports EnumValueIcon

EnumValueIcon

Re-exports EnumValueIcon

ExecuteButton

Re-exports ExecuteButton

ExecuteButton

Re-exports ExecuteButton

ExecuteButton

Re-exports ExecuteButton

ExecuteButton

Re-exports ExecuteButton

ExecutionContext

Re-exports ExecutionContext

ExecutionContext

Re-exports ExecutionContext

ExecutionContextProvider

Re-exports ExecutionContextProvider

ExecutionContextProvider

Re-exports ExecutionContextProvider

ExecutionContextProviderProps

Re-exports ExecutionContextProviderProps

ExecutionContextProviderProps

Re-exports ExecutionContextProviderProps

ExecutionContextType

Re-exports ExecutionContextType

ExecutionContextType

Re-exports ExecutionContextType

ExplorerContext

Re-exports ExplorerContext

ExplorerContext

Re-exports ExplorerContext

ExplorerContext

Re-exports ExplorerContext

ExplorerContext

Re-exports ExplorerContext

ExplorerContextProvider

Re-exports ExplorerContextProvider

ExplorerContextProvider

Re-exports ExplorerContextProvider

ExplorerContextProvider

Re-exports ExplorerContextProvider

ExplorerContextProvider

Re-exports ExplorerContextProvider

ExplorerContextProviderProps

Re-exports ExplorerContextProviderProps

ExplorerContextProviderProps

Re-exports ExplorerContextProviderProps

ExplorerContextProviderProps

Re-exports ExplorerContextProviderProps

ExplorerContextProviderProps

Re-exports ExplorerContextProviderProps

ExplorerContextType

Re-exports ExplorerContextType

ExplorerContextType

Re-exports ExplorerContextType

ExplorerContextType

Re-exports ExplorerContextType

ExplorerContextType

Re-exports ExplorerContextType

ExplorerFieldDef

Re-exports ExplorerFieldDef

ExplorerFieldDef

Re-exports ExplorerFieldDef

ExplorerFieldDef

Re-exports ExplorerFieldDef

ExplorerFieldDef

Re-exports ExplorerFieldDef

ExplorerNavStack

Re-exports ExplorerNavStack

ExplorerNavStack

Re-exports ExplorerNavStack

ExplorerNavStack

Re-exports ExplorerNavStack

ExplorerNavStack

Re-exports ExplorerNavStack

ExplorerNavStackItem

Re-exports ExplorerNavStackItem

ExplorerNavStackItem

Re-exports ExplorerNavStackItem

ExplorerNavStackItem

Re-exports ExplorerNavStackItem

ExplorerNavStackItem

Re-exports ExplorerNavStackItem

ExplorerSection

Re-exports ExplorerSection

ExplorerSection

Re-exports ExplorerSection

ExplorerSection

Re-exports ExplorerSection

ExplorerSection

Re-exports ExplorerSection

FieldDocumentation

Re-exports FieldDocumentation

FieldDocumentation

Re-exports FieldDocumentation

FieldDocumentation

Re-exports FieldDocumentation

FieldDocumentation

Re-exports FieldDocumentation

FieldIcon

Re-exports FieldIcon

FieldIcon

Re-exports FieldIcon

FieldLink

Re-exports FieldLink

FieldLink

Re-exports FieldLink

FieldLink

Re-exports FieldLink

FieldLink

Re-exports FieldLink

GraphiQLPlugin

Re-exports GraphiQLPlugin

GraphiQLPlugin

Re-exports GraphiQLPlugin

GraphiQLProvider

Re-exports GraphiQLProvider

GraphiQLProvider

Re-exports GraphiQLProvider

GraphiQLProviderProps

Re-exports GraphiQLProviderProps

GraphiQLProviderProps

Re-exports GraphiQLProviderProps

HISTORY_PLUGIN

Re-exports HISTORY_PLUGIN

HISTORY_PLUGIN

Re-exports HISTORY_PLUGIN

HeaderEditor

Re-exports HeaderEditor

HeaderEditor

Re-exports HeaderEditor

HeaderEditor

Re-exports HeaderEditor

HeaderEditor

Re-exports HeaderEditor

HeaderEditor

Re-exports HeaderEditor

HeaderEditor

Re-exports HeaderEditor

History

Re-exports History

History

Re-exports History

History

Re-exports History

History

Re-exports History

HistoryContext

Re-exports HistoryContext

HistoryContext

Re-exports HistoryContext

HistoryContext

Re-exports HistoryContext

HistoryContext

Re-exports HistoryContext

HistoryContextProvider

Re-exports HistoryContextProvider

HistoryContextProvider

Re-exports HistoryContextProvider

HistoryContextProvider

Re-exports HistoryContextProvider

HistoryContextProvider

Re-exports HistoryContextProvider

HistoryContextProviderProps

Re-exports HistoryContextProviderProps

HistoryContextProviderProps

Re-exports HistoryContextProviderProps

HistoryContextProviderProps

Re-exports HistoryContextProviderProps

HistoryContextProviderProps

Re-exports HistoryContextProviderProps

HistoryContextType

Re-exports HistoryContextType

HistoryContextType

Re-exports HistoryContextType

HistoryContextType

Re-exports HistoryContextType

HistoryContextType

Re-exports HistoryContextType

HistoryIcon

Re-exports HistoryIcon

HistoryIcon

Re-exports HistoryIcon

ImagePreview

Re-exports ImagePreview

ImagePreview

Re-exports ImagePreview

ImagePreview

Re-exports ImagePreview

ImagePreview

Re-exports ImagePreview

ImagePreview

Re-exports ImagePreview

ImagePreview

Re-exports ImagePreview

ImplementsIcon

Re-exports ImplementsIcon

ImplementsIcon

Re-exports ImplementsIcon

KeyMap

Re-exports KeyMap

KeyMap

Re-exports KeyMap

KeyMap

Re-exports KeyMap

KeyMap

Re-exports KeyMap

KeyboardShortcutIcon

Re-exports KeyboardShortcutIcon

KeyboardShortcutIcon

Re-exports KeyboardShortcutIcon

MagnifyingGlassIcon

Re-exports MagnifyingGlassIcon

MagnifyingGlassIcon

Re-exports MagnifyingGlassIcon

MarkdownContent

Re-exports MarkdownContent

MarkdownContent

Re-exports MarkdownContent

MarkdownContent

Re-exports MarkdownContent

MarkdownContent

Re-exports MarkdownContent

MergeIcon

Re-exports MergeIcon

MergeIcon

Re-exports MergeIcon

PenIcon

Re-exports PenIcon

PenIcon

Re-exports PenIcon

PlayIcon

Re-exports PlayIcon

PlayIcon

Re-exports PlayIcon

PluginContext

Re-exports PluginContext

PluginContext

Re-exports PluginContext

PluginContextProvider

Re-exports PluginContextProvider

PluginContextProvider

Re-exports PluginContextProvider

PluginContextProviderProps

Re-exports PluginContextProviderProps

PluginContextProviderProps

Re-exports PluginContextProviderProps

PluginContextType

Re-exports PluginContextType

PluginContextType

Re-exports PluginContextType

PlusIcon

Re-exports PlusIcon

PlusIcon

Re-exports PlusIcon

PrettifyIcon

Re-exports PrettifyIcon

PrettifyIcon

Re-exports PrettifyIcon

QueryEditor

Re-exports QueryEditor

QueryEditor

Re-exports QueryEditor

QueryEditor

Re-exports QueryEditor

QueryEditor

Re-exports QueryEditor

QueryEditor

Re-exports QueryEditor

QueryEditor

Re-exports QueryEditor

ReloadIcon

Re-exports ReloadIcon

ReloadIcon

Re-exports ReloadIcon

ResponseEditor

Re-exports ResponseEditor

ResponseEditor

Re-exports ResponseEditor

ResponseEditor

Re-exports ResponseEditor

ResponseEditor

Re-exports ResponseEditor

ResponseEditor

Re-exports ResponseEditor

ResponseEditor

Re-exports ResponseEditor

ResponseTooltipType

Re-exports ResponseTooltipType

ResponseTooltipType

Re-exports ResponseTooltipType

ResponseTooltipType

Re-exports ResponseTooltipType

ResponseTooltipType

Re-exports ResponseTooltipType

RootTypeIcon

Re-exports RootTypeIcon

RootTypeIcon

Re-exports RootTypeIcon

SchemaContext

Re-exports SchemaContext

SchemaContext

Re-exports SchemaContext

SchemaContextProvider

Re-exports SchemaContextProvider

SchemaContextProvider

Re-exports SchemaContextProvider

SchemaContextProviderProps

Re-exports SchemaContextProviderProps

SchemaContextProviderProps

Re-exports SchemaContextProviderProps

SchemaContextType

Re-exports SchemaContextType

SchemaContextType

Re-exports SchemaContextType

SchemaDocumentation

Re-exports SchemaDocumentation

SchemaDocumentation

Re-exports SchemaDocumentation

SchemaDocumentation

Re-exports SchemaDocumentation

SchemaDocumentation

Re-exports SchemaDocumentation

Search

Re-exports Search

Search

Re-exports Search

Search

Re-exports Search

Search

Re-exports Search

SettingsIcon

Re-exports SettingsIcon

SettingsIcon

Re-exports SettingsIcon

Spinner

Re-exports Spinner

Spinner

Re-exports Spinner

Spinner

Re-exports Spinner

Spinner

Re-exports Spinner

StarFilledIcon

Re-exports StarFilledIcon

StarFilledIcon

Re-exports StarFilledIcon

StarIcon

Re-exports StarIcon

StarIcon

Re-exports StarIcon

StopIcon

Re-exports StopIcon

StopIcon

Re-exports StopIcon

StorageContext

Re-exports StorageContext

StorageContext

Re-exports StorageContext

StorageContextProvider

Re-exports StorageContextProvider

StorageContextProvider

Re-exports StorageContextProvider

StorageContextProviderProps

Re-exports StorageContextProviderProps

StorageContextProviderProps

Re-exports StorageContextProviderProps

StorageContextType

Re-exports StorageContextType

StorageContextType

Re-exports StorageContextType

Tab

Re-exports Tab

Tab

Re-exports Tab

Tab

Re-exports Tab

Tab

Re-exports Tab

Tabs

Re-exports Tabs

Tabs

Re-exports Tabs

Tabs

Re-exports Tabs

Tabs

Re-exports Tabs

TabsState

Re-exports TabsState

TabsState

Re-exports TabsState

TabsState

Re-exports TabsState

TabsState

Re-exports TabsState

Theme

Re-exports Theme

Theme

Re-exports Theme

ToolbarButton

Re-exports ToolbarButton

ToolbarButton

Re-exports ToolbarButton

ToolbarButton

Re-exports ToolbarButton

ToolbarButton

Re-exports ToolbarButton

ToolbarMenu

Re-exports ToolbarMenu

ToolbarMenu

Re-exports ToolbarMenu

ToolbarMenu

Re-exports ToolbarMenu

ToolbarMenu

Re-exports ToolbarMenu

Tooltip

Re-exports Tooltip

Tooltip

Re-exports Tooltip

Tooltip

Re-exports Tooltip

Tooltip

Re-exports Tooltip

TooltipRoot

Re-exports TooltipRoot

TooltipRoot

Re-exports TooltipRoot

TooltipRoot

Re-exports TooltipRoot

TooltipRoot

Re-exports TooltipRoot

TrashIcon

Re-exports TrashIcon

TrashIcon

Re-exports TrashIcon

TypeDocumentation

Re-exports TypeDocumentation

TypeDocumentation

Re-exports TypeDocumentation

TypeDocumentation

Re-exports TypeDocumentation

TypeDocumentation

Re-exports TypeDocumentation

TypeIcon

Re-exports TypeIcon

TypeIcon

Re-exports TypeIcon

TypeLink

Re-exports TypeLink

TypeLink

Re-exports TypeLink

TypeLink

Re-exports TypeLink

TypeLink

Re-exports TypeLink

UnStyledButton

Re-exports UnStyledButton

UnStyledButton

Re-exports UnStyledButton

UnStyledButton

Re-exports UnStyledButton

UnStyledButton

Re-exports UnStyledButton

UseHeaderEditorArgs

Re-exports UseHeaderEditorArgs

UseHeaderEditorArgs

Re-exports UseHeaderEditorArgs

UseHeaderEditorArgs

Re-exports UseHeaderEditorArgs

UseHeaderEditorArgs

Re-exports UseHeaderEditorArgs

UseQueryEditorArgs

Re-exports UseQueryEditorArgs

UseQueryEditorArgs

Re-exports UseQueryEditorArgs

UseQueryEditorArgs

Re-exports UseQueryEditorArgs

UseQueryEditorArgs

Re-exports UseQueryEditorArgs

UseResponseEditorArgs

Re-exports UseResponseEditorArgs

UseResponseEditorArgs

Re-exports UseResponseEditorArgs

UseResponseEditorArgs

Re-exports UseResponseEditorArgs

UseResponseEditorArgs

Re-exports UseResponseEditorArgs

UseVariableEditorArgs

Re-exports UseVariableEditorArgs

UseVariableEditorArgs

Re-exports UseVariableEditorArgs

UseVariableEditorArgs

Re-exports UseVariableEditorArgs

UseVariableEditorArgs

Re-exports UseVariableEditorArgs

VariableEditor

Re-exports VariableEditor

VariableEditor

Re-exports VariableEditor

VariableEditor

Re-exports VariableEditor

VariableEditor

Re-exports VariableEditor

VariableEditor

Re-exports VariableEditor

VariableEditor

Re-exports VariableEditor

WriteableEditorProps

Re-exports WriteableEditorProps

WriteableEditorProps

Re-exports WriteableEditorProps

WriteableEditorProps

Re-exports WriteableEditorProps

WriteableEditorProps

Re-exports WriteableEditorProps

isMacOs

Re-exports isMacOs

isMacOs

Re-exports isMacOs

useAutoCompleteLeafs

Re-exports useAutoCompleteLeafs

useAutoCompleteLeafs

Re-exports useAutoCompleteLeafs

useAutoCompleteLeafs

Re-exports useAutoCompleteLeafs

useAutoCompleteLeafs

Re-exports useAutoCompleteLeafs

useCopyQuery

Re-exports useCopyQuery

useCopyQuery

Re-exports useCopyQuery

useCopyQuery

Re-exports useCopyQuery

useCopyQuery

Re-exports useCopyQuery

useDragResize

Re-exports useDragResize

useDragResize

Re-exports useDragResize

useEditorContext

Re-exports useEditorContext

useEditorContext

Re-exports useEditorContext

useEditorContext

Re-exports useEditorContext

useEditorContext

Re-exports useEditorContext

useEditorState

Re-exports useEditorState

useEditorState

Re-exports useEditorState

useEditorState

Re-exports useEditorState

useEditorState

Re-exports useEditorState

useExecutionContext

Re-exports useExecutionContext

useExecutionContext

Re-exports useExecutionContext

useExplorerContext

Re-exports useExplorerContext

useExplorerContext

Re-exports useExplorerContext

useExplorerContext

Re-exports useExplorerContext

useExplorerContext

Re-exports useExplorerContext

useHeaderEditor

Re-exports useHeaderEditor

useHeaderEditor

Re-exports useHeaderEditor

useHeaderEditor

Re-exports useHeaderEditor

useHeaderEditor

Re-exports useHeaderEditor

useHeadersEditorState

Re-exports useHeadersEditorState

useHeadersEditorState

Re-exports useHeadersEditorState

useHeadersEditorState

Re-exports useHeadersEditorState

useHeadersEditorState

Re-exports useHeadersEditorState

useHistoryContext

Re-exports useHistoryContext

useHistoryContext

Re-exports useHistoryContext

useHistoryContext

Re-exports useHistoryContext

useHistoryContext

Re-exports useHistoryContext

useMergeQuery

Re-exports useMergeQuery

useMergeQuery

Re-exports useMergeQuery

useMergeQuery

Re-exports useMergeQuery

useMergeQuery

Re-exports useMergeQuery

useOperationsEditorState

Re-exports useOperationsEditorState

useOperationsEditorState

Re-exports useOperationsEditorState

useOperationsEditorState

Re-exports useOperationsEditorState

useOperationsEditorState

Re-exports useOperationsEditorState

useOptimisticState

Re-exports useOptimisticState

useOptimisticState

Re-exports useOptimisticState

useOptimisticState

Re-exports useOptimisticState

useOptimisticState

Re-exports useOptimisticState

usePluginContext

Re-exports usePluginContext

usePluginContext

Re-exports usePluginContext

usePrettifyEditors

Re-exports usePrettifyEditors

usePrettifyEditors

Re-exports usePrettifyEditors

usePrettifyEditors

Re-exports usePrettifyEditors

usePrettifyEditors

Re-exports usePrettifyEditors

useQueryEditor

Re-exports useQueryEditor

useQueryEditor

Re-exports useQueryEditor

useQueryEditor

Re-exports useQueryEditor

useQueryEditor

Re-exports useQueryEditor

useResponseEditor

Re-exports useResponseEditor

useResponseEditor

Re-exports useResponseEditor

useResponseEditor

Re-exports useResponseEditor

useResponseEditor

Re-exports useResponseEditor

useSchemaContext

Re-exports useSchemaContext

useSchemaContext

Re-exports useSchemaContext

useStorageContext

Re-exports useStorageContext

useStorageContext

Re-exports useStorageContext

useTheme

Re-exports useTheme

useTheme

Re-exports useTheme

useVariableEditor

Re-exports useVariableEditor

useVariableEditor

Re-exports useVariableEditor

useVariableEditor

Re-exports useVariableEditor

useVariableEditor

Re-exports useVariableEditor

useVariablesEditorState

Re-exports useVariablesEditorState

useVariablesEditorState

Re-exports useVariablesEditorState

useVariablesEditorState

Re-exports useVariablesEditorState

useVariablesEditorState

Re-exports useVariablesEditorState

Type aliases

CodeMirrorEditor

CodeMirrorEditor: Editor & { options?: any }

CodeMirrorEditor

CodeMirrorEditor: Editor & { options?: any }

CodeMirrorEditorWithOperationFacts

CodeMirrorEditorWithOperationFacts: CodeMirrorEditor & { documentAST: DocumentNode | null; operationName: string | null; operations: OperationDefinitionNode[] | null; variableToType: VariableToType | null }

CodeMirrorEditorWithOperationFacts

CodeMirrorEditorWithOperationFacts: CodeMirrorEditor & { documentAST: DocumentNode | null; operationName: string | null; operations: OperationDefinitionNode[] | null; variableToType: VariableToType | null }

CodeMirrorType

CodeMirrorType: CodeMirror

CodeMirrorType

CodeMirrorType: CodeMirror

CommonEditorProps

CommonEditorProps: { editorTheme?: undefined | string; keyMap?: KeyMap }

Type declaration

CommonEditorProps

CommonEditorProps: { editorTheme?: undefined | string; keyMap?: KeyMap }

Type declaration

EditorContextProviderProps

EditorContextProviderProps: { children: ReactNode; defaultHeaders?: undefined | string; defaultQuery?: undefined | string; defaultTabs?: TabDefinition[]; externalFragments?: string | FragmentDefinitionNode[]; headers?: undefined | string; query?: undefined | string; response?: undefined | string; shouldPersistHeaders?: undefined | false | true; validationRules?: ValidationRule[]; variables?: undefined | string; onEditOperationName?: any; onTabChange?: any }

Type declaration

  • children: ReactNode
  • Optional defaultHeaders?: undefined | string

    Headers to be set when opening a new tab

  • Optional defaultQuery?: undefined | string

    The initial contents of the query editor when loading GraphiQL and there is no other source for the editor state. Other sources can be:

    • The query prop
    • The value persisted in storage These default contents will only be used for the first tab. When opening more tabs the query editor will start out empty.
  • Optional defaultTabs?: TabDefinition[]

    This prop can be used to define the default set of tabs, with their queries, variables, and headers. It will be used as default only if there is no tab state persisted in storage.

    example
    <GraphiQL
      defaultTabs={[
        { query: 'query myExampleQuery {}' },
        { query: '{ id }' }
      ]}
    />
  • Optional externalFragments?: string | FragmentDefinitionNode[]

    With this prop you can pass so-called "external" fragments that will be included in the query document (depending on usage). You can either pass the fragments using SDL (passing a string) or you can pass a list of FragmentDefinitionNode objects.

  • Optional headers?: undefined | string

    This prop can be used to set the contents of the headers editor. Every time this prop changes, the contents of the headers editor are replaced. Note that the editor contents can be changed in between these updates by typing in the editor.

  • Optional query?: undefined | string

    This prop can be used to set the contents of the query editor. Every time this prop changes, the contents of the query editor are replaced. Note that the editor contents can be changed in between these updates by typing in the editor.

  • Optional response?: undefined | string

    This prop can be used to set the contents of the response editor. Every time this prop changes, the contents of the response editor are replaced. Note that the editor contents can change in between these updates by executing queries that will show a response.

  • Optional shouldPersistHeaders?: undefined | false | true

    This prop toggles if the contents of the headers editor are persisted in storage.

    default

    false

  • Optional validationRules?: ValidationRule[]

    This prop accepts custom validation rules for GraphQL documents that are run against the contents of the query editor (in addition to the rules that are specified in the GraphQL spec).

  • Optional variables?: undefined | string

    This prop can be used to set the contents of the variables editor. Every time this prop changes, the contents of the variables editor are replaced. Note that the editor contents can be changed in between these updates by typing in the editor.

  • onEditOperationName: function
    • onEditOperationName(operationName: string): void
    • Invoked when the operation name changes. Possible triggers are:

      • Editing the contents of the query editor
      • Selecting a operation for execution in a document that contains multiple operation definitions

      Parameters

      • operationName: string

        The operation name after it has been changed.

      Returns void

  • onTabChange: function
    • Invoked when the state of the tabs changes. Possible triggers are:

      • Updating any editor contents inside the currently active tab
      • Adding a tab
      • Switching to a different tab
      • Closing a tab

      Parameters

      • tabState: TabsState

        The tabs state after it has been updated.

      Returns void

EditorContextProviderProps

EditorContextProviderProps: { children: ReactNode; defaultHeaders?: undefined | string; defaultQuery?: undefined | string; defaultTabs?: TabDefinition[]; externalFragments?: string | FragmentDefinitionNode[]; headers?: undefined | string; query?: undefined | string; response?: undefined | string; shouldPersistHeaders?: undefined | false | true; validationRules?: ValidationRule[]; variables?: undefined | string; onEditOperationName?: any; onTabChange?: any }

Type declaration

  • children: ReactNode
  • Optional defaultHeaders?: undefined | string

    Headers to be set when opening a new tab

  • Optional defaultQuery?: undefined | string

    The initial contents of the query editor when loading GraphiQL and there is no other source for the editor state. Other sources can be:

    • The query prop
    • The value persisted in storage These default contents will only be used for the first tab. When opening more tabs the query editor will start out empty.
  • Optional defaultTabs?: TabDefinition[]

    This prop can be used to define the default set of tabs, with their queries, variables, and headers. It will be used as default only if there is no tab state persisted in storage.

    example
    <GraphiQL
      defaultTabs={[
        { query: 'query myExampleQuery {}' },
        { query: '{ id }' }
      ]}
    />
  • Optional externalFragments?: string | FragmentDefinitionNode[]

    With this prop you can pass so-called "external" fragments that will be included in the query document (depending on usage). You can either pass the fragments using SDL (passing a string) or you can pass a list of FragmentDefinitionNode objects.

  • Optional headers?: undefined | string

    This prop can be used to set the contents of the headers editor. Every time this prop changes, the contents of the headers editor are replaced. Note that the editor contents can be changed in between these updates by typing in the editor.

  • Optional query?: undefined | string

    This prop can be used to set the contents of the query editor. Every time this prop changes, the contents of the query editor are replaced. Note that the editor contents can be changed in between these updates by typing in the editor.

  • Optional response?: undefined | string

    This prop can be used to set the contents of the response editor. Every time this prop changes, the contents of the response editor are replaced. Note that the editor contents can change in between these updates by executing queries that will show a response.

  • Optional shouldPersistHeaders?: undefined | false | true

    This prop toggles if the contents of the headers editor are persisted in storage.

    default

    false

  • Optional validationRules?: ValidationRule[]

    This prop accepts custom validation rules for GraphQL documents that are run against the contents of the query editor (in addition to the rules that are specified in the GraphQL spec).

  • Optional variables?: undefined | string

    This prop can be used to set the contents of the variables editor. Every time this prop changes, the contents of the variables editor are replaced. Note that the editor contents can be changed in between these updates by typing in the editor.

  • onEditOperationName: function
    • onEditOperationName(operationName: string): void
    • Invoked when the operation name changes. Possible triggers are:

      • Editing the contents of the query editor
      • Selecting a operation for execution in a document that contains multiple operation definitions

      Parameters

      • operationName: string

        The operation name after it has been changed.

      Returns void

  • onTabChange: function
    • Invoked when the state of the tabs changes. Possible triggers are:

      • Updating any editor contents inside the currently active tab
      • Adding a tab
      • Switching to a different tab
      • Closing a tab

      Parameters

      • tabState: TabsState

        The tabs state after it has been updated.

      Returns void

EditorContextType

EditorContextType: TabsState & { externalFragments: Map<string, FragmentDefinitionNode>; headerEditor: CodeMirrorEditor | null; initialHeaders: string; initialQuery: string; initialResponse: string; initialVariables: string; queryEditor: CodeMirrorEditorWithOperationFacts | null; responseEditor: CodeMirrorEditor | null; shouldPersistHeaders: boolean; validationRules: ValidationRule[]; variableEditor: CodeMirrorEditor | null; addTab: any; changeTab: any; closeTab: any; moveTab: any; setHeaderEditor: any; setOperationName: any; setQueryEditor: any; setResponseEditor: any; setShouldPersistHeaders: any; setVariableEditor: any; updateActiveTabValues: any }

EditorContextType

EditorContextType: TabsState & { externalFragments: Map<string, FragmentDefinitionNode>; headerEditor: CodeMirrorEditor | null; initialHeaders: string; initialQuery: string; initialResponse: string; initialVariables: string; queryEditor: CodeMirrorEditorWithOperationFacts | null; responseEditor: CodeMirrorEditor | null; shouldPersistHeaders: boolean; validationRules: ValidationRule[]; variableEditor: CodeMirrorEditor | null; addTab: any; changeTab: any; closeTab: any; moveTab: any; setHeaderEditor: any; setOperationName: any; setQueryEditor: any; setResponseEditor: any; setShouldPersistHeaders: any; setVariableEditor: any; updateActiveTabValues: any }

ExecutionContextProviderProps

ExecutionContextProviderProps: Pick<UseAutoCompleteLeafsArgs, "getDefaultFieldNames"> & { children: ReactNode; fetcher: Fetcher; operationName?: undefined | string }

ExecutionContextProviderProps

ExecutionContextProviderProps: Pick<UseAutoCompleteLeafsArgs, "getDefaultFieldNames"> & { children: ReactNode; fetcher: Fetcher; operationName?: undefined | string }

ExecutionContextType

ExecutionContextType: { isFetching: boolean; isSubscribed: boolean; operationName: string | null; run: any; stop: any }

Type declaration

  • isFetching: boolean

    If there is currently a GraphQL request in-flight. For multi-part requests like subscriptions, this will be true while fetching the first partial response and false while fetching subsequent batches.

  • isSubscribed: boolean

    If there is currently a GraphQL request in-flight. For multi-part requests like subscriptions, this will be true until the last batch has been fetched or the connection is closed from the client.

  • operationName: string | null

    The operation name that will be sent with all GraphQL requests.

  • run: function
    • run(): void
    • Start a GraphQL requests based of the current editor contents.

      Returns void

  • stop: function
    • stop(): void
    • Stop the GraphQL request that is currently in-flight.

      Returns void

ExecutionContextType

ExecutionContextType: { isFetching: boolean; isSubscribed: boolean; operationName: string | null; run: any; stop: any }

Type declaration

  • isFetching: boolean

    If there is currently a GraphQL request in-flight. For multi-part requests like subscriptions, this will be true while fetching the first partial response and false while fetching subsequent batches.

  • isSubscribed: boolean

    If there is currently a GraphQL request in-flight. For multi-part requests like subscriptions, this will be true until the last batch has been fetched or the connection is closed from the client.

  • operationName: string | null

    The operation name that will be sent with all GraphQL requests.

  • run: function
    • run(): void
  • stop: function
    • stop(): void

ExplorerContextProviderProps

ExplorerContextProviderProps: { children: ReactNode }

Type declaration

  • children: ReactNode

ExplorerContextProviderProps

ExplorerContextProviderProps: { children: ReactNode }

Type declaration

  • children: ReactNode

ExplorerContextType

ExplorerContextType: { explorerNavStack: ExplorerNavStack; pop: any; push: any; reset: any }

Type declaration

  • explorerNavStack: ExplorerNavStack

    A stack of navigation items. The last item in the list is the current one. This list always contains at least one item.

  • pop: function
    • pop(): void
    • Pop the last item from the navigation stack.

      Returns void

  • push: function
    • Push an item to the navigation stack.

      Parameters

      Returns void

  • reset: function
    • reset(): void
    • Reset the navigation stack to its initial state, this will remove all but the initial stack item.

      Returns void

ExplorerContextType

ExplorerContextType: { explorerNavStack: ExplorerNavStack; pop: any; push: any; reset: any }

Type declaration

ExplorerFieldDef

ExplorerFieldDef: GraphQLField<{}, {}, {}> | GraphQLInputField | GraphQLArgument

ExplorerFieldDef

ExplorerFieldDef: GraphQLField<{}, {}, {}> | GraphQLInputField | GraphQLArgument

ExplorerNavStack

ExplorerNavStack: [ExplorerNavStackItem, { def?: GraphQLNamedType | ExplorerFieldDef; name: string }]

ExplorerNavStack

ExplorerNavStack: [ExplorerNavStackItem, { def?: GraphQLNamedType | ExplorerFieldDef; name: string }]

ExplorerNavStackItem

ExplorerNavStackItem: { def?: GraphQLNamedType | ExplorerFieldDef; name: string }

Type declaration

  • Optional def?: GraphQLNamedType | ExplorerFieldDef

    The definition object of the item, this can be a named type, a field, an input field or an argument.

  • name: string

    The name of the item.

ExplorerNavStackItem

ExplorerNavStackItem: { def?: GraphQLNamedType | ExplorerFieldDef; name: string }

Type declaration

  • Optional def?: GraphQLNamedType | ExplorerFieldDef

    The definition object of the item, this can be a named type, a field, an input field or an argument.

  • name: string

    The name of the item.

GraphiQLPlugin

GraphiQLPlugin: { content: ComponentType; icon: ComponentType; title: string }

Type declaration

  • content: ComponentType

    A component that renders content into the plugin pane.

  • icon: ComponentType

    A component that renders an icon that will be shown inside a button that toggles the plugin visibility.

  • title: string

    The unique title of the plugin. If two plugins are present with the same title the provider component will throw an error.

GraphiQLPlugin

GraphiQLPlugin: { content: ComponentType; icon: ComponentType; title: string }

Type declaration

  • content: ComponentType

    A component that renders content into the plugin pane.

  • icon: ComponentType

    A component that renders an icon that will be shown inside a button that toggles the plugin visibility.

  • title: string

    The unique title of the plugin. If two plugins are present with the same title the provider component will throw an error.

GraphiQLProviderProps

GraphiQLProviderProps

HistoryContextProviderProps

HistoryContextProviderProps: { children: ReactNode; maxHistoryLength?: undefined | number }

Type declaration

  • children: ReactNode
  • Optional maxHistoryLength?: undefined | number

    The maximum number of executed operations to store.

    default

    20

HistoryContextProviderProps

HistoryContextProviderProps: { children: ReactNode; maxHistoryLength?: undefined | number }

Type declaration

  • children: ReactNode
  • Optional maxHistoryLength?: undefined | number

    The maximum number of executed operations to store.

    default

    20

HistoryContextType

HistoryContextType: { items: readonly QueryStoreItem[]; addToHistory: any; deleteFromHistory: any; editLabel: any; setActive: any; toggleFavorite: any }

Type declaration

  • items: readonly QueryStoreItem[]

    The list of history items.

  • addToHistory: function
    • addToHistory(operation: { headers?: undefined | string; operationName?: undefined | string; query?: undefined | string; variables?: undefined | string }): void
    • Add an operation to the history.

      Parameters

      • operation: { headers?: undefined | string; operationName?: undefined | string; query?: undefined | string; variables?: undefined | string }

        The operation that was executed, consisting of the query, variables, headers, and operation name.

        • Optional headers?: undefined | string
        • Optional operationName?: undefined | string
        • Optional query?: undefined | string
        • Optional variables?: undefined | string

      Returns void

  • deleteFromHistory: function
    • deleteFromHistory(args: QueryStoreItem, clearFavorites?: undefined | false | true): void
    • Delete an operation from the history.

      Parameters

      • args: QueryStoreItem

        The operation that was executed, consisting of the query, variables, headers, and operation name.

      • Optional clearFavorites: undefined | false | true

        This is only if you press the 'clear' button

      Returns void

  • editLabel: function
    • editLabel(args: { favorite?: undefined | false | true; headers?: undefined | string; label?: undefined | string; operationName?: undefined | string; query?: undefined | string; variables?: undefined | string }, index?: undefined | number): void
    • Change the custom label of an item from the history.

      Parameters

      • args: { favorite?: undefined | false | true; headers?: undefined | string; label?: undefined | string; operationName?: undefined | string; query?: undefined | string; variables?: undefined | string }

        An object containing the label (undefined if it should be unset) and properties that identify the history item that the label should be applied to. (This can result in the label being applied to multiple history items.)

        • Optional favorite?: undefined | false | true
        • Optional headers?: undefined | string
        • Optional label?: undefined | string
        • Optional operationName?: undefined | string
        • Optional query?: undefined | string
        • Optional variables?: undefined | string
      • Optional index: undefined | number

        Index to edit. Without it, will look for the first index matching the operation, which may lead to misleading results if multiple items have the same label

      Returns void

  • setActive: function
    • If you need to know when an item in history is set as active to customize your application.

      Parameters

      Returns void

  • toggleFavorite: function
    • toggleFavorite(args: { favorite?: undefined | false | true; headers?: undefined | string; label?: undefined | string; operationName?: undefined | string; query?: undefined | string; variables?: undefined | string }): void
    • Toggle the favorite state of an item from the history.

      Parameters

      • args: { favorite?: undefined | false | true; headers?: undefined | string; label?: undefined | string; operationName?: undefined | string; query?: undefined | string; variables?: undefined | string }

        An object containing the favorite state (undefined if it should be unset) and properties that identify the history item that the label should be applied to. (This can result in the label being applied to multiple history items.)

        • Optional favorite?: undefined | false | true
        • Optional headers?: undefined | string
        • Optional label?: undefined | string
        • Optional operationName?: undefined | string
        • Optional query?: undefined | string
        • Optional variables?: undefined | string

      Returns void

HistoryContextType

HistoryContextType: { items: readonly QueryStoreItem[]; addToHistory: any; deleteFromHistory: any; editLabel: any; setActive: any; toggleFavorite: any }

Type declaration

  • items: readonly QueryStoreItem[]

    The list of history items.

  • addToHistory: function
    • addToHistory(operation: { headers?: undefined | string; operationName?: undefined | string; query?: undefined | string; variables?: undefined | string }): void
    • Add an operation to the history.

      Parameters

      • operation: { headers?: undefined | string; operationName?: undefined | string; query?: undefined | string; variables?: undefined | string }

        The operation that was executed, consisting of the query, variables, headers, and operation name.

        • Optional headers?: undefined | string
        • Optional operationName?: undefined | string
        • Optional query?: undefined | string
        • Optional variables?: undefined | string

      Returns void

  • deleteFromHistory: function
    • deleteFromHistory(args: QueryStoreItem, clearFavorites?: undefined | false | true): void
    • Delete an operation from the history.

      Parameters

      • args: QueryStoreItem

        The operation that was executed, consisting of the query, variables, headers, and operation name.

      • Optional clearFavorites: undefined | false | true

        This is only if you press the 'clear' button

      Returns void

  • editLabel: function
    • editLabel(args: { favorite?: undefined | false | true; headers?: undefined | string; label?: undefined | string; operationName?: undefined | string; query?: undefined | string; variables?: undefined | string }, index?: undefined | number): void
    • Change the custom label of an item from the history.

      Parameters

      • args: { favorite?: undefined | false | true; headers?: undefined | string; label?: undefined | string; operationName?: undefined | string; query?: undefined | string; variables?: undefined | string }

        An object containing the label (undefined if it should be unset) and properties that identify the history item that the label should be applied to. (This can result in the label being applied to multiple history items.)

        • Optional favorite?: undefined | false | true
        • Optional headers?: undefined | string
        • Optional label?: undefined | string
        • Optional operationName?: undefined | string
        • Optional query?: undefined | string
        • Optional variables?: undefined | string
      • Optional index: undefined | number

        Index to edit. Without it, will look for the first index matching the operation, which may lead to misleading results if multiple items have the same label

      Returns void

  • setActive: function
  • toggleFavorite: function
    • toggleFavorite(args: { favorite?: undefined | false | true; headers?: undefined | string; label?: undefined | string; operationName?: undefined | string; query?: undefined | string; variables?: undefined | string }): void
    • Toggle the favorite state of an item from the history.

      Parameters

      • args: { favorite?: undefined | false | true; headers?: undefined | string; label?: undefined | string; operationName?: undefined | string; query?: undefined | string; variables?: undefined | string }

        An object containing the favorite state (undefined if it should be unset) and properties that identify the history item that the label should be applied to. (This can result in the label being applied to multiple history items.)

        • Optional favorite?: undefined | false | true
        • Optional headers?: undefined | string
        • Optional label?: undefined | string
        • Optional operationName?: undefined | string
        • Optional query?: undefined | string
        • Optional variables?: undefined | string

      Returns void

InitialState

InitialState: string | (() => string)

InitialState

InitialState: string | (() => string)

KeyMap

KeyMap: "sublime" | "emacs" | "vim"

KeyMap

KeyMap: "sublime" | "emacs" | "vim"

PluginContextProviderProps

PluginContextProviderProps: { children: ReactNode; plugins?: GraphiQLPlugin[]; visiblePlugin?: GraphiQLPlugin | string; onTogglePluginVisibility?: any }

Type declaration

  • children: ReactNode
  • Optional plugins?: GraphiQLPlugin[]

    This props accepts a list of plugins that will be shown in addition to the built-in ones (the doc explorer and the history).

  • Optional visiblePlugin?: GraphiQLPlugin | string

    This prop can be used to set the visibility state of plugins. Every time this prop changes, the visibility state will be overridden. Note that the visibility state can change in between these updates, for example by calling the setVisiblePlugin function provided by the context.

  • onTogglePluginVisibility: function
    • onTogglePluginVisibility(visiblePlugin: GraphiQLPlugin | null): void
    • Invoked when the visibility state of any plugin changes.

      Parameters

      • visiblePlugin: GraphiQLPlugin | null

        The plugin object that is now visible. If no plugin is visible, the function will be invoked with null.

      Returns void

PluginContextProviderProps

PluginContextProviderProps: { children: ReactNode; plugins?: GraphiQLPlugin[]; visiblePlugin?: GraphiQLPlugin | string; onTogglePluginVisibility?: any }

Type declaration

  • children: ReactNode
  • Optional plugins?: GraphiQLPlugin[]

    This props accepts a list of plugins that will be shown in addition to the built-in ones (the doc explorer and the history).

  • Optional visiblePlugin?: GraphiQLPlugin | string

    This prop can be used to set the visibility state of plugins. Every time this prop changes, the visibility state will be overridden. Note that the visibility state can change in between these updates, for example by calling the setVisiblePlugin function provided by the context.

  • onTogglePluginVisibility: function
    • onTogglePluginVisibility(visiblePlugin: GraphiQLPlugin | null): void
    • Invoked when the visibility state of any plugin changes.

      Parameters

      • visiblePlugin: GraphiQLPlugin | null

        The plugin object that is now visible. If no plugin is visible, the function will be invoked with null.

      Returns void

PluginContextType

PluginContextType: { plugins: GraphiQLPlugin[]; visiblePlugin: GraphiQLPlugin | null; setVisiblePlugin: any }

Type declaration

  • plugins: GraphiQLPlugin[]

    A list of all current plugins, including the built-in ones (the doc explorer and the history).

  • visiblePlugin: GraphiQLPlugin | null

    The plugin which is currently visible.

  • setVisiblePlugin: function
    • Defines the plugin which is currently visible.

      Parameters

      • plugin: GraphiQLPlugin | string | null

        The plugin that should become visible. You can either pass the plugin object (has to be referentially equal to the one passed as prop) or the plugin title as string. If null is passed, no plugin will be visible.

      Returns void

PluginContextType

PluginContextType: { plugins: GraphiQLPlugin[]; visiblePlugin: GraphiQLPlugin | null; setVisiblePlugin: any }

Type declaration

  • plugins: GraphiQLPlugin[]

    A list of all current plugins, including the built-in ones (the doc explorer and the history).

  • visiblePlugin: GraphiQLPlugin | null

    The plugin which is currently visible.

  • setVisiblePlugin: function
    • Defines the plugin which is currently visible.

      Parameters

      • plugin: GraphiQLPlugin | string | null

        The plugin that should become visible. You can either pass the plugin object (has to be referentially equal to the one passed as prop) or the plugin title as string. If null is passed, no plugin will be visible.

      Returns void

ResponseTooltipType

ResponseTooltipType: ComponentType<{ pos: Position; token: Token }>

ResponseTooltipType

ResponseTooltipType: ComponentType<{ pos: Position; token: Token }>

SchemaContextProviderProps

SchemaContextProviderProps: { children: ReactNode; dangerouslyAssumeSchemaIsValid?: undefined | false | true; fetcher: Fetcher; schema?: GraphQLSchema | IntrospectionQuery | null; onSchemaChange?: any } & IntrospectionArgs

SchemaContextProviderProps

SchemaContextProviderProps: { children: ReactNode; dangerouslyAssumeSchemaIsValid?: undefined | false | true; fetcher: Fetcher; schema?: GraphQLSchema | IntrospectionQuery | null; onSchemaChange?: any } & IntrospectionArgs

SchemaContextType

SchemaContextType: { fetchError: string | null; isFetching: boolean; schema: MaybeGraphQLSchema; validationErrors: readonly GraphQLError[]; introspect: any }

Type declaration

  • fetchError: string | null

    Stores an error raised during introspecting or building the GraphQL schema from the introspection result.

  • isFetching: boolean

    If there currently is an introspection request in-flight.

  • schema: MaybeGraphQLSchema

    The current GraphQL schema.

  • validationErrors: readonly GraphQLError[]

    A list of errors from validating the current GraphQL schema. The schema is valid if and only if this list is empty.

  • introspect: function
    • introspect(): void
    • Trigger building the GraphQL schema. This might trigger an introspection request if no schema is passed via props and if using a schema is not explicitly disabled by passing null as value for the schema prop. If there is a schema (either fetched using introspection or passed via props) it will be validated, unless this is explicitly skipped using the dangerouslyAssumeSchemaIsValid prop.

      Returns void

SchemaContextType

SchemaContextType: { fetchError: string | null; isFetching: boolean; schema: MaybeGraphQLSchema; validationErrors: readonly GraphQLError[]; introspect: any }

Type declaration

  • fetchError: string | null

    Stores an error raised during introspecting or building the GraphQL schema from the introspection result.

  • isFetching: boolean

    If there currently is an introspection request in-flight.

  • schema: MaybeGraphQLSchema

    The current GraphQL schema.

  • validationErrors: readonly GraphQLError[]

    A list of errors from validating the current GraphQL schema. The schema is valid if and only if this list is empty.

  • introspect: function
    • introspect(): void
    • Trigger building the GraphQL schema. This might trigger an introspection request if no schema is passed via props and if using a schema is not explicitly disabled by passing null as value for the schema prop. If there is a schema (either fetched using introspection or passed via props) it will be validated, unless this is explicitly skipped using the dangerouslyAssumeSchemaIsValid prop.

      Returns void

StorageContextProviderProps

StorageContextProviderProps: { children: ReactNode; storage?: Storage }

Type declaration

  • children: ReactNode
  • Optional storage?: Storage

    Provide a custom storage API.

    default

    localStorage

    see

    API docs for details on the required interface.

StorageContextProviderProps

StorageContextProviderProps: { children: ReactNode; storage?: Storage }

Type declaration

  • children: ReactNode
  • Optional storage?: Storage

    Provide a custom storage API.

    default

    localStorage

    see

    API docs for details on the required interface.

StorageContextType

StorageContextType: StorageAPI

StorageContextType

StorageContextType: StorageAPI

TabDefinition

TabDefinition: { headers?: string | null; query: string | null; variables?: string | null }

Type declaration

  • Optional headers?: string | null

    The contents of the headers editor of this tab.

  • query: string | null

    The contents of the query editor of this tab.

  • Optional variables?: string | null

    The contents of the variable editor of this tab.

TabDefinition

TabDefinition: { headers?: string | null; query: string | null; variables?: string | null }

Type declaration

  • Optional headers?: string | null

    The contents of the headers editor of this tab.

  • query: string | null

    The contents of the query editor of this tab.

  • Optional variables?: string | null

    The contents of the variable editor of this tab.

TabState

TabState: TabDefinition & { hash: string; id: string; operationName: string | null; response: string | null; title: string }

This object describes the state of a single tab.

TabState

TabState: TabDefinition & { hash: string; id: string; operationName: string | null; response: string | null; title: string }

This object describes the state of a single tab.

TabsState

TabsState: { activeTabIndex: number; tabs: TabState[] }

This object describes the state of all tabs.

Type declaration

  • activeTabIndex: number

    The index of the currently active tab with regards to the tabs list of this object.

  • tabs: TabState[]

    A list of state objects for each tab.

TabsState

TabsState: { activeTabIndex: number; tabs: TabState[] }

This object describes the state of all tabs.

Type declaration

  • activeTabIndex: number

    The index of the currently active tab with regards to the tabs list of this object.

  • tabs: TabState[]

    A list of state objects for each tab.

Theme

Theme: "light" | "dark" | null

The value null semantically means that the user does not explicitly choose any theme, so we use the system default.

Theme

Theme: "light" | "dark" | null

The value null semantically means that the user does not explicitly choose any theme, so we use the system default.

UseAutoCompleteLeafsArgs

UseAutoCompleteLeafsArgs: { caller?: Function; getDefaultFieldNames?: GetDefaultFieldNamesFn }

Type declaration

  • Optional caller?: Function

    This is only meant to be used internally in @graphiql/react.

  • Optional getDefaultFieldNames?: GetDefaultFieldNamesFn

    A function to determine which field leafs are automatically added when trying to execute a query with missing selection sets. It will be called with the GraphQLType for which fields need to be added.

UseAutoCompleteLeafsArgs

UseAutoCompleteLeafsArgs: { caller?: Function; getDefaultFieldNames?: GetDefaultFieldNamesFn }

Type declaration

  • Optional caller?: Function

    This is only meant to be used internally in @graphiql/react.

  • Optional getDefaultFieldNames?: GetDefaultFieldNamesFn

    A function to determine which field leafs are automatically added when trying to execute a query with missing selection sets. It will be called with the GraphQLType for which fields need to be added.

UseCopyQueryArgs

UseCopyQueryArgs: { caller?: Function; onCopyQuery?: undefined | ((query: string) => void) }

Type declaration

  • Optional caller?: Function

    This is only meant to be used internally in @graphiql/react.

  • Optional onCopyQuery?: undefined | ((query: string) => void)

    Invoked when the current contents of the query editor are copied to the clipboard.

    param

    The content that has been copied.

UseCopyQueryArgs

UseCopyQueryArgs: { caller?: Function; onCopyQuery?: undefined | ((query: string) => void) }

Type declaration

  • Optional caller?: Function

    This is only meant to be used internally in @graphiql/react.

  • Optional onCopyQuery?: undefined | ((query: string) => void)

    Invoked when the current contents of the query editor are copied to the clipboard.

    param

    The content that has been copied.

UseHeaderEditorArgs

UseHeaderEditorArgs: WriteableEditorProps & { onEdit?: any }

UseHeaderEditorArgs

UseHeaderEditorArgs: WriteableEditorProps & { onEdit?: any }

UseQueryEditorArgs

UseQueryEditorArgs: WriteableEditorProps & Pick<UseCopyQueryArgs, "onCopyQuery"> & { onClickReference?: any; onEdit?: any }

UseQueryEditorArgs

UseQueryEditorArgs: WriteableEditorProps & Pick<UseCopyQueryArgs, "onCopyQuery"> & { onClickReference?: any; onEdit?: any }

UseResponseEditorArgs

UseResponseEditorArgs: CommonEditorProps & { responseTooltip?: ResponseTooltipType }

UseResponseEditorArgs

UseResponseEditorArgs: CommonEditorProps & { responseTooltip?: ResponseTooltipType }

UseVariableEditorArgs

UseVariableEditorArgs: WriteableEditorProps & { onClickReference?: any; onEdit?: any }

UseVariableEditorArgs

UseVariableEditorArgs: WriteableEditorProps & { onClickReference?: any; onEdit?: any }

WriteableEditorProps

WriteableEditorProps: CommonEditorProps & { readOnly?: undefined | false | true }

WriteableEditorProps

WriteableEditorProps: CommonEditorProps & { readOnly?: undefined | false | true }

Variables

Const ArgumentIcon

ArgumentIcon: FC<SVGProps<SVGSVGElement>>

Const ArgumentIcon

ArgumentIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_ArgumentIcon)

Const Button

Button: ForwardRefExoticComponent<Omit<ButtonProps & ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>

Const Button

Button: ForwardRefExoticComponent<Omit<ButtonProps & ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>> = forwardRef<HTMLButtonElement,ButtonProps & JSX.IntrinsicElements['button']>((props, ref) => (<button{...props}ref={ref}className={clsx('graphiql-button',{success: 'graphiql-button-success',error: 'graphiql-button-error',}[props.state!],props.className,)}/>))

Const ButtonGroup

ButtonGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>

Const ButtonGroup

ButtonGroup: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement,JSX.IntrinsicElements['div']>((props, ref) => (<div{...props}ref={ref}className={clsx('graphiql-button-group', props.className)}/>))

Const ChevronDownIcon

ChevronDownIcon: FC<SVGProps<SVGSVGElement>>

Const ChevronDownIcon

ChevronDownIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_ChevronDownIcon)

Const ChevronLeftIcon

ChevronLeftIcon: FC<SVGProps<SVGSVGElement>>

Const ChevronLeftIcon

ChevronLeftIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_ChevronLeftIcon)

Const ChevronUpIcon

ChevronUpIcon: FC<SVGProps<SVGSVGElement>>

Const ChevronUpIcon

ChevronUpIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_ChevronUpIcon)

Const CloseIcon

CloseIcon: FC<SVGProps<SVGSVGElement>>

Const CloseIcon

CloseIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_CloseIcon)

Const CopyIcon

CopyIcon: FC<SVGProps<SVGSVGElement>>

Const CopyIcon

CopyIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_CopyIcon)

Const DEFAULT_EDITOR_THEME

DEFAULT_EDITOR_THEME: "graphiql" = "graphiql"

Const DEFAULT_EDITOR_THEME

DEFAULT_EDITOR_THEME: "graphiql" = "graphiql"

Const DEFAULT_KEY_MAP

DEFAULT_KEY_MAP: KeyMap = "sublime"

Const DEFAULT_KEY_MAP

DEFAULT_KEY_MAP: KeyMap

Const DEFAULT_QUERY

DEFAULT_QUERY: "# Welcome to GraphiQL## GraphiQL is an in-browser tool for writing, validating, and# testing GraphQL queries.## Type queries into this side of the screen, and you will see intelligent# typeaheads aware of the current GraphQL type schema and live syntax and# validation errors highlighted within the text.## GraphQL queries typically start with a "{" character. Lines that start# with a # are ignored.## An example GraphQL query might look like:## {# field(arg: "value") {# subField# }# }## Keyboard shortcuts:## Prettify query: Shift-Ctrl-P (or press the prettify button)## Merge fragments: Shift-Ctrl-M (or press the merge button)## Run Query: Ctrl-Enter (or press the play button)## Auto Complete: Ctrl-Space (or just start typing)#" = "# Welcome to GraphiQL## GraphiQL is an in-browser tool for writing, validating, and# testing GraphQL queries.## Type queries into this side of the screen, and you will see intelligent# typeaheads aware of the current GraphQL type schema and live syntax and# validation errors highlighted within the text.## GraphQL queries typically start with a "{" character. Lines that start# with a # are ignored.## An example GraphQL query might look like:## {# field(arg: "value") {# subField# }# }## Keyboard shortcuts:## Prettify query: Shift-Ctrl-P (or press the prettify button)## Merge fragments: Shift-Ctrl-M (or press the merge button)## Run Query: Ctrl-Enter (or press the play button)## Auto Complete: Ctrl-Space (or just start typing)#"

Const DEFAULT_QUERY

DEFAULT_QUERY: "# Welcome to GraphiQL## GraphiQL is an in-browser tool for writing, validating, and# testing GraphQL queries.## Type queries into this side of the screen, and you will see intelligent# typeaheads aware of the current GraphQL type schema and live syntax and# validation errors highlighted within the text.## GraphQL queries typically start with a "{" character. Lines that start# with a # are ignored.## An example GraphQL query might look like:## {# field(arg: "value") {# subField# }# }## Keyboard shortcuts:## Prettify query: Shift-Ctrl-P (or press the prettify button)## Merge fragments: Shift-Ctrl-M (or press the merge button)## Run Query: Ctrl-Enter (or press the play button)## Auto Complete: Ctrl-Space (or just start typing)#" = `# Welcome to GraphiQL## GraphiQL is an in-browser tool for writing, validating, and# testing GraphQL queries.## Type queries into this side of the screen, and you will see intelligent# typeaheads aware of the current GraphQL type schema and live syntax and# validation errors highlighted within the text.## GraphQL queries typically start with a "{" character. Lines that start# with a # are ignored.## An example GraphQL query might look like:## {# field(arg: "value") {# subField# }# }## Keyboard shortcuts:## Prettify query: Shift-Ctrl-P (or press the prettify button)## Merge fragments: Shift-Ctrl-M (or press the merge button)## Run Query: Ctrl-Enter (or press the play button)## Auto Complete: Ctrl-Space (or just start typing)#`

Const DOC_EXPLORER_PLUGIN

DOC_EXPLORER_PLUGIN: GraphiQLPlugin

Const DeprecatedArgumentIcon

DeprecatedArgumentIcon: FC<SVGProps<SVGSVGElement>>

Const DeprecatedArgumentIcon

DeprecatedArgumentIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_DeprecatedArgumentIcon)

Const DeprecatedEnumValueIcon

DeprecatedEnumValueIcon: FC<SVGProps<SVGSVGElement>>

Const DeprecatedEnumValueIcon

DeprecatedEnumValueIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_DeprecatedEnumValueIcon)

Const DeprecatedFieldIcon

DeprecatedFieldIcon: FC<SVGProps<SVGSVGElement>>

Const DeprecatedFieldIcon

DeprecatedFieldIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_DeprecatedFieldIcon)

Const Dialog

Dialog: typeof DialogRoot & { Close: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>; Description: ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>>; Title: ForwardRefExoticComponent<DialogTitleProps & RefAttributes<HTMLHeadingElement>>; Trigger: ForwardRefExoticComponent<DialogTriggerProps & RefAttributes<HTMLButtonElement>> }

Const Dialog

Dialog: DialogRoot & { Close: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>; Description: ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>>; Title: ForwardRefExoticComponent<DialogTitleProps & RefAttributes<HTMLHeadingElement>>; Trigger: ForwardRefExoticComponent<DialogTriggerProps & RefAttributes<HTMLButtonElement>> } = createComponentGroup(DialogRoot, {Close: DialogClose,Title: D.Title,Trigger: D.Trigger,Description: D.Description,})

Const DirectiveIcon

DirectiveIcon: FC<SVGProps<SVGSVGElement>>

Const DirectiveIcon

DirectiveIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_DirectiveIcon)

Const DocsFilledIcon

DocsFilledIcon: FC<SVGProps<SVGSVGElement>>

Const DocsFilledIcon

DocsFilledIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_DocsFilledIcon)

Const DocsIcon

DocsIcon: FC<SVGProps<SVGSVGElement>>

Const DocsIcon

DocsIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_DocsIcon)

Const DropdownMenu

DropdownMenu: FunctionComponent<DropdownMenuProps> & { Button: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>; Content: typeof Content; Item: (__namedParameters: { children: ReactNode; className: undefined | string; props: props }) => Element }

Const DropdownMenu

DropdownMenu: FC<DropdownMenuProps> & { Button: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>; Content: Content; Item: Item } = createComponentGroup(Root, {Button,Item,Content,})

Const EditorContext

EditorContext: Context<EditorContextType | null>

Const EditorContext

EditorContext: Context<null | EditorContextType> = createNullableContext<EditorContextType>('EditorContext')

Const EnumValueIcon

EnumValueIcon: FC<SVGProps<SVGSVGElement>>

Const EnumValueIcon

EnumValueIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_EnumValueIcon)

Const ExecutionContext

ExecutionContext: Context<ExecutionContextType | null>

Const ExecutionContext

ExecutionContext: Context<null | ExecutionContextType> = createNullableContext<ExecutionContextType>('ExecutionContext')

Const ExplorerContext

ExplorerContext: Context<ExplorerContextType | null>

Const ExplorerContext

ExplorerContext: Context<null | ExplorerContextType> = createNullableContext<ExplorerContextType>('ExplorerContext')

Const FieldIcon

FieldIcon: FC<SVGProps<SVGSVGElement>>

Const FieldIcon

FieldIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_FieldIcon)

Const HISTORY_PLUGIN

HISTORY_PLUGIN: GraphiQLPlugin

Const HistoryContext

HistoryContext: Context<HistoryContextType | null>

Const HistoryContext

HistoryContext: Context<null | HistoryContextType> = createNullableContext<HistoryContextType>('HistoryContext')

Const HistoryIcon

HistoryIcon: FC<SVGProps<SVGSVGElement>>

Const HistoryIcon

HistoryIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_HistoryIcon)

Const ImplementsIcon

ImplementsIcon: FC<SVGProps<SVGSVGElement>>

Const ImplementsIcon

ImplementsIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_ImplementsIcon)

Const KeyboardShortcutIcon

KeyboardShortcutIcon: FC<SVGProps<SVGSVGElement>>

Const KeyboardShortcutIcon

KeyboardShortcutIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_KeyboardShortcutIcon)

Const MagnifyingGlassIcon

MagnifyingGlassIcon: FC<SVGProps<SVGSVGElement>>

Const MagnifyingGlassIcon

MagnifyingGlassIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_MagnifyingGlassIcon)

Const MarkdownContent

MarkdownContent: ForwardRefExoticComponent<Omit<MarkdownContentProps & Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children">, "ref"> & RefAttributes<HTMLDivElement>>

Const MarkdownContent

MarkdownContent: ForwardRefExoticComponent<Omit<MarkdownContentProps & Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children">, "ref"> & RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement,MarkdownContentProps & Omit<JSX.IntrinsicElements['div'], 'children'>>(({ children, onlyShowFirstChild, type, ...props }, ref) => (<div{...props}ref={ref}className={clsx(`graphiql-markdown-${type}`,onlyShowFirstChild && 'graphiql-markdown-preview',props.className,)}dangerouslySetInnerHTML={{ __html: markdown.render(children) }}/>))

Const MergeIcon

MergeIcon: FC<SVGProps<SVGSVGElement>>

Const MergeIcon

MergeIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_MergeIcon)

Const PenIcon

PenIcon: FC<SVGProps<SVGSVGElement>>

Const PenIcon

PenIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_PenIcon)

Const PlayIcon

PlayIcon: FC<SVGProps<SVGSVGElement>>

Const PlayIcon

PlayIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_PlayIcon)

Const PluginContext

PluginContext: Context<PluginContextType | null>

Const PluginContext

PluginContext: Context<null | PluginContextType> = createNullableContext<PluginContextType>('PluginContext')

Const PlusIcon

PlusIcon: FC<SVGProps<SVGSVGElement>>

Const PlusIcon

PlusIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_PlusIcon)

Const PrettifyIcon

PrettifyIcon: FC<SVGProps<SVGSVGElement>>

Const PrettifyIcon

PrettifyIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_PrettifyIcon)

Const ReloadIcon

ReloadIcon: FC<SVGProps<SVGSVGElement>>

Const ReloadIcon

ReloadIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_ReloadIcon)

Const RootTypeIcon

RootTypeIcon: FC<SVGProps<SVGSVGElement>>

Const RootTypeIcon

RootTypeIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_RootTypeIcon)

Const STORAGE_KEY

STORAGE_KEY: "headers" = "headers"

Const STORAGE_KEY

STORAGE_KEY: "variables" = "variables"

Const STORAGE_KEY

STORAGE_KEY: "tabState" = "tabState"

Const STORAGE_KEY

STORAGE_KEY: "headers" = "headers"

Const STORAGE_KEY

STORAGE_KEY: "tabState" = "tabState"

Const STORAGE_KEY

STORAGE_KEY: "variables" = "variables"

Const STORAGE_KEY_QUERY

STORAGE_KEY_QUERY: "query" = "query"

Const STORAGE_KEY_QUERY

STORAGE_KEY_QUERY: "query" = "query"

Const SchemaContext

SchemaContext: Context<SchemaContextType | null>

Const SchemaContext

SchemaContext: Context<null | SchemaContextType> = createNullableContext<SchemaContextType>('SchemaContext')

Const SettingsIcon

SettingsIcon: FC<SVGProps<SVGSVGElement>>

Const SettingsIcon

SettingsIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_SettingsIcon)

Const Spinner

Spinner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>

Const Spinner

Spinner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement, JSX.IntrinsicElements['div']>((props, ref) => (<div{...props}ref={ref}className={clsx('graphiql-spinner', props.className)}/>),)

Const StarFilledIcon

StarFilledIcon: FC<SVGProps<SVGSVGElement>>

Const StarFilledIcon

StarFilledIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_StarFilledIcon)

Const StarIcon

StarIcon: FC<SVGProps<SVGSVGElement>>

Const StarIcon

StarIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_StarIcon)

Const StopIcon

StopIcon: FC<SVGProps<SVGSVGElement>>

Const StopIcon

StopIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_StopIcon)

Const StorageContext

StorageContext: Context<StorageAPI | null>

Const StorageContext

StorageContext: Context<null | StorageAPI> = createNullableContext<StorageContextType>('StorageContext')

Const Tab

Tab: ForwardRefExoticComponent<TabProps & RefAttributes<HTMLLIElement>> & { Button: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>; Close: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>> }

Const Tab

Tab: ForwardRefExoticComponent<TabProps & RefAttributes<HTMLLIElement>> & { Button: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>; Close: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>> } = createComponentGroup(TabRoot, {Button: TabButton,Close: TabClose,})

Const Tabs

Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLUListElement>>

Const Tabs

Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLUListElement>> = forwardRef<HTMLUListElement, TabsProps>(({ values, onReorder, children, className, ...props }, ref) => (<Reorder.Group{...props}ref={ref}values={values}onReorder={onReorder}axis="x"role="tablist"className={clsx('graphiql-tabs', className)}>{children}</Reorder.Group>),)

Const ToolbarButton

ToolbarButton: ForwardRefExoticComponent<Omit<ToolbarButtonProps & ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>

Const ToolbarButton

ToolbarButton: ForwardRefExoticComponent<Omit<ToolbarButtonProps & ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>> = forwardRef<HTMLButtonElement,ToolbarButtonProps & JSX.IntrinsicElements['button']>(({ label, onClick, ...props }, ref) => {const [error, setError] = useState<Error | null>(null);const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(event => {try {onClick?.(event);setError(null);} catch (err) {setError(err instanceof Error? err: new Error(`Toolbar button click failed: ${err}`),);}},[onClick],);return (<Tooltip label={label}><UnStyledButton{...props}ref={ref}type="button"className={clsx('graphiql-toolbar-button',error && 'error',props.className,)}onClick={handleClick}aria-label={error ? error.message : label}aria-invalid={error ? 'true' : props['aria-invalid']}/></Tooltip>);})

Const ToolbarMenu

ToolbarMenu: (__namedParameters: { button: ReactNode; children: ReactNode; label: string; props: props }) => Element & { Item: (__namedParameters: { children: ReactNode; className: undefined | string; props: props }) => Element }

Const ToolbarMenu

ToolbarMenu: ToolbarMenuRoot & { Item: Item } = createComponentGroup(ToolbarMenuRoot, {Item: DropdownMenu.Item,})

Const Tooltip

Tooltip: typeof TooltipRoot & { Provider: FunctionComponent<TooltipProviderProps> }

Const Tooltip

Tooltip: TooltipRoot & { Provider: FC<TooltipProviderProps> } = createComponentGroup(TooltipRoot, {Provider: T.Provider,})

Const TrashIcon

TrashIcon: FC<SVGProps<SVGSVGElement>>

Const TrashIcon

TrashIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_TrashIcon)

Const TypeIcon

TypeIcon: FC<SVGProps<SVGSVGElement>>

Const TypeIcon

TypeIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_TypeIcon)

Const UnStyledButton

UnStyledButton: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>

Const UnStyledButton

UnStyledButton: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>> = forwardRef<HTMLButtonElement,JSX.IntrinsicElements['button']>((props, ref) => (<button{...props}ref={ref}className={clsx('graphiql-un-styled', props.className)}/>))

Const commonKeys

commonKeys: { Alt-Left: string; Alt-Right: string; Cmd-G: string; Ctrl-G: string; Ctrl-Left: string; Ctrl-Right: string }

Type declaration

  • [x: string]: string
  • Alt-Left: string
  • Alt-Right: string
  • Cmd-G: string
  • Ctrl-G: string
  • Ctrl-Left: string
  • Ctrl-Right: string

Const createComponentGroup

createComponentGroup: <Root, Children>(root: Root, children: Children) => Root & Children

Type declaration

    • <Root, Children>(root: Root, children: Children): Root & Children
    • Type parameters

      • Root: JSXElementConstructor<any>

      • Children: {}

      Parameters

      • root: Root
      • children: Children

      Returns Root & Children

Const invalidCharacters

invalidCharacters: string[] = Array.from({ length: 11 }, (_, i) => {// \u2000 -> \u200areturn String.fromCharCode(0x2000 + i);}).concat(['\u2028', '\u2029', '\u202f', '\u00a0'])

Const invalidCharacters

invalidCharacters: string[]

Const isMacOs

isMacOs: boolean

Const isMacOs

isMacOs: boolean = typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac')

Const markdown

markdown: MarkdownIt = new MarkdownIt({breaks: true,linkify: true,})

Const markdown

markdown: MarkdownIt

Const useEditorContext

useEditorContext: { (options: { caller?: Function | undefined; nonNull: true }): EditorContextType; (options: { caller?: Function | undefined; nonNull?: boolean | undefined }): EditorContextType | null; (): EditorContextType | null }

Type declaration

    • Parameters

      • options: { caller?: Function | undefined; nonNull: true }
        • Optional caller?: Function | undefined
        • nonNull: true

      Returns EditorContextType

    • Parameters

      • options: { caller?: Function | undefined; nonNull?: boolean | undefined }
        • Optional caller?: Function | undefined
        • Optional nonNull?: boolean | undefined

      Returns EditorContextType | null

    • Returns EditorContextType | null

Const useEditorContext

useEditorContext: useGivenContext = createContextHook(EditorContext)

Const useEditorState

useEditorState: (editor: "query" | "variable" | "header") => [string, (val: string) => void]

Type declaration

    • (editor: "query" | "variable" | "header"): [string, (val: string) => void]
    • Parameters

      • editor: "query" | "variable" | "header"

      Returns [string, (val: string) => void]

Const useExecutionContext

useExecutionContext: { (options: { caller?: Function | undefined; nonNull: true }): ExecutionContextType; (options: { caller?: Function | undefined; nonNull?: boolean | undefined }): ExecutionContextType | null; (): ExecutionContextType | null }

Type declaration

    • Parameters

      • options: { caller?: Function | undefined; nonNull: true }
        • Optional caller?: Function | undefined
        • nonNull: true

      Returns ExecutionContextType

    • Parameters

      • options: { caller?: Function | undefined; nonNull?: boolean | undefined }
        • Optional caller?: Function | undefined
        • Optional nonNull?: boolean | undefined

      Returns ExecutionContextType | null

    • Returns ExecutionContextType | null

Const useExecutionContext

useExecutionContext: useGivenContext = createContextHook(ExecutionContext)

Const useExplorerContext

useExplorerContext: { (options: { caller?: Function | undefined; nonNull: true }): ExplorerContextType; (options: { caller?: Function | undefined; nonNull?: boolean | undefined }): ExplorerContextType | null; (): ExplorerContextType | null }

Type declaration

    • Parameters

      • options: { caller?: Function | undefined; nonNull: true }
        • Optional caller?: Function | undefined
        • nonNull: true

      Returns ExplorerContextType

    • Parameters

      • options: { caller?: Function | undefined; nonNull?: boolean | undefined }
        • Optional caller?: Function | undefined
        • Optional nonNull?: boolean | undefined

      Returns ExplorerContextType | null

    • Returns ExplorerContextType | null

Const useExplorerContext

useExplorerContext: useGivenContext = createContextHook(ExplorerContext)

Const useHeadersEditorState

useHeadersEditorState: () => [headers: string, setHeaders: (content: string) => void]

useState-like hook for current tab variables editor state

Type declaration

    • (): [headers: string, setHeaders: (content: string) => void]
    • Returns [headers: string, setHeaders: (content: string) => void]

Const useHistoryContext

useHistoryContext: { (options: { caller?: Function | undefined; nonNull: true }): HistoryContextType; (options: { caller?: Function | undefined; nonNull?: boolean | undefined }): HistoryContextType | null; (): HistoryContextType | null }

Type declaration

    • Parameters

      • options: { caller?: Function | undefined; nonNull: true }
        • Optional caller?: Function | undefined
        • nonNull: true

      Returns HistoryContextType

    • Parameters

      • options: { caller?: Function | undefined; nonNull?: boolean | undefined }
        • Optional caller?: Function | undefined
        • Optional nonNull?: boolean | undefined

      Returns HistoryContextType | null

    • Returns HistoryContextType | null

Const useHistoryContext

useHistoryContext: useGivenContext = createContextHook<HistoryContextType>(HistoryContext)

Const useOperationsEditorState

useOperationsEditorState: () => [operations: string, setOperations: (content: string) => void]

useState-like hook for current tab operations editor state

Type declaration

    • (): [operations: string, setOperations: (content: string) => void]
    • Returns [operations: string, setOperations: (content: string) => void]

Const usePluginContext

usePluginContext: { (options: { caller?: Function | undefined; nonNull: true }): PluginContextType; (options: { caller?: Function | undefined; nonNull?: boolean | undefined }): PluginContextType | null; (): PluginContextType | null }

Type declaration

    • Parameters

      • options: { caller?: Function | undefined; nonNull: true }
        • Optional caller?: Function | undefined
        • nonNull: true

      Returns PluginContextType

    • Parameters

      • options: { caller?: Function | undefined; nonNull?: boolean | undefined }
        • Optional caller?: Function | undefined
        • Optional nonNull?: boolean | undefined

      Returns PluginContextType | null

    • Returns PluginContextType | null

Const usePluginContext

usePluginContext: useGivenContext = createContextHook(PluginContext)

Const useSchemaContext

useSchemaContext: { (options: { caller?: Function | undefined; nonNull: true }): SchemaContextType; (options: { caller?: Function | undefined; nonNull?: boolean | undefined }): SchemaContextType | null; (): SchemaContextType | null }

Type declaration

    • Parameters

      • options: { caller?: Function | undefined; nonNull: true }
        • Optional caller?: Function | undefined
        • nonNull: true

      Returns SchemaContextType

    • Parameters

      • options: { caller?: Function | undefined; nonNull?: boolean | undefined }
        • Optional caller?: Function | undefined
        • Optional nonNull?: boolean | undefined

      Returns SchemaContextType | null

    • Returns SchemaContextType | null

Const useSchemaContext

useSchemaContext: useGivenContext = createContextHook(SchemaContext)

Const useStorageContext

useStorageContext: { (options: { caller?: Function | undefined; nonNull: true }): StorageAPI; (options: { caller?: Function | undefined; nonNull?: boolean | undefined }): StorageAPI | null; (): StorageAPI | null }

Type declaration

    • (options: { caller?: Function | undefined; nonNull: true }): StorageAPI
    • (options: { caller?: Function | undefined; nonNull?: boolean | undefined }): StorageAPI | null
    • (): StorageAPI | null
    • Parameters

      • options: { caller?: Function | undefined; nonNull: true }
        • Optional caller?: Function | undefined
        • nonNull: true

      Returns StorageAPI

    • Parameters

      • options: { caller?: Function | undefined; nonNull?: boolean | undefined }
        • Optional caller?: Function | undefined
        • Optional nonNull?: boolean | undefined

      Returns StorageAPI | null

    • Returns StorageAPI | null

Const useStorageContext

useStorageContext: useGivenContext = createContextHook(StorageContext)

Const useVariablesEditorState

useVariablesEditorState: () => [variables: string, setVariables: (content: string) => void]

useState-like hook for current tab variables editor state

Type declaration

    • (): [variables: string, setVariables: (content: string) => void]
    • Returns [variables: string, setVariables: (content: string) => void]

Functions

Argument

  • Argument(__namedParameters: { arg: GraphQLArgument; inline: undefined | false | true; showDefaultValue: undefined | false | true }): Element
  • Parameters

    • __namedParameters: { arg: GraphQLArgument; inline: undefined | false | true; showDefaultValue: undefined | false | true }
      • arg: GraphQLArgument
      • inline: undefined | false | true
      • showDefaultValue: undefined | false | true

    Returns Element

Argument

  • Argument(__namedParameters: { arg: GraphQLArgument; inline: undefined | false | true; showDefaultValue: undefined | false | true }): Argument

DefaultValue

  • Parameters

    Returns Element | null

DefaultValue

DeprecationReason

  • DeprecationReason(props: DeprecationReasonProps): Element | null
  • Parameters

    • props: DeprecationReasonProps

    Returns Element | null

DeprecationReason

DialogRoot

  • DialogRoot(__namedParameters: { children: ReactNode; props: props }): ReactElement
  • Parameters

    • __namedParameters: { children: ReactNode; props: props }
      • children: ReactNode
      • props: props

    Returns ReactElement

DialogRoot

  • DialogRoot(__namedParameters: { children: ReactNode; props: props }): ReactElement

Directive

  • Directive(__namedParameters: { directive: DirectiveNode }): Element
  • Parameters

    • __namedParameters: { directive: DirectiveNode }
      • directive: DirectiveNode

    Returns Element

Directive

  • Directive(__namedParameters: { directive: DirectiveNode }): Directive

DocExplorer

  • DocExplorer(): Element
  • Returns Element

DocExplorer

EditorContextProvider

EditorContextProvider

ExecuteButton

  • ExecuteButton(): Element
  • Returns Element

ExecuteButton

ExecutionContextProvider

  • ExecutionContextProvider(__namedParameters: { children: ReactNode; fetcher: Fetcher; getDefaultFieldNames: undefined | GetDefaultFieldNamesFn; operationName: undefined | string }): Element
  • Parameters

    Returns Element

ExecutionContextProvider

ExplorerContextProvider

ExplorerContextProvider

ExplorerSection

  • ExplorerSection(props: ExplorerSectionProps): Element
  • Parameters

    • props: ExplorerSectionProps

    Returns Element

ExplorerSection

FieldDocumentation

  • FieldDocumentation(props: FieldDocumentationProps): Element
  • Parameters

    • props: FieldDocumentationProps

    Returns Element

FieldDocumentation

FieldLink

  • FieldLink(props: FieldLinkProps): Element
  • Parameters

    • props: FieldLinkProps

    Returns Element

FieldLink

  • FieldLink(props: FieldLinkProps): FieldLink

GraphiQLProvider

  • GraphiQLProvider(__namedParameters: { children: ReactNode; dangerouslyAssumeSchemaIsValid: undefined | false | true; defaultHeaders: undefined | string; defaultQuery: undefined | string; defaultTabs: undefined | TabDefinition[]; externalFragments: undefined | string | FragmentDefinitionNode[]; fetcher: Fetcher; getDefaultFieldNames: undefined | GetDefaultFieldNamesFn; headers: undefined | string; inputValueDeprecation: undefined | false | true; introspectionQueryName: undefined | string; maxHistoryLength: undefined | number; onEditOperationName: undefined | onEditOperationName; onSchemaChange: undefined | onSchemaChange; onTabChange: undefined | onTabChange; onTogglePluginVisibility: undefined | onTogglePluginVisibility; operationName: undefined | string; plugins: undefined | GraphiQLPlugin[]; query: undefined | string; response: undefined | string; schema: undefined | null | GraphQLSchema | IntrospectionQuery; schemaDescription: undefined | false | true; shouldPersistHeaders: undefined | false | true; storage: undefined | Storage; validationRules: undefined | ValidationRule[]; variables: undefined | string; visiblePlugin: undefined | string | GraphiQLPlugin }): Element
  • Parameters

    • __namedParameters: { children: ReactNode; dangerouslyAssumeSchemaIsValid: undefined | false | true; defaultHeaders: undefined | string; defaultQuery: undefined | string; defaultTabs: undefined | TabDefinition[]; externalFragments: undefined | string | FragmentDefinitionNode[]; fetcher: Fetcher; getDefaultFieldNames: undefined | GetDefaultFieldNamesFn; headers: undefined | string; inputValueDeprecation: undefined | false | true; introspectionQueryName: undefined | string; maxHistoryLength: undefined | number; onEditOperationName: undefined | onEditOperationName; onSchemaChange: undefined | onSchemaChange; onTabChange: undefined | onTabChange; onTogglePluginVisibility: undefined | onTogglePluginVisibility; operationName: undefined | string; plugins: undefined | GraphiQLPlugin[]; query: undefined | string; response: undefined | string; schema: undefined | null | GraphQLSchema | IntrospectionQuery; schemaDescription: undefined | false | true; shouldPersistHeaders: undefined | false | true; storage: undefined | Storage; validationRules: undefined | ValidationRule[]; variables: undefined | string; visiblePlugin: undefined | string | GraphiQLPlugin }
      • children: ReactNode
      • dangerouslyAssumeSchemaIsValid: undefined | false | true
      • defaultHeaders: undefined | string
      • defaultQuery: undefined | string
      • defaultTabs: undefined | TabDefinition[]
      • externalFragments: undefined | string | FragmentDefinitionNode[]
      • fetcher: Fetcher
      • getDefaultFieldNames: undefined | GetDefaultFieldNamesFn
      • headers: undefined | string
      • inputValueDeprecation: undefined | false | true
      • introspectionQueryName: undefined | string
      • maxHistoryLength: undefined | number
      • onEditOperationName: undefined | onEditOperationName
      • onSchemaChange: undefined | onSchemaChange
      • onTabChange: undefined | onTabChange
      • onTogglePluginVisibility: undefined | onTogglePluginVisibility
      • operationName: undefined | string
      • plugins: undefined | GraphiQLPlugin[]
      • query: undefined | string
      • response: undefined | string
      • schema: undefined | null | GraphQLSchema | IntrospectionQuery
      • schemaDescription: undefined | false | true
      • shouldPersistHeaders: undefined | false | true
      • storage: undefined | Storage
      • validationRules: undefined | ValidationRule[]
      • variables: undefined | string
      • visiblePlugin: undefined | string | GraphiQLPlugin

    Returns Element

GraphiQLProvider

  • GraphiQLProvider(__namedParameters: { children: ReactNode; dangerouslyAssumeSchemaIsValid: undefined | false | true; defaultHeaders: undefined | string; defaultQuery: undefined | string; defaultTabs: undefined | TabDefinition[]; externalFragments: undefined | string | FragmentDefinitionNode[]; fetcher: Fetcher; getDefaultFieldNames: undefined | GetDefaultFieldNamesFn; headers: undefined | string; inputValueDeprecation: undefined | false | true; introspectionQueryName: undefined | string; maxHistoryLength: undefined | number; onEditOperationName: undefined | onEditOperationName; onSchemaChange: undefined | onSchemaChange; onTabChange: undefined | onTabChange; onTogglePluginVisibility: undefined | onTogglePluginVisibility; operationName: undefined | string; plugins: undefined | GraphiQLPlugin[]; query: undefined | string; response: undefined | string; schema: undefined | null | GraphQLSchema | IntrospectionQuery; schemaDescription: undefined | false | true; shouldPersistHeaders: undefined | false | true; storage: undefined | Storage; validationRules: undefined | ValidationRule[]; variables: undefined | string; visiblePlugin: undefined | string | GraphiQLPlugin }): GraphiQLProvider
  • Parameters

    • __namedParameters: { children: ReactNode; dangerouslyAssumeSchemaIsValid: undefined | false | true; defaultHeaders: undefined | string; defaultQuery: undefined | string; defaultTabs: undefined | TabDefinition[]; externalFragments: undefined | string | FragmentDefinitionNode[]; fetcher: Fetcher; getDefaultFieldNames: undefined | GetDefaultFieldNamesFn; headers: undefined | string; inputValueDeprecation: undefined | false | true; introspectionQueryName: undefined | string; maxHistoryLength: undefined | number; onEditOperationName: undefined | onEditOperationName; onSchemaChange: undefined | onSchemaChange; onTabChange: undefined | onTabChange; onTogglePluginVisibility: undefined | onTogglePluginVisibility; operationName: undefined | string; plugins: undefined | GraphiQLPlugin[]; query: undefined | string; response: undefined | string; schema: undefined | null | GraphQLSchema | IntrospectionQuery; schemaDescription: undefined | false | true; shouldPersistHeaders: undefined | false | true; storage: undefined | Storage; validationRules: undefined | ValidationRule[]; variables: undefined | string; visiblePlugin: undefined | string | GraphiQLPlugin }
      • children: ReactNode
      • dangerouslyAssumeSchemaIsValid: undefined | false | true
      • defaultHeaders: undefined | string
      • defaultQuery: undefined | string
      • defaultTabs: undefined | TabDefinition[]
      • externalFragments: undefined | string | FragmentDefinitionNode[]
      • fetcher: Fetcher
      • getDefaultFieldNames: undefined | GetDefaultFieldNamesFn
      • headers: undefined | string
      • inputValueDeprecation: undefined | false | true
      • introspectionQueryName: undefined | string
      • maxHistoryLength: undefined | number
      • onEditOperationName: undefined | onEditOperationName
      • onSchemaChange: undefined | onSchemaChange
      • onTabChange: undefined | onTabChange
      • onTogglePluginVisibility: undefined | onTogglePluginVisibility
      • operationName: undefined | string
      • plugins: undefined | GraphiQLPlugin[]
      • query: undefined | string
      • response: undefined | string
      • schema: undefined | null | GraphQLSchema | IntrospectionQuery
      • schemaDescription: undefined | false | true
      • shouldPersistHeaders: undefined | false | true
      • storage: undefined | Storage
      • validationRules: undefined | ValidationRule[]
      • variables: undefined | string
      • visiblePlugin: undefined | string | GraphiQLPlugin

    Returns GraphiQLProvider

HeaderEditor

  • HeaderEditor(__namedParameters: { hookArgs: hookArgs; isHidden: undefined | false | true }): Element
  • Parameters

    • __namedParameters: { hookArgs: hookArgs; isHidden: undefined | false | true }
      • hookArgs: hookArgs
      • isHidden: undefined | false | true

    Returns Element

HeaderEditor

  • HeaderEditor(__namedParameters: { hookArgs: hookArgs; isHidden: undefined | false | true }): HeaderEditor

History

  • History(): Element
  • Returns Element

History

HistoryContextProvider

  • HistoryContextProvider(__namedParameters: { children: ReactNode; maxHistoryLength: undefined | number }): Element
  • The functions send the entire operation so users can customize their own application with <HistoryContext.Provider value={customizedFunctions} /> and get access to the operation plus any additional props they added for their needs (i.e., build their own functions that may save to a backend instead of localStorage and might need an id property added to the QueryStoreItem)

    Parameters

    • __namedParameters: { children: ReactNode; maxHistoryLength: undefined | number }
      • children: ReactNode
      • maxHistoryLength: undefined | number

    Returns Element

HistoryContextProvider

  • HistoryContextProvider(__namedParameters: { children: ReactNode; maxHistoryLength: number }): HistoryContextProvider
  • The functions send the entire operation so users can customize their own application with <HistoryContext.Provider value={customizedFunctions} /> and get access to the operation plus any additional props they added for their needs (i.e., build their own functions that may save to a backend instead of localStorage and might need an id property added to the QueryStoreItem)

    Parameters

    • __namedParameters: { children: ReactNode; maxHistoryLength: number }
      • children: ReactNode
      • maxHistoryLength: number

    Returns HistoryContextProvider

HistoryItem

  • HistoryItem(props: QueryHistoryItemProps): Element
  • Parameters

    • props: QueryHistoryItemProps

    Returns Element

HistoryItem

  • HistoryItem(props: QueryHistoryItemProps): HistoryItem

ImagePreview

PluginContextProvider

PluginContextProvider

QueryEditor

  • Parameters

    Returns Element

QueryEditor

ResponseEditor

  • Parameters

    Returns Element

ResponseEditor

SchemaContextProvider

SchemaContextProvider

SchemaDocumentation

  • SchemaDocumentation(props: SchemaDocumentationProps): Element
  • Parameters

    • props: SchemaDocumentationProps

    Returns Element

SchemaDocumentation

Search

  • Search(): Element | null
  • Returns Element | null

Search

StorageContextProvider

StorageContextProvider

TooltipRoot

  • TooltipRoot(__namedParameters: { align: undefined | "center" | "start" | "end"; children: ReactNode; label: ReactNode; side: undefined | "top" | "right" | "bottom" | "left"; sideOffset: undefined | number }): ReactElement
  • Parameters

    • __namedParameters: { align: undefined | "center" | "start" | "end"; children: ReactNode; label: ReactNode; side: undefined | "top" | "right" | "bottom" | "left"; sideOffset: undefined | number }
      • align: undefined | "center" | "start" | "end"
      • children: ReactNode
      • label: ReactNode
      • side: undefined | "top" | "right" | "bottom" | "left"
      • sideOffset: undefined | number

    Returns ReactElement

TooltipRoot

  • TooltipRoot(__namedParameters: { align: "center" | "start" | "end"; children: ReactNode; label: ReactNode; side: "top" | "right" | "bottom" | "left"; sideOffset: number }): ReactElement
  • Parameters

    • __namedParameters: { align: "center" | "start" | "end"; children: ReactNode; label: ReactNode; side: "top" | "right" | "bottom" | "left"; sideOffset: number }
      • align: "center" | "start" | "end"
      • children: ReactNode
      • label: ReactNode
      • side: "top" | "right" | "bottom" | "left"
      • sideOffset: number

    Returns ReactElement

TypeDocumentation

  • TypeDocumentation(props: TypeDocumentationProps): Element | null
  • Parameters

    • props: TypeDocumentationProps

    Returns Element | null

TypeDocumentation

TypeLink

  • TypeLink(props: TypeLinkProps): Element | null
  • Parameters

    • props: TypeLinkProps

    Returns Element | null

TypeLink

  • TypeLink(props: TypeLinkProps): TypeLink

VariableEditor

  • VariableEditor(__namedParameters: { hookArgs: hookArgs; isHidden: undefined | false | true }): Element
  • Parameters

    • __namedParameters: { hookArgs: hookArgs; isHidden: undefined | false | true }
      • hookArgs: hookArgs
      • isHidden: undefined | false | true

    Returns Element

VariableEditor

  • VariableEditor(__namedParameters: { hookArgs: hookArgs; isHidden: undefined | false | true }): VariableEditor

clearHeadersFromTabs

  • clearHeadersFromTabs(storage: StorageAPI | null): void
  • Parameters

    • storage: StorageAPI | null

    Returns void

clearHeadersFromTabs

Const createComponentGroup

  • createComponentGroup<Root, Children>(root: Root, children: Children): Root & Children

createContextHook

createContextHook

  • createContextHook<T>(context: Context<T | null>): { (options: { caller?: Function; nonNull: true }): T; (options: { caller?: Function; nonNull?: undefined | false | true }): T | null; (): T | null }
  • Type parameters

    • T

    Parameters

    • context: Context<T | null>

    Returns { (options: { caller?: Function; nonNull: true }): T; (options: { caller?: Function; nonNull?: undefined | false | true }): T | null; (): T | null }

      • (options: { caller?: Function; nonNull: true }): T
      • (options: { caller?: Function; nonNull?: undefined | false | true }): T | null
      • (): T | null
      • Parameters

        • options: { caller?: Function; nonNull: true }
          • Optional caller?: Function
          • nonNull: true

        Returns T

      • Parameters

        • options: { caller?: Function; nonNull?: undefined | false | true }
          • Optional caller?: Function
          • Optional nonNull?: undefined | false | true

        Returns T | null

      • Returns T | null

createNullableContext

  • createNullableContext<T>(name: string): Context<T | null>

createNullableContext

  • createNullableContext<T>(name: string): Context<T | null>
  • Type parameters

    • T

    Parameters

    • name: string

    Returns Context<T | null>

createTab

  • createTab(__namedParameters?: { headers: undefined | null | string; query: undefined | null | string; variables: undefined | null | string }): TabState
  • Parameters

    • Optional __namedParameters: { headers: undefined | null | string; query: undefined | null | string; variables: undefined | null | string }
      • headers: undefined | null | string
      • query: undefined | null | string
      • variables: undefined | null | string

    Returns TabState

createTab

  • createTab(__namedParameters?: { headers: null | string; query: null | string; variables: null | string }): TabState

debounce

  • debounce<F>(duration: number, fn: F): debounce

debounce

  • debounce<F>(duration: number, fn: F): F
  • Provided a duration and a function, returns a new function which is called duration milliseconds after the last call.

    Type parameters

    • F: (...args: any[]) => any

    Parameters

    • duration: number
    • fn: F

    Returns F

formatQuery

  • formatQuery(query?: undefined | string): string | undefined
  • Parameters

    • Optional query: undefined | string

    Returns string | undefined

formatQuery

fuzzyExtractOperationName

  • fuzzyExtractOperationName(str: string): string | null
  • Parameters

    • str: string

    Returns string | null

fuzzyExtractOperationName

  • fuzzyExtractOperationName(str: string): string | null

getDefaultTabState

  • getDefaultTabState(__namedParameters: { defaultHeaders: undefined | string; defaultQuery: string; defaultTabs: undefined | TabDefinition[]; headers: null | string; query: null | string; shouldPersistHeaders: undefined | false | true; storage: null | StorageAPI; variables: null | string }): TabsState
  • Parameters

    • __namedParameters: { defaultHeaders: undefined | string; defaultQuery: string; defaultTabs: undefined | TabDefinition[]; headers: null | string; query: null | string; shouldPersistHeaders: undefined | false | true; storage: null | StorageAPI; variables: null | string }
      • defaultHeaders: undefined | string
      • defaultQuery: string
      • defaultTabs: undefined | TabDefinition[]
      • headers: null | string
      • query: null | string
      • shouldPersistHeaders: undefined | false | true
      • storage: null | StorageAPI
      • variables: null | string

    Returns TabsState

getDefaultTabState

  • getDefaultTabState(__namedParameters: { defaultHeaders: undefined | string; defaultQuery: string; defaultTabs: undefined | TabDefinition[]; headers: null | string; query: null | string; shouldPersistHeaders: undefined | false | true; storage: null | StorageAPI; variables: null | string }): getDefaultTabState
  • Parameters

    • __namedParameters: { defaultHeaders: undefined | string; defaultQuery: string; defaultTabs: undefined | TabDefinition[]; headers: null | string; query: null | string; shouldPersistHeaders: undefined | false | true; storage: null | StorageAPI; variables: null | string }
      • defaultHeaders: undefined | string
      • defaultQuery: string
      • defaultTabs: undefined | TabDefinition[]
      • headers: null | string
      • query: null | string
      • shouldPersistHeaders: undefined | false | true
      • storage: null | StorageAPI
      • variables: null | string

    Returns getDefaultTabState

importCodeMirror

  • importCodeMirror(addons: Promise<any>[], options?: undefined | { useCommonAddons?: undefined | false | true }): importCodeMirror

importCodeMirror

  • importCodeMirror(addons: Promise<any>[], options?: undefined | { useCommonAddons?: undefined | false | true }): Promise<CodeMirror>
  • Dynamically import codemirror and dependencies This works for codemirror 5, not sure if the same imports work for 6

    Parameters

    • addons: Promise<any>[]
    • Optional options: undefined | { useCommonAddons?: undefined | false | true }

    Returns Promise<CodeMirror>

normalizeWhitespace

normalizeWhitespace

  • normalizeWhitespace(line: string): string
  • Parameters

    • line: string

    Returns string

onHasCompletion

  • onHasCompletion(_cm: Editor, data: EditorChange | undefined, schema: GraphQLSchema | null | undefined, explorer: ExplorerContextType | null, plugin: PluginContextType | null, callback?: undefined | ((type: GraphQLNamedType) => void)): void

onHasCompletion

  • onHasCompletion(_cm: Editor, data: EditorChange | undefined, schema: GraphQLSchema | null | undefined, explorer: ExplorerContextType | null, plugin: PluginContextType | null, callback?: undefined | ((type: GraphQLNamedType) => void)): void
  • Render a custom UI for CodeMirror's hint which includes additional info about the type and description for the selected context.

    Parameters

    • _cm: Editor
    • data: EditorChange | undefined
    • schema: GraphQLSchema | null | undefined
    • explorer: ExplorerContextType | null
    • plugin: PluginContextType | null
    • Optional callback: undefined | ((type: GraphQLNamedType) => void)

    Returns void

renderType

  • renderType(type: GraphQLType, renderNamedType: (namedType: GraphQLNamedType) => Element): Element

renderType

  • renderType(type: GraphQLType, renderNamedType: (namedType: GraphQLNamedType) => Element): Element
  • Parameters

    • type: GraphQLType
    • renderNamedType: (namedType: GraphQLNamedType) => Element
        • (namedType: GraphQLNamedType): Element
        • Parameters

          • namedType: GraphQLNamedType

          Returns Element

    Returns Element

serializeTabState

  • serializeTabState(tabState: TabsState, shouldPersistHeaders?: undefined | false | true): string
  • Parameters

    • tabState: TabsState
    • Optional shouldPersistHeaders: undefined | false | true

    Returns string

serializeTabState

setPropertiesInActiveTab

  • Parameters

    Returns TabsState

setPropertiesInActiveTab

useAutoCompleteLeafs

  • useAutoCompleteLeafs(__namedParameters?: { caller: undefined | Function; getDefaultFieldNames: undefined | GetDefaultFieldNamesFn }): () => string | undefined
  • Parameters

    Returns () => string | undefined

      • (): string | undefined
      • Returns string | undefined

useAutoCompleteLeafs

useChangeHandler

  • useChangeHandler(editor: CodeMirrorEditor | null, callback: ((value: string) => void) | undefined, storageKey: string | null, tabProperty: "variables" | "headers", caller: Function): void
  • Parameters

    • editor: CodeMirrorEditor | null
    • callback: ((value: string) => void) | undefined
    • storageKey: string | null
    • tabProperty: "variables" | "headers"
    • caller: Function

    Returns void

useChangeHandler

  • useChangeHandler(editor: CodeMirrorEditor | null, callback: ((value: string) => void) | undefined, storageKey: string | null, tabProperty: "variables" | "headers", caller: Function): useChangeHandler

useCompletion

  • Parameters

    Returns void

useCompletion

useCopyQuery

  • useCopyQuery(__namedParameters?: { caller: undefined | Function; onCopyQuery: undefined | ((query: string) => void) }): () => void
  • Parameters

    • Optional __namedParameters: { caller: undefined | Function; onCopyQuery: undefined | ((query: string) => void) }
      • caller: undefined | Function
      • onCopyQuery: undefined | ((query: string) => void)

    Returns () => void

      • (): void
      • Returns void

useCopyQuery

  • useCopyQuery(__namedParameters?: { caller: undefined | Function; onCopyQuery: undefined | ((query: string) => void) }): useCopyQuery
  • Parameters

    • Default value __namedParameters: { caller: undefined | Function; onCopyQuery: undefined | ((query: string) => void) } = {}
      • caller: undefined | Function
      • onCopyQuery: undefined | ((query: string) => void)

    Returns useCopyQuery

useDragResize

  • useDragResize(__namedParameters: { defaultSizeRelation: undefined | number; direction: "horizontal" | "vertical"; initiallyHidden: undefined | "first" | "second"; onHiddenElementChange: undefined | onHiddenElementChange; sizeThresholdFirst: undefined | number; sizeThresholdSecond: undefined | number; storageKey: undefined | string }): { dragBarRef: RefObject<HTMLDivElement>; firstRef: RefObject<HTMLDivElement>; hiddenElement: ResizableElement | null; secondRef: RefObject<HTMLDivElement>; setHiddenElement: (value: A) => void }
  • Parameters

    • __namedParameters: { defaultSizeRelation: undefined | number; direction: "horizontal" | "vertical"; initiallyHidden: undefined | "first" | "second"; onHiddenElementChange: undefined | onHiddenElementChange; sizeThresholdFirst: undefined | number; sizeThresholdSecond: undefined | number; storageKey: undefined | string }
      • defaultSizeRelation: undefined | number
      • direction: "horizontal" | "vertical"
      • initiallyHidden: undefined | "first" | "second"
      • onHiddenElementChange: undefined | onHiddenElementChange
      • sizeThresholdFirst: undefined | number
      • sizeThresholdSecond: undefined | number
      • storageKey: undefined | string

    Returns { dragBarRef: RefObject<HTMLDivElement>; firstRef: RefObject<HTMLDivElement>; hiddenElement: ResizableElement | null; secondRef: RefObject<HTMLDivElement>; setHiddenElement: (value: A) => void }

    • dragBarRef: RefObject<HTMLDivElement>
    • firstRef: RefObject<HTMLDivElement>
    • hiddenElement: ResizableElement | null
    • secondRef: RefObject<HTMLDivElement>
    • setHiddenElement: (value: A) => void
        • (value: A): void
        • Parameters

          • value: A

          Returns void

useDragResize

  • useDragResize(__namedParameters: { defaultSizeRelation: number; direction: "horizontal" | "vertical"; initiallyHidden: undefined | "first" | "second"; onHiddenElementChange: undefined | onHiddenElementChange; sizeThresholdFirst: number; sizeThresholdSecond: number; storageKey: undefined | string }): useDragResize
  • Parameters

    • __namedParameters: { defaultSizeRelation: number; direction: "horizontal" | "vertical"; initiallyHidden: undefined | "first" | "second"; onHiddenElementChange: undefined | onHiddenElementChange; sizeThresholdFirst: number; sizeThresholdSecond: number; storageKey: undefined | string }
      • defaultSizeRelation: number
      • direction: "horizontal" | "vertical"
      • initiallyHidden: undefined | "first" | "second"
      • onHiddenElementChange: undefined | onHiddenElementChange
      • sizeThresholdFirst: number
      • sizeThresholdSecond: number
      • storageKey: undefined | string

    Returns useDragResize

Const useEditorState

  • useEditorState(editor: "query" | "variable" | "header"): [string, (val: string) => void]

useHeaderEditor

  • useHeaderEditor(__namedParameters?: { editorTheme: undefined | string; keyMap: undefined | "sublime" | "emacs" | "vim"; onEdit: undefined | onEdit; readOnly: undefined | false | true }, caller?: Function): RefObject<HTMLDivElement>
  • Parameters

    • Optional __namedParameters: { editorTheme: undefined | string; keyMap: undefined | "sublime" | "emacs" | "vim"; onEdit: undefined | onEdit; readOnly: undefined | false | true }
      • editorTheme: undefined | string
      • keyMap: undefined | "sublime" | "emacs" | "vim"
      • onEdit: undefined | onEdit
      • readOnly: undefined | false | true
    • Optional caller: Function

    Returns RefObject<HTMLDivElement>

useHeaderEditor

Const useHeadersEditorState

  • useHeadersEditorState(): [headers: string, setHeaders: (content: string) => void]

useKeyMap

  • useKeyMap(editor: CodeMirrorEditor | null, keys: string[], callback: EmptyCallback | undefined): void
  • Parameters

    • editor: CodeMirrorEditor | null
    • keys: string[]
    • callback: EmptyCallback | undefined

    Returns void

useKeyMap

useMergeQuery

  • useMergeQuery(__namedParameters?: { caller: undefined | Function }): () => void
  • Parameters

    • Optional __namedParameters: { caller: undefined | Function }
      • caller: undefined | Function

    Returns () => void

      • (): void
      • Returns void

useMergeQuery

  • useMergeQuery(__namedParameters?: { caller: undefined | Function }): useMergeQuery

Const useOperationsEditorState

  • useOperationsEditorState