graphiql-explorer | GraphQL Official LSP Documentation

Interactive explorer plugin for GraphiQL.

Try it live with the GraphiQL Plugins Demo.

Created by OneGraph

OneGraph provides easy, consistent access to the APIs that underlie your business--all through the power of GraphQL.

Example usage

The recommended way to use graphiql-explorer is via the graphiql plugin - @graphiql/plugin-explorer

Read the rationale on the OneGraph blog.

Changes from the OneGraph version

Converted to Typescript
Split into multiple files
new ExplorerInner and GraphiQLExplorerInnerProps exports which remove some of the presentation complexity for the graphiql plugin.
uses modern targets and only exports esm build, does not export cjs, bundle and transpile as needed

Customizing styles

The default styling matches for the Explorer matches the default styling for GraphiQL. If you've customized your GraphiQL styling, you can customize the Explorer's styling to match.

The Explorer accepts a colors prop as a map of the class names in GraphiQL's css to hex colors. If you've edited the GraphiQL class names that control colors (e.g. cm-def, cm-variable, cm-string, etc.) use those same colors in the colors map. The naming of the keys in the colors map tries to align closely with the names of the class names in GraphiQL's css (note that the Explorer can't just apply the classes because of conflicts with how the css file styles inputs).

Example style map:

<Explorer
  colors={{
    keyword: '#B11A04',
    // OperationName, FragmentName
    def: '#D2054E',
    // FieldName
    property: '#1F61A0',
    // FieldAlias
    qualifier: '#1C92A9',
    // ArgumentName and ObjectFieldName
    attribute: '#8B2BB9',
    number: '#2882F9',
    string: '#D64292',
    // Boolean
    builtin: '#D47509',
    // Enum
    string2: '#0B7FC7',
    variable: '#397D13',
    // Type
    atom: '#CA9800',
  }}
/>

Customizing arrows and checkboxes

The explorer accepts props for setting custom checkboxes (for leaf fields) and arrows (for object fields).

The props are arrowOpen, arrowClosed, checkboxChecked, and checkboxUnchecked. You can pass any react node for those props.

The defaults are

arrowOpen

<svg width="12" height="9">
  <path fill="#666" d="M 0 2 L 9 2 L 4.5 7.5 z" />
</svg>

arrowClosed

<svg width="12" height="9">
  <path fill="#666" d="M 0 0 L 0 9 L 5.5 4.5 z" />
</svg>

checkboxChecked

<svg
  style={{ marginRight: '3px', marginLeft: '-3px' }}
  width="12"
  height="12"
  viewBox="0 0 18 18"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0ZM16 16H2V2H16V16ZM14.99 6L13.58 4.58L6.99 11.17L4.41 8.6L2.99 10.01L6.99 14L14.99 6Z"
    fill="#666"
  />
</svg>

checkboxUnchecked

<svg
  style={{ marginRight: '3px', marginLeft: '-3px' }}
  width="12"
  height="12"
  viewBox="0 0 18 18"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M16 2V16H2V2H16ZM16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0Z"
    fill="#CCC"
  />
</svg>

Customizing the buttons to create new operations

You can modify the styles for the buttons that allow you to create new operations.

Pass the styles prop when you create the component. It's an object with two keys, explorerActionsStyle and buttonStyle.

Example styles map:

<Explorer
  styles={{
    buttonStyle: {
      fontSize: '1.2em',
      padding: '0px',
      backgroundColor: 'white',
      border: 'none',
      margin: '5px 0px',
      height: '40px',
      width: '100%',
      display: 'block',
      maxWidth: 'none',
    },

    explorerActionsStyle: {
      margin: '4px -8px -8px',
      paddingLeft: '8px',
      bottom: '0px',
      width: '100%',
      textAlign: 'center',
      background: 'none',
      borderTop: 'none',
      borderBottom: 'none',
    },
  }}
/>

Index

References

Classes

Type aliases

Variables

DEFAULT_DOCUMENT

Functions

Object literals

References

Explorer

Renames and re-exports ExplorerWrapper

ExplorerInner

Renames and re-exports Explorer

