Options
All
  • Public
  • Public/Protected
  • All
Menu

Package graphiql

GraphiQL

Security Notice: All versions of graphiql < 1.4.3 are vulnerable to an XSS attack in cases where the GraphQL server to which the GraphiQL web app connects is not trusted. Learn more in our security advisory.

Breaking Changes & Improvements: several interfaces are being dropped for new ones for GraphiQL 2.0.0! Read more in this issue

graphiql@2.0.0-beta is a much larger ongoing effort that introduces plugins, i18n, and so many more features after a substantial rewrite using modern react.

NPM jsDelivr hits (npm) npm downloads Snyk Vulnerabilities for npm package npm bundle size (version) npm bundle size (version) License Discord Channel /ˈɡrafək(ə)l/ A graphical interactive in-browser GraphQL IDE. Try the live demo.

Features

  • Syntax highlighting.
  • Intelligent type ahead of fields, arguments, types, and more.
  • Real-time error highlighting and reporting for queries and variables.
  • Automatic query and variables completion.
  • Automatically adds required fields to queries.
  • Documentation explorer, search, with markdown support.
  • Query History using local storage
  • Run and inspect query results using any promise that resolves JSON results. HTTPS or WSS not required.
  • Supports full GraphQL Language Specification:
    • Queries, Mutations, Subscriptions, Fragments, Unions, directives, multiple operations per query, etc

Live Demos

We have a few demos of master branch via the default netlify build (the same URL paths apply to deploy previews on PRs):

  1. graphiql.min.js demo - the min.js bundle for the current ref
  2. graphiql.js demo - development build is nice for react inspector, debugging, etc
  3. bundle analyzer for graphiql.min.js

Examples

Getting started

Modules

You can use the graphiql module, however bear in mind that react react-dom and graphql will all need to be present already for it to work, as they are peerDependencies

With npm:

npm install --save graphiql react react-dom graphql

Alternatively, if you are using yarn:

yarn add graphiql react react-dom graphql

UMD

With unpkg/jsdelivr, etc:

<link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
<script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script>

(see: Usage UMD Bundle below for more required script tags)

Usage

Build for the web with webpack or browserify, or use the pre-bundled graphiql.js file. See the cdn example in the git repository to see how to use the pre-bundled file, or see the webpack example to see how to bundle an application using the GraphiQL component.

Usage: NPM module

Note: If you are having webpack issues or questions about webpack, make sure you've cross-referenced your webpack configuration with our own webpack example first. We now have tests in CI that ensure this always builds, and we ensure it works end-to-end with every publish.

Using another GraphQL service? Here's how to get GraphiQL set up:

