Version Packages

[acao]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

[email protected]

Major Changes

• #2523 d1805200 Thanks @thomasheyenbrock! - BREAKING: Change the implementation of the info popup when hovering items in the code editor:
  • For fields the type prefix was removed, i.e. MyType.myField -> myField
  • For args, the type and field was removed, i.e. MyType.myField(myArg: MyArgType) -> myArg: MyArgType
  • The DOM structure of the info tooltip changed to enable more flexible styling:
    • The first section (i.e. the clickable parts like type and field name) are wrapped in an additional div
    • The markdown content for deprecation reasons is wrapped in an additional div

[email protected]

Major Changes

• #2523 fdcd9054 Thanks @thomasheyenbrock! - BREAKING: The GraphiQL component does no longer set a property g on the window object.

• #2523 d1805200 Thanks @thomasheyenbrock! - BREAKING: Implement a new design for the GraphiQL UI. This changes both DOM structure and class names. We consider this a breaking change as custom GraphQL IDEs built on top of GraphiQL relied on these internals, e.g. overriding styles using certain class names.

• #2523 9fc6b476 Thanks @thomasheyenbrock! - BREAKING: The following static properties of the GraphiQL component have been removed:

  • GraphiQL.formatResult: You can use the function formatResult from @graphiql/toolkit instead.
  • GraphiQL.formatError: You can use the function formatError from @graphiql/toolkit instead.
  • GraphiQL.QueryEditor: You can use the QueryEditor component from @graphiql/react instead.
  • GraphiQL.VariableEditor: You can use the VariableEditor component from @graphiql/react instead.
  • GraphiQL.HeaderEditor: You can use the HeaderEditor component from @graphiql/react instead.
  • GraphiQL.ResultViewer: You can use the ResponseEditor component from @graphiql/react instead.
  • GraphiQL.Button: You can use the ToolbarButton component from @graphiql/react instead.
  • GraphiQL.ToolbarButton: This exposed the same component as GraphiQL.Button.
  • GraphiQL.Menu: You can use the ToolbarMenu component from @graphiql/react instead.
  • GraphiQL.MenuItem: You can use the ToolbarMenu.Item component from @graphiql/react instead.
  • GraphiQL.Group: Grouping multiple buttons side-by-side is not provided out-of-the box anymore in the new GraphiQL UI. If you want to implement a similar feature in the new vertical toolbar you can do so by adding your own styles for your custom toolbar elements. Example:

    import { GraphiQL } from 'graphiql';
    function CustomGraphiQL() {
      return (
        <GraphiQL>
          <GraphiQL.Toolbar>
            {/* Add custom styles for your buttons using the given class */}
            <div className="button-group">
              <button>1</button>
              <button>2</button>
              <button>3</button>
            </div>
          </GraphiQL.Toolbar>
        </GraphiQL>
      );
    }

• #2523 864dfb03 Thanks @thomasheyenbrock! - BREAKING: The following exports of the graphiql package have been removed:

  • DocExplorer: Now exported from @graphiql/react as DocExplorer
    • The schema prop has been removed, the component now uses the schema provided by the ExplorerContext
  • fillLeafs: Now exported from @graphiql/toolkit as fillLeafs
  • getSelectedOperationName: Now exported from @graphiql/toolkit as getSelectedOperationName
  • mergeAst: Now exported from @graphiql/toolkit as mergeAst
  • onHasCompletion: Now exported from @graphiql/react as onHasCompletion
  • QueryEditor: Now exported from @graphiql/react as QueryEditor
  • ToolbarMenu: Now exported from @graphiql/react as ToolbarMenu
  • ToolbarMenuItem: Now exported from @graphiql/react as ToolbarMenu.Item
  • ToolbarSelect: Now exported from @graphiql/react as ToolbarListbox
  • ToolbarSelectOption: Now exported from @graphiql/react as ToolbarListbox.Option
  • VariableEditor: Now exported from @graphiql/react as VariableEditor
  • type Fetcher: Now exported from @graphiql/toolkit
  • type FetcherOpts: Now exported from @graphiql/toolkit
  • type FetcherParams: Now exported from @graphiql/toolkit
  • type FetcherResult: Now exported from @graphiql/toolkit
  • type FetcherReturnType: Now exported from @graphiql/toolkit
  • type Observable: Now exported from @graphiql/toolkit
  • type Storage: Now exported from @graphiql/toolkit
  • type SyncFetcherResult: Now exported from @graphiql/toolkit

• #2523 2c860e10 Thanks @thomasheyenbrock! - BREAKING: The GraphiQL component has been refactored to be a function component. Attaching a ref to this component will no longer provide access to props, state or class methods. In order to interact with or change GraphiQL state you need to use the contexts and hooks provided by the @graphiql/react package. More details and examples can be found in the migration guide.