GraphiQLExplorerInnerProps

Renames and re-exports Props

GraphiQLExplorerProps

Renames and re-exports WrapperProps

default

Renames and re-exports ExplorerWrapper

Type aliases

AvailableFragments

AvailableFragments: {}

Type declaration

[key: string]: FragmentDefinitionNode

Colors

Colors: { atom: string; attribute: string; builtin: string; def: string; keyword: string; number: string; property: string; qualifier: string; string: string; string2: string; variable: string }

Type declaration

atom: string
attribute: string
builtin: string
def: string
keyword: string
number: string
property: string
qualifier: string
string: string
string2: string
variable: string

CommitOptions

CommitOptions: { commit: boolean } | null

Field

Field: GraphQLField<any, any>

GetDefaultScalarArgValue

GetDefaultScalarArgValue: (parentField: Field, arg: GraphQLArgument | GraphQLInputField, underlyingArgType: GraphQLEnumType | GraphQLScalarType) => ValueNode

Type declaration

- (parentField: Field, arg: GraphQLArgument | GraphQLInputField, underlyingArgType: GraphQLEnumType | GraphQLScalarType): ValueNode
- Parameters
  - parentField: Field
  - arg: GraphQLArgument | GraphQLInputField
  - underlyingArgType: GraphQLEnumType | GraphQLScalarType
  Returns ValueNode

MakeDefaultArg

MakeDefaultArg: (parentField: Field, arg: GraphQLArgument | GraphQLInputField) => boolean

Type declaration

- (parentField: Field, arg: GraphQLArgument | GraphQLInputField): boolean
- Parameters
  - parentField: Field
  - arg: GraphQLArgument | GraphQLInputField
  Returns boolean

NewOperationType

NewOperationType: "query" | "mutation" | "subscription"

OperationType

OperationType: "query" | "mutation" | "subscription" | "fragment"

Props

Props: { arrowClosed?: null | ReactElement; arrowOpen?: null | ReactElement; checkboxChecked?: null | ReactElement; checkboxUnchecked?: null | ReactElement; colors?: null | Colors; externalFragments?: FragmentDefinitionNode[]; getDefaultFieldNames?: null | ((type: GraphQLObjectType) => Array<string>); getDefaultScalarArgValue?: null | GetDefaultScalarArgValue; hideActions?: undefined | false | true; makeDefaultArg?: null | MakeDefaultArg; onEdit: (edit: string) => void; onRunOperation?: undefined | ((name: null | string) => void); query: string; schema?: null | GraphQLSchema; showAttribution: boolean; styles?: null | { actionButtonStyle?: StyleMap; buttonStyle?: StyleMap; explorerActionsStyle?: StyleMap } }

Type declaration

Optional arrowClosed?: null | ReactElement

alternative arrowClosed icon
Optional arrowOpen?: null | ReactElement

alternative arrowOpen icon
Optional checkboxChecked?: null | ReactElement

alternative checkboxChecked icon
Optional checkboxUnchecked?: null | ReactElement

alternative checkboxUnchecked icon
Optional colors?: null | Colors
Optional externalFragments?: FragmentDefinitionNode[]

Provide external fragments to be used in the explorer
Optional getDefaultFieldNames?: null | ((type: GraphQLObjectType) => Array<string>)

the same prop as GraphiQLProps.getDefaultFieldNames provide an array of field names to be expanded by default
Optional getDefaultScalarArgValue?: null | GetDefaultScalarArgValue
Optional hideActions?: undefined | false | true

Decide whether to render the dropdown to add operations
Optional makeDefaultArg?: null | MakeDefaultArg
onEdit: (edit: string) => void
- - (edit: string): void
  - Parameters
    - edit: string
    Returns void
Optional onRunOperation?: undefined | ((name: null | string) => void)
query: string
Optional schema?: null | GraphQLSchema
showAttribution: boolean
Optional styles?: null | { actionButtonStyle?: StyleMap; buttonStyle?: StyleMap; explorerActionsStyle?: StyleMap }

Provide custom styles. Soon to be replaced with stylesheets and css variables

RootViewProps