GraphiQL provides a React component responsible for rendering the UI, which should be provided with a required `fetcher function for executing GraphQL operations against your schema.

For HTTP transport implementations, we recommend using the fetch standard API, but you can use anything that matches the type signature, including async iterables and observables.

You can also install @graphiql/create-fetcher to make it easier to create a simple fetcher for conventional http and websockets transports. It uses graphql-ws@4.x protocol by default.

import React from 'react';
import ReactDOM from 'react-dom';

import GraphiQL from 'graphiql';
import { createGraphiQLFetcher } from '@graphiql/toolkit';

const fetcher = createGraphiQLFetcher({
  url: window.location.origin + '/graphql',
});

ReactDOM.render(
  <GraphiQL fetcher={fetcher} editorTheme={'dracula'} />,
  document.body,
);

Read more about using createGraphiQLFetcher in the readme to learn how to add headers, support the legacy subsriptions-transport-ws protocol, and more.

Usage: UMD Bundle over CDN (Unpkg, JSDelivr, etc)

Don't forget to include the CSS file on the page! If you're using npm or yarn, you can find it in node_modules/graphiql/graphiql.css, or you can download it from the releases page.

For an example of setting up a GraphiQL, check out the example in this repository which also includes a few useful features highlighting GraphiQL's API.

The most minimal way to set up GraphiQL is a single index.html file:

<html>
  <head>
    <title>Simple GraphiQL Example</title>
    <link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
  </head>
  <body style="margin: 0;">
    <div id="graphiql" style="height: 100vh;"></div>

    <script
      crossorigin
      src="https://unpkg.com/react/umd/react.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/graphiql/graphiql.min.js"
    ></script>

    <script>
      const fetcher = GraphiQL.createFetcher({ url: 'https://my/graphql' });

      ReactDOM.render(
        React.createElement(GraphiQL, { fetcher: fetcher }),
        document.getElementById('graphiql'),
      );
    </script>
  </body>
</html>

Notes:

  • the inlined styles are important for ensuring GraphiQL is visible and fills the canvas.
  • using React.createElement directly is belaborous, so follow the webpack instructions above for more highly customized implementation
  • we can use GraphiQL.createFetcher in the UMD bundle only, so that it can be tree shaken out for modules

GraphiQL for my GraphQL Service/HTTP Server/Etc

You may be using a runtime that already provides graphiql, or that provides it via a middleware. For example, we support express-graphql!

I would suggest a search for "graphiql " such as "graphiql express", "graphiql absinthe", etc to learn a potentially simpler route to setup for your environment. There are many npm packages, ruby gems, java utilities for deploying graphiql.

Here are some example searches:

This doesn't include runtimes or libraries where GraphiQL is used but isn't referenced in the package registry search entry.

Customize

GraphiQL supports customization in UI and behavior by accepting React props and children.

Props

fetcher is the only required prop for <GraphiQL />.

For more details on props, see the API Docs

Prop Type Description
fetcher Fetcher function Required. a function which accepts GraphQL-HTTP parameters and returns a Promise, Observable or AsyncIterable which resolves to the GraphQL parsed JSON response.
schema GraphQLSchema a GraphQLSchema instance or null if one is not to be used. If undefined is provided, GraphiQL will send an introspection query using the fetcher to produce a schema.
query string (GraphQL) initial displayed query, if undefined is provided, the stored query or defaultQuery will be used. You can also set this value at runtime to override the current operation editor state.
validationRules ValidationRule[] A array of validation rules that will be used for validating the GraphQL operations. If undefined is provided, the default rules (exported as specifiedRules from graphql) will be used.
variables string (JSON) initial displayed query variables, if undefined is provided, the stored variables will be used.
headers string initial displayed request headers. if not defined, it will default to the stored headers if shouldPersistHeaders is enabled.
externalFragments string | FragmentDefinitionNode[] provide fragments external to the operation for completion, validation, and for selective use when executing operations.
operationName string an optional name of which GraphQL operation should be executed.
response string (JSON) an optional JSON string to use as the initial displayed response. If not provided, no response will be initially shown. You might provide this if illustrating the result of the initial query.
storage Storage Default: window.localStorage. an interface that matches window.localStorage signature that GraphiQL will use to persist state.
defaultQuery string Default: graphiql help text. Provides default query if no user state is present.
defaultVariableEditorOpen boolean sets whether or not to show the variables pane on startup. overridden by user state (deprecated in favor of defaultSecondaryEditorOpen)
defaultSecondaryEditorOpen boolean sets whether or not to show the variables/headers pane on startup. If not defined, it will be based off whether or not variables and/or headers are present.
getDefaultFieldNames Function Default: defaultGetDefaultFieldNames. provides default field values for incomplete queries
editorTheme string Default: graphiql. names a CodeMirror theme to be applied to the QueryEditor, ResultViewer, and Variables panes. See below for full usage.
readOnly boolean when true will make the QueryEditor and Variables panes readOnly.
dangerouslyAssumeSchemaIsValid boolean Default: false. When true, don't check that the loaded schema is valid; this can make the app vulnerable to XSS attacks and is not recommended.
docExplorerOpen boolean when true will ensure the DocExplorer is open by default when the user first renders the component. Overridden by user's toggle state
headerEditorEnabled boolean Default: true. enables the header editor when true.
shouldPersistHeaders boolean Default: false. o persist headers to storage when true
toolbar.additionalContent React.Component[] pass additional toolbar react components inside a fragment
onEditQuery Function called when the Query editor changes. The argument to the function will be the query string.
onEditVariables Function called when the Query variable editor changes. The argument to the function will be the variables string.
onEditHeaders Function called when the request headers editor changes. The argument to the function will be the headers string.
onEditOperationName Function called when the operation name to be executed changes.
onToggleDocs Function called when the docs will be toggled. The argument to the function will be a boolean whether the docs are now open or closed.
maxHistoryLength number Default: 20. allows you to increase the number of queries in the history component

Children (this pattern will be dropped in 2.0.0)

  • <GraphiQL.Logo>: Replace the GraphiQL logo with your own.

  • <GraphiQL.Toolbar>: Add a custom toolbar above GraphiQL. If not provided, a default toolbar may contain common operations. Pass the empty <GraphiQL.Toolbar /> if an empty toolbar is desired.

  • <GraphiQL.Button>: Add a button to the toolbar above GraphiQL.

  • <GraphiQL.Menu>: Add a dropdown menu to the toolbar above GraphiQL.

    • <GraphiQL.MenuItem>: Items for a menu.
  • <GraphiQL.Select>: Add a select list to the toolbar above GraphiQL.

    • <GraphiQL.SelectOption>: Options for a select list.
  • <GraphiQL.Group>: Add a group of associated controls to the toolbar above GraphiQL. Expects children to be <GraphiQL.Button>, <GraphiQL.Menu>, or <GraphiQL.Select>.

  • <GraphiQL.Footer>: Add a custom footer below GraphiQL Results.

Full Usage Example

TODO: kitchen sink example project or codesandbox

Applying an Editor Theme

In order to theme the editor portions of the interface, you can supply a editorTheme prop. You'll also need to load the appropriate CSS for the theme (similar to loading the CSS for this project). See the themes available here.

// In your html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/theme/solarized.css" />

// In your GraphiQL JSX
<GraphiQL
  editorTheme="solarized light"
/>

Index

References

Fetcher

Re-exports Fetcher

FetcherOpts

Re-exports FetcherOpts

FetcherParams

Re-exports FetcherParams

FetcherResult

Re-exports FetcherResult

FetcherReturnType

Re-exports FetcherReturnType

Observable

Re-exports Observable

Storage

Re-exports Storage

SyncFetcherResult

Re-exports SyncFetcherResult

fillLeafs

Re-exports fillLeafs

getQueryFacts

Re-exports getQueryFacts

getSelectedOperationName

Re-exports getSelectedOperationName

mergeAst

Renames and re-exports mergeAST

onHasCompletion

Re-exports onHasCompletion

Type aliases

FieldType

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

GenericError

GenericError: Error | string | readonly Error[] | readonly string[] | GraphQLError | readonly GraphQLError[]

GetDefaultFieldNamesFn

GetDefaultFieldNamesFn: (type: GraphQLType) => string[]

Type declaration

    • (type: GraphQLType): string[]
    • Parameters

      • type: GraphQLType

      Returns string[]

GraphiQLProps

GraphiQLProps: { ResultsTooltip?: typeof Component | FunctionComponent; dangerouslyAssumeSchemaIsValid?: boolean; defaultQuery?: string; defaultSecondaryEditorOpen?: boolean; defaultVariableEditorOpen?: boolean; docExplorerOpen?: boolean; editorTheme?: string; externalFragments?: string | FragmentDefinitionNode[]; fetcher: Fetcher; getDefaultFieldNames?: GetDefaultFieldNamesFn; headerEditorEnabled?: boolean; headers?: string; maxHistoryLength?: number; onCopyQuery?: (query?: string) => void; onEditHeaders?: (value: string) => void; onEditOperationName?: (operationName: string) => void; onEditQuery?: (query?: string, documentAST?: DocumentNode) => void; onEditVariables?: (value: string) => void; onToggleDocs?: (docExplorerOpen: boolean) => void; onToggleHistory?: (historyPaneOpen: boolean) => void; operationName?: string; query?: string; readOnly?: boolean; response?: string; schema?: GraphQLSchema | null; shouldPersistHeaders?: boolean; storage?: Storage; toolbar?: GraphiQLToolbarConfig; validationRules?: ValidationRule[]; variables?: string }

Type declaration

  • Optional ResultsTooltip?: typeof Component | FunctionComponent
  • Optional dangerouslyAssumeSchemaIsValid?: boolean

    decide whether schema responses should be validated. false by default

  • Optional defaultQuery?: string
  • Optional defaultSecondaryEditorOpen?: boolean
  • Optional defaultVariableEditorOpen?: boolean
  • Optional docExplorerOpen?: boolean
  • Optional editorTheme?: string
  • Optional externalFragments?: string | FragmentDefinitionNode[]
  • fetcher: Fetcher
  • Optional getDefaultFieldNames?: GetDefaultFieldNamesFn
  • Optional headerEditorEnabled?: boolean
  • Optional headers?: string
  • Optional maxHistoryLength?: number
  • Optional onCopyQuery?: (query?: string) => void
      • (query?: string): void
      • Parameters

        • Optional query: string

        Returns void

  • Optional onEditHeaders?: (value: string) => void
      • (value: string): void
      • Parameters

        • value: string

        Returns void

  • Optional onEditOperationName?: (operationName: string) => void
      • (operationName: string): void
      • Parameters

        • operationName: string

        Returns void

  • Optional onEditQuery?: (query?: string, documentAST?: DocumentNode) => void
      • (query?: string, documentAST?: DocumentNode): void
      • Parameters

        • Optional query: string
        • Optional documentAST: DocumentNode

        Returns void

  • Optional onEditVariables?: (value: string) => void
      • (value: string): void
      • Parameters

        • value: string

        Returns void

  • Optional onToggleDocs?: (docExplorerOpen: boolean) => void
      • (docExplorerOpen: boolean): void
      • Parameters

        • docExplorerOpen: boolean

        Returns void

  • Optional onToggleHistory?: (historyPaneOpen: boolean) => void
      • (historyPaneOpen: boolean): void
      • Parameters

        • historyPaneOpen: boolean

        Returns void

  • Optional operationName?: string
  • Optional query?: string
  • Optional readOnly?: boolean
  • Optional response?: string
  • Optional schema?: GraphQLSchema | null
  • Optional shouldPersistHeaders?: boolean
  • Optional storage?: Storage
  • Optional toolbar?: GraphiQLToolbarConfig
  • Optional validationRules?: ValidationRule[]
  • Optional variables?: string

GraphiQLState

GraphiQLState: { docExplorerOpen: boolean; docExplorerWidth: number; documentAST?: DocumentNode; editorFlex: number; headerEditorActive: boolean; headerEditorEnabled: boolean; headers?: string; historyPaneOpen: boolean; isWaitingForResponse: boolean; maxHistoryLength: number; operationName?: string; operations?: OperationDefinitionNode[]; query?: string; response?: string; schema?: GraphQLSchema | null; schemaErrors?: readonly GraphQLError[]; secondaryEditorHeight: number; secondaryEditorOpen: boolean; shouldPersistHeaders: boolean; subscription?: Unsubscribable | null; variableEditorActive: boolean; variableToType?: VariableToType; variables?: string }

Type declaration

  • docExplorerOpen: boolean
  • docExplorerWidth: number
  • Optional documentAST?: DocumentNode
  • editorFlex: number
  • headerEditorActive: boolean
  • headerEditorEnabled: boolean
  • Optional headers?: string
  • historyPaneOpen: boolean
  • isWaitingForResponse: boolean
  • maxHistoryLength: number
  • Optional operationName?: string
  • Optional operations?: OperationDefinitionNode[]
  • Optional query?: string
  • Optional response?: string
  • Optional schema?: GraphQLSchema | null
  • Optional schemaErrors?: readonly GraphQLError[]
  • secondaryEditorHeight: number
  • secondaryEditorOpen: boolean
  • shouldPersistHeaders: boolean
  • Optional subscription?: Unsubscribable | null
  • variableEditorActive: boolean
  • Optional variableToType?: VariableToType
  • Optional variables?: string

GraphiQLToolbarConfig

GraphiQLToolbarConfig: { additionalContent?: React.ReactNode }

Type declaration

  • Optional additionalContent?: React.ReactNode

HandleEditLabelFn

HandleEditLabelFn: (query?: string, variables?: string, headers?: string, operationName?: string, label?: string, favorite?: boolean) => void

Type declaration

    • (query?: string, variables?: string, headers?: string, operationName?: string, label?: string, favorite?: boolean): void
    • Parameters

      • Optional query: string
      • Optional variables: string
      • Optional headers: string
      • Optional operationName: string
      • Optional label: string
      • Optional favorite: boolean

      Returns void

HandleSelectQueryFn

HandleSelectQueryFn: (query?: string, variables?: string, headers?: string, operationName?: string, label?: string) => void

Type declaration

    • (query?: string, variables?: string, headers?: string, operationName?: string, label?: string): void
    • Parameters

      • Optional query: string
      • Optional variables: string
      • Optional headers: string
      • Optional operationName: string
      • Optional label: string

      Returns void

HandleToggleFavoriteFn

HandleToggleFavoriteFn: (query?: string, variables?: string, headers?: string, operationName?: string, label?: string, favorite?: boolean) => void

Type declaration

    • (query?: string, variables?: string, headers?: string, operationName?: string, label?: string, favorite?: boolean): void
    • Parameters

      • Optional query: string
      • Optional variables: string
      • Optional headers: string
      • Optional operationName: string
      • Optional label: string
      • Optional favorite: boolean

      Returns void

HistoryQueryProps

HistoryQueryProps: { favorite?: boolean; favoriteSize?: number; handleEditLabel: HandleEditLabelFn; handleToggleFavorite: HandleToggleFavoriteFn; onSelect: HandleSelectQueryFn; operationName?: string } & QueryStoreItem

Maybe

Maybe<T>: T | null | undefined

Type parameters

  • T

Maybe

Maybe<T>: T | null | undefined

Type parameters

  • T

OnClickFieldFunction

OnClickFieldFunction: (field: FieldType, type?: GraphQLObjectType | GraphQLInterfaceType | GraphQLInputObjectType | GraphQLType, event?: MouseEvent) => void

Type declaration

    • (field: FieldType, type?: GraphQLObjectType | GraphQLInterfaceType | GraphQLInputObjectType | GraphQLType, event?: MouseEvent): void
    • Parameters

      • field: FieldType
      • Optional type: GraphQLObjectType | GraphQLInterfaceType | GraphQLInputObjectType | GraphQLType
      • Optional event: MouseEvent

      Returns void

OnClickFieldOrTypeFunction

OnClickFieldOrTypeFunction: OnClickFieldFunction | OnClickTypeFunction

OnClickTypeFunction

OnClickTypeFunction: (type: GraphQLNamedType, event?: MouseEvent<HTMLAnchorElement>) => void

Type declaration

    • (type: GraphQLNamedType, event?: MouseEvent<HTMLAnchorElement>): void
    • Parameters

      • type: GraphQLNamedType
      • Optional event: MouseEvent<HTMLAnchorElement>

      Returns void

QueryFacts

QueryFacts: { documentAST?: DocumentNode; operations?: OperationDefinitionNode[]; variableToType?: VariableToType }

Type declaration

  • Optional documentAST?: DocumentNode
  • Optional operations?: OperationDefinitionNode[]
  • Optional variableToType?: VariableToType

QueryStoreItem

QueryStoreItem: { favorite?: boolean; headers?: string; label?: string; operationName?: string; query?: string; variables?: string }

Type declaration

  • Optional favorite?: boolean
  • Optional headers?: string
  • Optional label?: string
  • Optional operationName?: string
  • Optional query?: string
  • Optional variables?: string

ReactComponentLike

ReactComponentLike: string | ((props: any, context?: any) => any) | {}

ReactElementLike

ReactElementLike: { key: string | number | null; props: any; type: ReactComponentLike }

Type declaration

ReactNodeLike

ReactNodeLike: {} | ReactElementLike | Array<ReactNodeLike> | string | number | boolean | null | undefined

VariableToType

VariableToType: {}

Type declaration

  • [variable: string]: GraphQLNamedType

Variables

Const brokenQuery

brokenQuery: "longDescriptionType {id}}" = `longDescriptionType {id}}`

Const brokenVariables

brokenVariables: ""a": 1}" = `"a": 1}`

Const getQueryFacts

getQueryFacts: getOperationFacts = getOperationFacts

as a nod to folks who were clever enough to import this utility on their

Const introspectionQuery

introspectionQuery: string = getIntrospectionQuery({schemaDescription: true,inputValueDeprecation: true,specifiedByUrl: true,})

Const introspectionQueryName

introspectionQueryName: "IntrospectionQuery" = staticName

Const introspectionQuerySansSubscriptions

introspectionQuerySansSubscriptions: string = introspectionQuery.replace('subscriptionType { name }','',)

Const invalidCharacters

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

Copyright (c) 2021 GraphQL Contributors.

This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

Const prettifiedQuery

prettifiedQuery: "{longDescriptionType {id}}" = `{longDescriptionType {id}}`

Const prettifiedVariables

prettifiedVariables: "{"a": 1}" = `{"a": 1}`

Const staticName

staticName: "IntrospectionQuery" = "IntrospectionQuery"

Const testQuery

testQuery: "{longDescriptionType {idimagehasArgstest {idisTest__typename}}}" = `{longDescriptionType {idimagehasArgstest {idisTest__typename}}}`

Const uglyQuery

uglyQuery: "{longDescriptionType {id}}" = `{longDescriptionType {id}}`

Const uglyVariables

uglyVariables: "{"a": 1}" = `{"a": 1}`

Functions

Argument

  • Argument(__namedParameters: { arg: GraphQLArgument; onClickType: OnClickTypeFunction; showDefaultValue: boolean }): Element
  • Parameters

    Returns Element

CodeMirror

  • CodeMirror(node: HTMLElement, __namedParameters: { options: options; value: any }): { emit: _emit; getValue: any; off: any; on: any; setSize: any; setValue: any; options: object }
  • Parameters

    • node: HTMLElement
    • __namedParameters: { options: options; value: any }

    Returns { emit: _emit; getValue: any; off: any; on: any; setSize: any; setValue: any; options: object }

    • emit: _emit
    • getValue: function
      • getValue(): string
      • Returns string

    • off: function
      • off(event: any): void
      • Parameters

        • event: any

        Returns void

    • on: function
      • on(event: any, handler: any): void
      • Parameters

        • event: any
        • handler: any

        Returns void

    • setSize: function
      • setSize(): void
      • Returns void

    • setValue: function
      • setValue(newValue: any): void
      • Parameters

        • newValue: any

        Returns void

    • options: object

DefaultValue

  • DefaultValue(__namedParameters: { field: FieldType }): Element
  • Parameters

    Returns Element

Directive

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

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

    Returns Element

FieldDoc

MarkdownContent

  • MarkdownContent(__namedParameters: { className: string; markdown: string }): Element
  • Parameters

    • __namedParameters: { className: string; markdown: string }
      • className: string
      • markdown: string

    Returns Element

SchemaDoc

  • SchemaDoc(__namedParameters: { onClickType: OnClickTypeFunction; schema: GraphQLSchema }): Element
  • Parameters

    Returns Element

ToolbarGroup

  • ToolbarGroup(__namedParameters: { children: ReactNode }): Element
  • ToolbarGroup

    A group of associated controls.

    Parameters

    • __namedParameters: { children: ReactNode }
      • children: ReactNode

    Returns Element

Const ToolbarMenuItem

  • ToolbarMenuItem(__namedParameters: { label: string; onSelect: () => void; title: string }): Element
  • Parameters

    • __namedParameters: { label: string; onSelect: () => void; title: string }
      • label: string
      • onSelect: () => void
          • (): void
          • Returns void

      • title: string

    Returns Element

ToolbarSelectOption

  • ToolbarSelectOption(__namedParameters: { label: string; onSelect: bivarianceHack; selected: boolean }): Element
  • Parameters

    • __namedParameters: { label: string; onSelect: bivarianceHack; selected: boolean }
      • label: string
      • onSelect: bivarianceHack
      • selected: boolean

    Returns Element

TypeLink

  • TypeLink(props: TypeLinkProps): Element
  • Parameters

    • props: TypeLinkProps

    Returns Element

collectVariables

  • collectVariables(schema: GraphQLSchema, documentAST: DocumentNode): VariableToType
  • Provided a schema and a document, produces a variableToType Object.

    Parameters

    • schema: GraphQLSchema
    • documentAST: DocumentNode

    Returns VariableToType

debounce

  • debounce<F>(duration: number, fn: F): (Anonymous function)
  • 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 (Anonymous function)

fillLeafs

  • fillLeafs(schema?: GraphQLSchema | null, docString?: string, getDefaultFieldNames?: GetDefaultFieldNamesFn): { insertions: Insertion[]; result: string }
  • Given a document string which may not be valid due to terminal fields not representing leaf values (Spec Section: "Leaf Field Selections"), and a function which provides reasonable default field names for a given type, this function will attempt to produce a schema which is valid after filling in selection sets for the invalid fields.

    Note that there is no guarantee that the result will be a valid query, this utility represents a "best effort" which may be useful within IDE tools.

    Parameters

    • Optional schema: GraphQLSchema | null
    • Optional docString: string
    • Optional getDefaultFieldNames: GetDefaultFieldNamesFn

    Returns { insertions: Insertion[]; result: string }

    • insertions: Insertion[]
    • result: string

find

  • find<T>(list: Array<T>, predicate: (item: T) => boolean): T | void
  • Copyright (c) 2021 GraphQL Contributors.

    This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

    Type parameters

    • T

    Parameters

    • list: Array<T>
    • predicate: (item: T) => boolean
        • (item: T): boolean
        • Parameters

          • item: T

          Returns boolean

    Returns T | void

getLeft

  • getLeft(initialElem: HTMLElement): number
  • Utility functions to get a pixel distance from left/top of the window.

    Parameters

    • initialElem: HTMLElement

    Returns number

getOperationFacts

  • getOperationFacts(schema?: GraphQLSchema | null, documentStr?: string | null): QueryFacts | undefined
  • Provided previous "operationFacts", a GraphQL schema, and a query document string, return a set of facts about that query useful for GraphiQL features.

    If the query cannot be parsed, returns undefined.

    Parameters

    • Optional schema: GraphQLSchema | null
    • Optional documentStr: string | null

    Returns QueryFacts | undefined

getSelectedOperationName

  • getSelectedOperationName(prevOperations?: OperationDefinitionNode[] | undefined, prevSelectedOperationName?: string, operations?: OperationDefinitionNode[]): string
  • Provided optional previous operations and selected name, and a next list of operations, determine what the next selected operation should be.

    Parameters

    • Optional prevOperations: OperationDefinitionNode[] | undefined
    • Optional prevSelectedOperationName: string
    • Optional operations: OperationDefinitionNode[]

    Returns string

getTop

  • getTop(initialElem: HTMLElement): number
  • Parameters

    • initialElem: HTMLElement

    Returns number

inlineRelevantFragmentSpreads

  • inlineRelevantFragmentSpreads(fragmentDefinitions: {}, selections: readonly SelectionNode[], selectionSetType?: Maybe<GraphQLOutputType>): readonly SelectionNode[]
  • Parameters

    • fragmentDefinitions: {}
      • [key: string]: FragmentDefinitionNode | undefined
    • selections: readonly SelectionNode[]
    • Optional selectionSetType: Maybe<GraphQLOutputType>

    Returns readonly SelectionNode[]

mergeAST

  • mergeAST(documentAST: DocumentNode, schema?: GraphQLSchema | null): DocumentNode
  • Given a document AST, inline all named fragment definitions.

    Parameters

    • documentAST: DocumentNode
    • Optional schema: GraphQLSchema | null

    Returns DocumentNode

normalizeWhitespace

  • normalizeWhitespace(line: string): string
  • Parameters

    • line: string

    Returns string

onHasCompletion

  • onHasCompletion(_cm: CM.Editor, data: CM.EditorChangeLinkedList | undefined, onHintInformationRender: (el: HTMLDivElement) => 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: CM.Editor
    • data: CM.EditorChangeLinkedList | undefined
    • onHintInformationRender: (el: HTMLDivElement) => void
        • (el: HTMLDivElement): void
        • Parameters

          • el: HTMLDivElement

          Returns void

    Returns void

uniqueBy

  • uniqueBy<T>(array: readonly SelectionNode[], iteratee: (item: FieldNode) => T): SelectionNode[]
  • Type parameters

    • T

    Parameters

    • array: readonly SelectionNode[]
    • iteratee: (item: FieldNode) => T
        • (item: FieldNode): T
        • Parameters

          • item: FieldNode

          Returns T

    Returns SelectionNode[]

Object literals

Const mockSuccess

mockSuccess: object

data

data: object

longDescriptionType

longDescriptionType: object

hasArgs

hasArgs: string = "{"defaultValue":"test default value"}"

id

id: string = "abc123"

image

image: string = "/images/logo.svg"

test

test: object

__typename

__typename: string = "Test"

id

id: string = "abc123"

isTest

isTest: boolean = true

Generated using TypeDoc