GraphiQL API Documentation
    Preparing search index...

    Interface SlicesWithActions

    interface SlicesWithActions {
        actions: AllActions;
        activeTabIndex: number;
        defaultHeaders?: string;
        defaultQuery?: string;
        documentAST?: DocumentNode;
        externalFragments: Map<string, FragmentDefinitionNode>;
        fetcher: Fetcher;
        fetchError: string | null;
        getDefaultFieldNames?: GetDefaultFieldNamesFn;
        headerEditor?: IStandaloneCodeEditor;
        initialHeaders: string;
        initialQuery: string;
        initialVariables: string;
        inputValueDeprecation?: boolean;
        introspectionQueryName?: string;
        isFetching: boolean;
        isIntrospecting: boolean;
        monacoTheme?: MonacoTheme;
        onCopyQuery?: (query: string) => void;
        onPrettifyQuery: (query: string) => MaybePromise<string>;
        onSchemaChange?: (schema: GraphQLSchema) => void;
        operationName?: string;
        operations?: OperationDefinitionNode[];
        overrideOperationName: string | null;
        plugins: GraphiQLPlugin[];
        queryEditor?: IStandaloneCodeEditor;
        queryId: number;
        referencePlugin?: GraphiQLPlugin | null;
        requestCounter: number;
        responseEditor?: IStandaloneCodeEditor;
        schema: MaybeGraphQLSchema;
        schemaDescription?: boolean;
        schemaReference: SchemaReference | null;
        shouldIntrospect: boolean;
        shouldPersistHeaders: boolean;
        storage: StorageAPI;
        subscription: Unsubscribable | null;
        tabs: TabState[];
        theme: Theme;
        uriInstanceId: string;
        validationErrors: readonly GraphQLError[];
        variableEditor?: IStandaloneCodeEditor;
        visiblePlugin: GraphiQLPlugin | null;
        onEditOperationName?(operationName: string): void;
        onTabChange?(tabState: TabsState): void;
        onTogglePluginVisibility?(visiblePlugin: GraphiQLPlugin | null): void;
    }

    Hierarchy

    • AllSlices
      • SlicesWithActions
    Index

    Properties

    actions activeTabIndex defaultHeaders? defaultQuery? documentAST? externalFragments fetcher fetchError getDefaultFieldNames? headerEditor? initialHeaders initialQuery initialVariables inputValueDeprecation? introspectionQueryName? isFetching isIntrospecting monacoTheme? onCopyQuery? onPrettifyQuery onSchemaChange? operationName? operations? overrideOperationName plugins queryEditor? queryId referencePlugin? requestCounter responseEditor? schema schemaDescription? schemaReference shouldIntrospect shouldPersistHeaders storage subscription tabs theme uriInstanceId validationErrors variableEditor? visiblePlugin

    Methods

    onEditOperationName? onTabChange? onTogglePluginVisibility?

    Properties

    actions: AllActions
    activeTabIndex: number

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

    defaultHeaders?: string

    Headers to be set when opening a new tab.

    defaultQuery?: string

    The initial content of the operation editor when loading GraphiQL and there is no saved query in storage and no initialQuery prop.

    This value is used only for the first tab. Additional tabs will open with an empty operation editor.

    "# Welcome to GraphiQL..."
    documentAST?: DocumentNode

    from graphiql 5

    externalFragments: Map<string, FragmentDefinitionNode>

    A map of fragment definitions using the fragment name as a key which are made available to include in the query.

    fetcher: Fetcher

    A function which accepts GraphQL HTTP parameters and returns a Promise, Observable or AsyncIterable that returns the GraphQL response in parsed JSON format.

    We suggest using the createGraphiQLFetcher utility from @graphiql/toolkit to create these fetcher functions.

    https://graphiql-test.netlify.app/typedoc/modules/graphiql_toolkit.html#creategraphiqlfetcher-2|createGraphiQLFetcher

    fetchError: string | null

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

    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.

    headerEditor?: IStandaloneCodeEditor

    The Monaco Editor instance used in the request headers editor, used to edit HTTP headers.

    initialHeaders: string

    The contents of the request headers editor when initially rendering the provider component.

    initialQuery: string

    The contents of the operation editor when initially rendering the provider component.

    initialVariables: string

    The contents of the variables editor when initially rendering the provider component.

    inputValueDeprecation?: boolean

    Can be used to set the equally named option for introspecting a GraphQL server.

    false

    for creating the introspection query

    introspectionQueryName?: string

    Can be used to set a custom operation name for the introspection query.

    'IntrospectionQuery'
    isFetching: boolean

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

    false
    isIntrospecting: boolean

    If there currently is an introspection request in-flight.

    monacoTheme?: MonacoTheme
    onCopyQuery?: (query: string) => void

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

    Type Declaration

      • (query: string): void

      • Parameters

        • query: string

          The content that has been copied.

        Returns void

    onPrettifyQuery: (query: string) => MaybePromise<string>

    Invoked when the prettify callback is invoked.

    Type Declaration

      • (query: string): MaybePromise<string>

      • Parameters

        • query: string

          The current value of the operation editor.

        Returns MaybePromise<string>

        The formatted query.

    import prettier from 'prettier/standalone'

    prettier.format(query, { parser: 'graphql' })
    onSchemaChange?: (schema: GraphQLSchema) => void

    Type Declaration

      • (schema: GraphQLSchema): void

      • Invoked after a new GraphQL schema was built. This includes both fetching the schema via introspection and passing the schema using the schema prop.

        Parameters

        • schema: GraphQLSchema

          The GraphQL schema that is now used for GraphiQL.

        Returns void

    operationName?: string

    from graphiql 5

    operations?: OperationDefinitionNode[]

    from graphiql 5

    overrideOperationName: string | null

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

    null
    plugins: GraphiQLPlugin[]

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

    []
    queryEditor?: IStandaloneCodeEditor

    The Monaco Editor instance used in the operation editor.

    queryId: number
    0
    referencePlugin?: GraphiQLPlugin | null

    The plugin which is used to display the reference documentation when selecting a type. Pass null to remove plugin.

    requestCounter: number

    A counter that is incremented each time introspection is triggered or the schema state is updated.

    responseEditor?: IStandaloneCodeEditor

    The Monaco Editor instance used in the response editor.

    schema: MaybeGraphQLSchema

    The current GraphQL schema.

    schemaDescription?: boolean

    Can be used to set the equally named option for introspecting a GraphQL server.

    false

    for creating the introspection query

    schemaReference: SchemaReference | null

    The last type selected by the user.

    shouldIntrospect: boolean

    false when schema is provided via props as GraphQLSchema | null

    shouldPersistHeaders: boolean

    If the contents of the request headers editor are persisted in storage.

    storage: StorageAPI
    subscription: Unsubscribable | null

    Represents an active GraphQL subscription.

    For multipart operations such as subscriptions, this will hold an Unsubscribable object while the request is in-flight. It remains non-null until the operation completes or is manually unsubscribed.

    Use subscription?.unsubscribe() to cancel the request.

    null
    tabs: TabState[]

    A list of state objects for each tab.

    theme: Theme
    uriInstanceId: string

    Unique ID of the GraphiQL instance, which will be suffixed to the URIs for operations, variables, headers, and response editors.

    https://github.com/microsoft/monaco-editor#uris

    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.

    variableEditor?: IStandaloneCodeEditor

    The Monaco Editor instance used in the variables editor.

    visiblePlugin: GraphiQLPlugin | null

    The plugin which is currently visible.

    Methods

    • Invoked when the operation name changes. Possible triggers are:

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

      Parameters

      • operationName: string

        The operation name after it has been changed.

      Returns void

    • 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 tab state after it has been updated.

      Returns 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

    Settings

    Member Visibility

    On This Page

    Properties
    Methods