• #2523 11c2778b Thanks @thomasheyenbrock! - BREAKING: The following props of the GraphiQL component have been changed:

  • The props defaultVariableEditorOpen and defaultSecondaryEditorOpen have been merged into one prop defaultEditorToolsVisibility. The default behavior if this prop is not passed is that the editor tools are shown if at least one of the secondary editors has contents. You can pass the following values to the prop:
    • Passing false hides the editor tools.
    • Passing true shows the editor tools.
    • Passing "variables" explicitly shows the variables editor.
    • Passing "headers" explicitly shows the headers editor.
  • The props docExplorerOpen, onToggleDocs and onToggleHistory have been removed. They are replaced by the more generic props visiblePlugin (for controlling which plugin is visible) and onTogglePluginVisibility (which is called each time the visibility of any plugin changes).
  • The headerEditorEnabled prop has been renamed to isHeadersEditorEnabled.
  • The ResultsTooltip prop has been renamed to responseTooltip.
  • Tabs are now always enabled. The tabs prop has therefore been replaced with a prop onTabChange. If you used the tabs prop before to pass this function you can change your implementation like so:

    <GraphiQL
    -  tabs={{ onTabChange: (tabState) => {/* do something */} }}
    +  onTabChange={(tabState) => {/* do something */}}
    />

Minor Changes

• #2523 4f714053 Thanks @thomasheyenbrock! - GraphiQL now ships with a dark theme. By default the interface respects the system settings, the theme can also be explicitly chosen via the new settings dialog.

Patch Changes

• Updated dependencies [e1c6e3bf, d1805200, b5a7bee1, 11c2778b, 01cd313b, 41236709]:
  • @graphiql/[email protected]
  • @graphiql/[email protected]

@graphiql/[email protected]

Minor Changes

• #2523 e1c6e3bf Thanks @thomasheyenbrock! - BREAKING: The onHasCompletion export has been removed as it is only meant to be used internally.

• #2523 d1805200 Thanks @thomasheyenbrock! - Add new components:

  • UI components (Button, ButtonGroup, Dialog, Menu, Spinner, Tab, Tabs, Tooltip, UnStyledButton and lots of icon components)
  • Editor components (QueryEditor, VariableEditor, HeaderEditor and ResponseEditor)
  • Toolbar components (ExecuteButton, ToolbarButton, ToolbarMenu and ToolbarSelect)
  • Docs components (Argument, DefaultValue, DeprecationReason, Directive, DocExplorer, ExplorerSection, FieldDocumentation, FieldLink, SchemaDocumentation, Search, TypeDocumentation and TypeLink)
  • History component
  • A GraphiQLProvider component that renders all other existing provider components from @graphiql/react for ease of use

• #2523 b5a7bee1 Thanks @thomasheyenbrock! - BREAKING: Add a new context provider for plugins. This induces changes to the following other contexts and their provider components:

  • The property isVisible and the methods hide and show of the ExplorerContext have been removed. Also, the property isVisible and the methods hide, show and toggle of the HistoryContext have been removed. Visibility state of plugins is now part of the PluginContext using the visiblePlugin property. The visibility state can be altered using the setVisiblePlugin method of the PluginContext.
  • The isVisible prop of the ExplorerContextProvider has been removed. For controlling the visibility state of plugins you can now use the visiblePlugin prop of the PluginContextProvider.
  • The onToggle prop of the HistoryContextProvider and the onToggleVisibility prop of the ExplorerContextProvider have been removed. For listening on visibility changes for any plugin you can now use the onTogglePluginVisibility prop of the PluginContextProvider.

• #2523 11c2778b Thanks @thomasheyenbrock! - BREAKING: The ResponseTooltip prop of the ResponseEditor has been renamed to responseTooltip

Patch Changes

• Updated dependencies [d1805200, 01cd313b, 41236709]:
  • [email protected]
  • @graphiql/[email protected]

@graphiql/[email protected]

Minor Changes

• #2523 01cd313b Thanks @thomasheyenbrock! - BREAKING: Don't pass shouldPersistHeaders anymore when invoking the fetcher function. This value can be looked up by consuming the EditorContext:

  import { useEditorContext } from '@graphiql/react';
  
  function MyComponent() {
    const { shouldPersistHeaders } = useEditorContext();
    // Do things...
  }

• #2523 41236709 Thanks @thomasheyenbrock! - Add a clear method to Storage classes

[github-actions]

The latest changes of this PR are not available as canary, since there are no linked changesets for this PR.