Variables
Const ArgumentIcon
ArgumentIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_ArgumentIcon)
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>> = forwardRef<HTMLDivElement,JSX.IntrinsicElements['div']>((props, ref) => (<div{...props}ref={ref}className={clsx('graphiql-button-group', props.className)}/>))
Const ChevronDownIcon
ChevronDownIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_ChevronDownIcon)
Const ChevronLeftIcon
ChevronLeftIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_ChevronLeftIcon)
Const ChevronUpIcon
ChevronUpIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_ChevronUpIcon)
Const CloseIcon
CloseIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_CloseIcon)
Const CopyIcon
CopyIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_CopyIcon)
Const DEFAULT_EDITOR_THEME
DEFAULT_EDITOR_THEME: "graphiql" = "graphiql"
Const DEFAULT_KEY_MAP
DEFAULT_
KEY_MAP: KeyMap = "sublime"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 DeprecatedArgumentIcon
DeprecatedArgumentIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_DeprecatedArgumentIcon)
Const DeprecatedEnumValueIcon
DeprecatedEnumValueIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_DeprecatedEnumValueIcon)
Const DeprecatedFieldIcon
DeprecatedFieldIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_DeprecatedFieldIcon)
Const Dialog
Dialog: FC<DialogProps> & { 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>> } = Object.assign(DialogRoot, {Close: DialogClose,Title: D.Title,Trigger: D.Trigger,Description: D.Description,})
Const DirectiveIcon
DirectiveIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_DirectiveIcon)
Const DocsFilledIcon
DocsFilledIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_DocsFilledIcon)
Const DocsIcon
DocsIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_DocsIcon)
Const DropdownMenu
DropdownMenu: FC<DropdownMenuProps> & { Button: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>; Content: FC<DropdownMenuContentProps>; Item: FC<DropdownMenuItemProps> } = Object.assign(Root, {Button,Item,Content,})
Const EditorContext
Editor
Context: Context<null | EditorContextType> = createNullableContext<EditorContextType>('EditorContext')Const EnumValueIcon
EnumValueIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_EnumValueIcon)
Const ExecutionContext
Execution
Context: Context<null | ExecutionContextType> = createNullableContext<ExecutionContextType>('ExecutionContext')Const FieldIcon
FieldIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_FieldIcon)
Const HistoryIcon
HistoryIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_HistoryIcon)
Const ImagePreview
ImagePreview: FC<ImagePreviewProps> & { shouldRender: any } = Object.assign(ImagePreview_, {shouldRender(token: Token) {const url = tokenToURL(token);return url ? isImageURL(url) : false;},})
Const ImplementsIcon
ImplementsIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_ImplementsIcon)
Const KeyboardShortcutIcon
KeyboardShortcutIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_KeyboardShortcutIcon)
Const MagnifyingGlassIcon
MagnifyingGlassIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_MagnifyingGlassIcon)
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>> = generateIcon(_MergeIcon)
Const PenIcon
PenIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_PenIcon)
Const PlayIcon
PlayIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_PlayIcon)
Const PluginContext
Plugin
Context: Context<null | PluginContextType> = createNullableContext<PluginContextType>('PluginContext')Const PlusIcon
PlusIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_PlusIcon)
Const PrettifyIcon
PrettifyIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_PrettifyIcon)
Const ReloadIcon
ReloadIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_ReloadIcon)
Const RootTypeIcon
RootTypeIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_RootTypeIcon)
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 SchemaContext
Schema
Context: Context<null | SchemaContextType> = createNullableContext<SchemaContextType>('SchemaContext')Const SettingsIcon
SettingsIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_SettingsIcon)
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>> = generateIcon(_StarFilledIcon)
Const StarIcon
StarIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_StarIcon)
Const StopIcon
StopIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_StopIcon)
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>> } = Object.assign(TabRoot, {Button: TabButton,Close: TabClose,})
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>> = forwardRef<HTMLButtonElement,ToolbarButtonProps & JSX.IntrinsicElements['button']>(({ label, onClick, ...props }, ref) => {const [error, setError] = useState<Error | null>(null);const handleClick: MouseEventHandler<HTMLButtonElement> = event => {try {// Optional chaining inside try-catch isn't supported yet by react-compilerif (onClick) {onClick(event);}setError(null);} catch (err) {setError(err instanceof Error? err: new Error(`Toolbar button click failed: ${err}`),);}};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: ToolbarMenuRoot & { Item: FC<DropdownMenuItemProps> } = Object.assign(ToolbarMenuRoot, {Item: DropdownMenu.Item,})
Const Tooltip
Tooltip: FC<TooltipContentProps & { label: ReactNode }> & { Provider: FC<TooltipProviderProps> } = Object.assign(TooltipRoot, {Provider: T.Provider,})
Const TrashIcon
TrashIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_TrashIcon)
Const TypeIcon
TypeIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_TypeIcon)
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 invalidCharacters
invalidCharacters: string[] = Array.from({ length: 11 }, (_, i) => {// \u2000 -> \u200areturn String.fromCharCode(0x2000 + i);}).concat(['\u2028', '\u2029', '\u202f', '\u00a0'])
Const isMacOs
isMacOs: boolean = typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac')
Const markdown
markdown: MarkdownIt = new MarkdownIt({// we don't want to convert \n to <br> because in markdown a single newline is not a line break// https://github.com/graphql/graphiql/issues/3155breaks: false,linkify: true,})
Const useEditorContext
useEditorContext: useGivenContext = createContextHook(EditorContext)
Const useExecutionContext
useExecutionContext: useGivenContext = createContextHook(ExecutionContext)
Const usePluginContext
usePluginContext: useGivenContext = createContextHook(PluginContext)
Const useSchemaContext
useSchemaContext: useGivenContext = createContextHook(SchemaContext)
Const useStorageContext
useStorageContext: useGivenContext = createContextHook(StorageContext)
Changelog | API Docs | NPM
@graphiql/reactA 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
GraphiQLProvidercomponent 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 methodcreateGraphiQLFetcherfrom the@graphiql/toolkitpackage.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/style.css.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/reactcan be found in the reference implementation of a GraphQL IDE - GraphiQL - in thegraphiqlpackage.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/reactStorageContext: Provides a storage API that can be used to persist state in the browser (by default usinglocalStorage)EditorContext: Manages all the editors and tabsSchemaContext: Fetches, validates and stores the GraphQL schemaExecutionContext: Executes GraphQL requestsHistoryContext: Persists executed requests in storageExplorerContext: Handles the state for the docs explorerAll 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/reacthave 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.cssfile.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/reactto use transparent colors by passing the value of the CSS variable in thehslafunction. 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/reactlocally - in particular when working on thegraphiqlpackage - all you need to do is runyarn devin the package folder in a separate terminal. This will build the package using Vite. When using it in combination withyarn dev:graphiql(running in the repo root) this will give you auto-reloading when working ongraphiqland@graphiql/reactsimultaneously.