RootViewProps: { availableFragments: AvailableFragments; definition: FragmentDefinitionNode | OperationDefinitionNode; fields: null | GraphQLFieldMap<any, any>; getDefaultFieldNames: (type: GraphQLObjectType) => Array<string>; getDefaultScalarArgValue: GetDefaultScalarArgValue; isLast: boolean; makeDefaultArg: null | MakeDefaultArg; name: null | string; onCommit: (document: DocumentNode) => void; onEdit: (operationDef: null | OperationDefinitionNode | FragmentDefinitionNode, options: { commit: boolean } | null) => DocumentNode; onMount: (rootViewElId: string) => void; onOperationClone: () => void; onOperationDestroy: () => void; onOperationRename: (query: string) => void; onRunOperation: (name: null | string) => void; onTypeName: null | string; operationType: OperationType; schema: GraphQLSchema; styleConfig: StyleConfig }

Type declaration

availableFragments: AvailableFragments
definition: FragmentDefinitionNode | OperationDefinitionNode
fields: null | GraphQLFieldMap<any, any>
getDefaultFieldNames: (type: GraphQLObjectType) => Array<string>
- - (type: GraphQLObjectType): Array<string>
  - Parameters
    - type: GraphQLObjectType
    Returns Array<string>
getDefaultScalarArgValue: GetDefaultScalarArgValue
isLast: boolean
makeDefaultArg: null | MakeDefaultArg
name: null | string
onCommit: (document: DocumentNode) => void
- - (document: DocumentNode): void
  - Parameters
    - document: DocumentNode
    Returns void
onEdit: (operationDef: null | OperationDefinitionNode | FragmentDefinitionNode, options: { commit: boolean } | null) => DocumentNode
- - (operationDef: null | OperationDefinitionNode | FragmentDefinitionNode, options: { commit: boolean } | null): DocumentNode
  - Parameters
    - operationDef: null | OperationDefinitionNode | FragmentDefinitionNode
    - options: { commit: boolean } | null
    Returns DocumentNode
onMount: (rootViewElId: string) => void
- - (rootViewElId: string): void
  - Parameters
    - rootViewElId: string
    Returns void
onOperationClone: () => void
- - (): void
  - Returns void
onOperationDestroy: () => void
- - (): void
  - Returns void
onOperationRename: (query: string) => void
- - (query: string): void
  - Parameters
    - query: string
    Returns void
onRunOperation: (name: null | string) => void
- - (name: null | string): void
  - Parameters
    - name: null | string
    Returns void
onTypeName: null | string
operationType: OperationType
schema: GraphQLSchema
styleConfig: StyleConfig

Selections

Selections: ReadonlyArray<SelectionNode>

StyleConfig

StyleConfig: { arrowClosed: ReactElement; arrowOpen: ReactElement; checkboxChecked: ReactElement; checkboxUnchecked: ReactElement; colors: Colors; styles: Styles }

Type declaration

arrowClosed: ReactElement
arrowOpen: ReactElement
checkboxChecked: ReactElement
checkboxUnchecked: ReactElement
colors: Colors
styles: Styles

StyleMap

StyleMap: Record<string, any>

Styles

Styles: { actionButtonStyle: StyleMap; buttonStyle: StyleMap; explorerActionsStyle: StyleMap }

Type declaration

actionButtonStyle: StyleMap
buttonStyle: StyleMap
explorerActionsStyle: StyleMap

WrapperProps

WrapperProps: { explorerIsOpen: boolean; onToggleExplorer: () => void; title?: undefined | string; width?: undefined | number } & Props

Variables

Const DEFAULT_DOCUMENT

DEFAULT_DOCUMENT: DocumentNode = {kind: Kind.DOCUMENT,definitions: [DEFAULT_OPERATION],} as DocumentNode

Functions

Checkbox

Checkbox(props: { checked: boolean; styleConfig: StyleConfig }): ReactElement

- Defined in packages/graphiql-explorer/src/checkbox.tsx:7
Parameters
- props: { checked: boolean; styleConfig: StyleConfig }
  - checked: boolean
  - styleConfig: StyleConfig
