Variables
Const ArgumentIcon
ArgumentIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_ArgumentIcon)
Const Button
Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => (<button{...props}ref={ref}className={cn('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,ComponentPropsWithoutRef<'div'>>((props, ref) => (<div{...props}ref={ref}className={cn('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_QUERY
DEFAULT_QUERY: string = `# 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: ${KEY_MAP.prettify.key} (or press the prettify button)## Merge fragments: ${KEY_MAP.mergeFragments.key} (or press the merge button)## Run Query: ${formatShortcutForOS(KEY_MAP.runQuery.key, 'Cmd')} (or press the play button)## Auto Complete: ${KEY_MAP.autoComplete.key} (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 EnumValueIcon
EnumValueIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_EnumValueIcon)
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(path: string) {const url = pathToURL(path);return url ? /\.(bmp|gif|jpe?g|png|svg|webp)$/.test(url.pathname) : false;},})
Const ImplementsIcon
ImplementsIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_ImplementsIcon)
Const KEY_BINDINGS
KEY_BINDINGS: { copyQuery: object; mergeFragments: object; prettify: object; runQuery: object } = {prettify: {id: 'graphql-prettify',label: 'Prettify Editors',contextMenuGroupId: 'graphql',keybindings: KEY_MAP.prettify.keybindings,},mergeFragments: {id: 'graphql-merge',label: 'Merge Fragments into Query',contextMenuGroupId: 'graphql',keybindings: KEY_MAP.mergeFragments.keybindings,},runQuery: {id: 'graphql-run',label: 'Run Operation',contextMenuGroupId: 'graphql',keybindings: KEY_MAP.runQuery.keybindings,},copyQuery: {id: 'graphql-copy',label: 'Copy Query',contextMenuGroupId: 'graphql',keybindings: KEY_MAP.copyQuery.keybindings,},} as const
Type declaration
-
copyQuery: object
-
contextMenuGroupId: "graphql"
-
id: "graphql-copy"
-
keybindings: number[]
-
label: "Copy Query"
-
mergeFragments: object
-
contextMenuGroupId: "graphql"
-
id: "graphql-merge"
-
keybindings: number[]
-
label: "Merge Fragments into Query"
-
prettify: object
-
contextMenuGroupId: "graphql"
-
id: "graphql-prettify"
-
keybindings: number[]
-
label: "Prettify Editors"
-
runQuery: object
-
contextMenuGroupId: "graphql"
-
id: "graphql-run"
-
keybindings: number[]
-
label: "Run Operation"
Const KEY_MAP
KEY_MAP: Readonly<{ autoComplete: object; copyQuery: object; mergeFragments: object; prettify: object; refetchSchema: object; runQuery: object; searchInDocs: object; searchInEditor: object }> = Object.freeze({prettify: {key: 'Shift-Ctrl-P',keybindings: [KeyMod.Shift | KeyMod.WinCtrl | KeyCode.KeyP],},mergeFragments: {key: 'Shift-Ctrl-M',keybindings: [KeyMod.Shift | KeyMod.WinCtrl | KeyCode.KeyM],},runQuery: {key: 'Ctrl-Enter',keybindings: [KeyMod.CtrlCmd | KeyCode.Enter],},autoComplete: {key: 'Space',},copyQuery: {key: 'Shift-Ctrl-C',keybindings: [KeyMod.Shift | KeyMod.WinCtrl | KeyCode.KeyC],},refetchSchema: {key: 'Shift-Ctrl-R',},searchInEditor: {key: 'Ctrl-F',},searchInDocs: {key: 'Ctrl-Alt-K',},})
Const KeyboardShortcutIcon
KeyboardShortcutIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_KeyboardShortcutIcon)
Const MONACO_THEME_NAME
MONACO_THEME_NAME: { dark: "graphiql-DARK"; light: "graphiql-LIGHT" } = {dark: 'graphiql-DARK',light: 'graphiql-LIGHT',} as const
Type declaration
-
dark: "graphiql-DARK"
-
light: "graphiql-LIGHT"
Const MagnifyingGlassIcon
MagnifyingGlassIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_MagnifyingGlassIcon)
Const MarkdownContent
MarkdownContent: ForwardRefExoticComponent<MarkdownContentProps & RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement, MarkdownContentProps>(({ children, onlyShowFirstChild, type, ...props }, ref) => (<div{...props}ref={ref}className={cn(`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 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"; persistHeaders: "shouldPersistHeaders"; query: "query"; tabs: "tabState"; theme: "theme"; variables: "variables"; visiblePlugin: "visiblePlugin" } = {headers: 'headers',visiblePlugin: 'visiblePlugin',query: 'query',variables: 'variables',tabs: 'tabState',persistHeaders: 'shouldPersistHeaders',theme: 'theme',} as const
Type declaration
-
headers: "headers"
-
persistHeaders: "shouldPersistHeaders"
-
query: "query"
-
tabs: "tabState"
-
theme: "theme"
-
variables: "variables"
-
visiblePlugin: "visiblePlugin"
Const SettingsIcon
SettingsIcon: FC<SVGProps<SVGSVGElement>> = generateIcon(_SettingsIcon)
Const Spinner
Spinner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>> = forwardRef<HTMLDivElement,ComponentPropsWithoutRef<'div'>>((props, ref) => (<div{...props}ref={ref}className={cn('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 Tab
Tab: ForwardRefExoticComponent<Omit<TabProps, "ref"> & 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={cn('graphiql-tabs', className)}>{children}</Reorder.Group>),)
Const ToolbarButton
ToolbarButton: ForwardRefExoticComponent<ToolbarButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<HTMLButtonElement, ToolbarButtonProps>(({ 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={cn('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: FC<ToolbarMenuProps> & { 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 URI_NAME
URI_NAME: { operation: "operation.graphql"; requestHeaders: "request-headers.json"; response: "response.json"; schema: "schema.graphql"; variables: "variables.json" } = {operation: 'operation.graphql',schema: 'schema.graphql',variables: 'variables.json',requestHeaders: 'request-headers.json',response: 'response.json',} as const
Type declaration
-
operation: "operation.graphql"
-
requestHeaders: "request-headers.json"
-
response: "response.json"
-
schema: "schema.graphql"
-
variables: "variables.json"
Const UnStyledButton
UnStyledButton: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>> = forwardRef<HTMLButtonElement,UnStyledButtonProps>((props, ref) => (<button{...props}ref={ref}className={cn('graphiql-un-styled', props.className)}/>))
Const createBoundedUseStore
createBoundedUseStore: <S>(store: S) => { (): ExtractState<S>; <T>(selector: (state: ExtractState<S>) => T): T } = (store => selector => {// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- selector can be `undefined`return useStore(store, selector && useShallow(selector));}) as <S extends StoreApi<unknown>>(store: S,) => {(): ExtractState<S>;<T>(selector: (state: ExtractState<S>) => T): T;}
Type declaration
-
- <S>(store: S): { (): ExtractState<S>; <T>(selector: (state: ExtractState<S>) => T): T }
-
Type parameters
Parameters
Returns { (): ExtractState<S>; <T>(selector: (state: ExtractState<S>) => T): T }
-
- (): ExtractState<S>
- <T>(selector: (state: ExtractState<S>) => T): T
-
Returns ExtractState<S>
-
Type parameters
Parameters
-
selector: (state: ExtractState<S>) => T
-
- (state: ExtractState<S>): T
Returns T
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 monacoStore
monacoStore: StoreApi<MonacoStoreType> = createStore<MonacoStoreType>((set, get) => ({actions: {async initialize() {const isInitialized = Boolean(get().monaco);if (isInitialized) {return;}const [monaco, { initializeMode }] = await Promise.all([import('monaco-graphql/esm/monaco-editor.js'),import('monaco-graphql/esm/lite.js'),]);globalThis.__MONACO = monaco;monaco.languages.json.jsonDefaults.setDiagnosticsOptions(JSON_DIAGNOSTIC_OPTIONS,);monaco.editor.defineTheme(MONACO_THEME_NAME.dark, MONACO_THEME_DATA.dark);monaco.editor.defineTheme(MONACO_THEME_NAME.light,MONACO_THEME_DATA.light,);if (navigator.userAgent.includes('Firefox/')) {void patchFirefox();}const monacoGraphQL = initializeMode({diagnosticSettings: MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS,});set({ monaco, monacoGraphQL });},},}))
Const useMonaco
useMonaco: { (): ExtractState<S>; <T>(selector: (state: ExtractState<S>) => T): T } = createBoundedUseStore(monacoStore)
Type declaration
-
- (): ExtractState<S>
- <T>(selector: (state: ExtractState<S>) => T): T
-
Returns ExtractState<S>
-
Type parameters
Parameters
-
selector: (state: ExtractState<S>) => T
-
- (state: ExtractState<S>): T
Returns T
Const useStorageContext
useStorageContext: useStorage = useStorage
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 an operation 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 Stores
GraphiQL uses a set of state management stores, each responsible for a specific part of the IDE's behavior. These stores contain all logic related to state management and can be accessed via custom React hooks.
Core Hooks
useMonaco: Accessmonaco-editorexports and themonaco-graphqlinstance. Designed for safe use in SSR environments.useGraphiQL: Access the current state.useGraphiQLActions: Trigger actions that mutate the state. This hook never rerenders.The
useGraphiQLActionshook exposes all actions across store slices. TheuseGraphiQLhook provides access to the following store slices:storagelocalStorage)editorexecutionpluginschemathemeUsage Example
import { useGraphiQL, useGraphiQLActions } from '@graphiql/react'; // Get an action to fetch the schema and an action to change theme const { introspect, setTheme } = useGraphiQLActions(); // Use a selector to access specific parts of the state like current schema and theme const { schema, theme } = useGraphiQL(state => ({ schema: state.schema, theme: state.theme, }));All store properties are documented using TSDoc 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.