Returns ReactElement

capitalize

capitalize(string: string): string

- Defined in packages/graphiql-explorer/src/lib/utils.ts:48
Parameters
- string: string
Returns string

coerceArgValue

coerceArgValue(argType: GraphQLScalarType | GraphQLInputType, value: string): ValueNode
coerceArgValue(argType: GraphQLEnumType, value: unknown): ValueNode

- Defined in packages/graphiql-explorer/src/lib/coerce-arg-value.ts:11
Parameters
- argType: GraphQLScalarType | GraphQLInputType
- value: string
Returns ValueNode
- Defined in packages/graphiql-explorer/src/lib/coerce-arg-value.ts:16
Parameters
- argType: GraphQLEnumType
- value: unknown
Returns ValueNode

Const defaultArrowClosed

defaultArrowClosed(): Element

- Defined in packages/graphiql-explorer/src/style.tsx:36
Returns Element

Const defaultArrowOpen

defaultArrowOpen(): Element

- Defined in packages/graphiql-explorer/src/style.tsx:30
Returns Element

Const defaultCheckboxChecked

defaultCheckboxChecked(): Element

- Defined in packages/graphiql-explorer/src/style.tsx:42
Returns Element

Const defaultCheckboxUnchecked

defaultCheckboxUnchecked(): Element

- Defined in packages/graphiql-explorer/src/style.tsx:58
Returns Element

defaultGetDefaultFieldNames

defaultGetDefaultFieldNames(type: GraphQLObjectType): Array<string>

- Defined in packages/graphiql-explorer/src/lib/defaults.ts:21
Parameters
- type: GraphQLObjectType
Returns Array<string>

defaultGetDefaultScalarArgValue

defaultGetDefaultScalarArgValue(_parentField: Field, _arg: GraphQLArgument | GraphQLInputField, argType: GraphQLEnumType | GraphQLScalarType): ValueNode

- Defined in packages/graphiql-explorer/src/lib/defaults.ts:127
Parameters
- _parentField: Field
- _arg: GraphQLArgument | GraphQLInputField
- argType: GraphQLEnumType | GraphQLScalarType
Returns ValueNode

defaultInputObjectFields

defaultInputObjectFields(getDefaultScalarArgValue: GetDefaultScalarArgValue, makeDefaultArg: null | MakeDefaultArg, parentField: Field, fields: Array<GraphQLInputField>): Array<ObjectFieldNode>

- Defined in packages/graphiql-explorer/src/lib/defaults.ts:66
Parameters
- getDefaultScalarArgValue: GetDefaultScalarArgValue
- makeDefaultArg: null | MakeDefaultArg
- parentField: Field
- fields: Array<GraphQLInputField>
Returns Array<ObjectFieldNode>

defaultValue

defaultValue(argType: GraphQLEnumType | GraphQLScalarType): ValueNode

- Defined in packages/graphiql-explorer/src/lib/defaults.ts:106
Parameters
- argType: GraphQLEnumType | GraphQLScalarType
Returns ValueNode

isRequiredArgument

isRequiredArgument(arg: GraphQLArgument): boolean

- Defined in packages/graphiql-explorer/src/lib/utils.ts:44
Parameters
- arg: GraphQLArgument
Returns boolean

memoizeParseQuery

memoizeParseQuery(query: string): DocumentNode

- Defined in packages/graphiql-explorer/src/lib/utils.ts:86
Parameters
- query: string
Returns DocumentNode

unwrapInputType

unwrapInputType(inputType: GraphQLInputType): GraphQLEnumType | GraphQLInputObjectType | GraphQLScalarType<unknown, unknown>

- Defined in packages/graphiql-explorer/src/lib/utils.ts:37
Parameters
- inputType: GraphQLInputType
Returns GraphQLEnumType | GraphQLInputObjectType | GraphQLScalarType<unknown, unknown>

unwrapOutputType

unwrapOutputType(outputType: GraphQLOutputType): GraphQLInterfaceType | GraphQLUnionType | GraphQLEnumType | GraphQLScalarType<unknown, unknown> | GraphQLObjectType<any, any>

- Defined in packages/graphiql-explorer/src/lib/utils.ts:29
Parameters
- outputType: GraphQLOutputType
Returns GraphQLInterfaceType | GraphQLUnionType | GraphQLEnumType | GraphQLScalarType<unknown, unknown> | GraphQLObjectType<any, any>

Object literals

Const defaultColors

defaultColors: object

atom

atom: string = "#CA9800"

attribute

attribute: string = "#8B2BB9"

builtin

builtin: string = "#D47509"

def

def: string = "#D2054E"

keyword

keyword: string = "#B11A04"

number

number: string = "#2882F9"

property

property: string = "#1F61A0"

qualifier

qualifier: string = "#1C92A9"

string

string: string = "#D64292"

string2

string2: string = "#0B7FC7"

variable

variable: string = "#397D13"

Const defaultStyles

defaultStyles: object

explorerActionsStyle

explorerActionsStyle: StyleHTMLAttributes<HTMLDivElement> = {margin: '4px -8px -8px',paddingLeft: '8px',bottom: '0px',width: '100%',textAlign: 'center',background: 'none',borderTop: 'none',borderBottom: 'none',} as React.StyleHTMLAttributes<HTMLDivElement>

actionButtonStyle

actionButtonStyle: object

backgroundColor

backgroundColor: string = "white"

border

border: string = "none"

display

display: string = "inline-block"

height

height: string = "15px"

margin

margin: string = "0px"

maxWidth

maxWidth: string = "none"

padding

padding: string = "0px"

width

width: string = "15px"

buttonStyle

buttonStyle: object

backgroundColor

backgroundColor: string = "white"

border

border: string = "none"

display

display: string = "block"

height

height: string = "40px"

margin

margin: string = "5px 0px"

maxWidth

maxWidth: string = "none"

padding

padding: string = "0px"

width

width: string = "100%"

Created by OneGraph

Example usage

Changes from the OneGraph version

Customizing styles

Customizing colors

Customizing arrows and checkboxes

Customizing the buttons to create new operations

Index

References

Classes

Type aliases

Variables

Functions

Object literals

References

Explorer

ExplorerInner

GraphiQLExplorerInnerProps

GraphiQLExplorerProps

default

Type aliases

AvailableFragments

Type declaration

[key: string]: FragmentDefinitionNode

Colors

Type declaration

atom: string

attribute: string

builtin: string

def: string

keyword: string

number: string

property: string

qualifier: string

string: string

string2: string

variable: string

CommitOptions

Field

GetDefaultScalarArgValue

Type declaration

Parameters

parentField: Field

arg: GraphQLArgument | GraphQLInputField

underlyingArgType: GraphQLEnumType | GraphQLScalarType

Returns ValueNode

MakeDefaultArg

Type declaration

Parameters

parentField: Field

arg: GraphQLArgument | GraphQLInputField

Returns boolean

NewOperationType

OperationType

Props

Type declaration

Optional arrowClosed?: null | ReactElement

Optional arrowOpen?: null | ReactElement

Optional checkboxChecked?: null | ReactElement

Optional checkboxUnchecked?: null | ReactElement

Optional colors?: null | Colors

Optional externalFragments?: FragmentDefinitionNode[]

Optional getDefaultFieldNames?: null | ((type: GraphQLObjectType) => Array<string>)

Optional getDefaultScalarArgValue?: null | GetDefaultScalarArgValue

Optional hideActions?: undefined | false | true

Optional makeDefaultArg?: null | MakeDefaultArg

onEdit: (edit: string) => void

Parameters

edit: string

Returns void

Optional onRunOperation?: undefined | ((name: null | string) => void)

query: string

Optional schema?: null | GraphQLSchema

showAttribution: boolean

Optional styles?: null | { actionButtonStyle?: StyleMap; buttonStyle?: StyleMap; explorerActionsStyle?: StyleMap }

RootViewProps

Type declaration

availableFragments: AvailableFragments

definition: FragmentDefinitionNode | OperationDefinitionNode

fields: null | GraphQLFieldMap<any, any>