graphiql

Patch Changes

• Updated dependencies [bfa90f24, 8ab5fcd0]:
  • @graphiql/[email protected]

Patch Changes

• #2745 92a17490 Thanks @acao! - Specify MIT license for @graphiql/plugin-explorer package.json

• #2731 3e8f0d1f Thanks @hasparus! - Expose typings for graphiql-explorer

• #2738 33bef178 Thanks @thomasheyenbrock! - Fix peer dependency versions

• #2747 52d0003f Thanks @thomasheyenbrock! - Make @graphiql/react a real dependency instead of a peer dependency

• Updated dependencies [98e14155, 7dfea94a, 3aa1f39f, 0219eef3]:

  • @graphiql/[email protected]

Patch Changes

• #2745 92a17490 Thanks @acao! - Specify MIT license for @graphiql/plugin-explorer package.json

• #2741 0219eef3 Thanks @thomasheyenbrock! - Improved sizing of button for adding tabs

• #2746 6f0fa98e Thanks @thomasheyenbrock! - Fix CodeMirror editors overlapping other parts of the UI on certain browser-OS-combinations (e.g. Chrome on Windows)

• Updated dependencies [98e14155, 48872a87, 7dfea94a, 3aa1f39f, 0219eef3]:

  • @graphiql/[email protected]
  • @graphiql/[email protected]

Patch Changes

• #2737 48872a87 Thanks @thomasheyenbrock! - Handle execution when there is no document AST (because the query editor is empty or the query string contains syntax errors)

Minor Changes

• #2739 98e14155 Thanks @thomasheyenbrock! - Add DocsFilledIcon component and use show that icon in the sidebar when the docs plugin is visible

Patch Changes

• #2740 7dfea94a Thanks @thomasheyenbrock! - Make SVG icon stroke-width consistent

• #2734 3aa1f39f Thanks @thomasheyenbrock! - Stop propagating keyboard events too far upwards in the search component for the docs

• #2741 0219eef3 Thanks @thomasheyenbrock! - Add hover styles for buttons

• Updated dependencies [48872a87]:

  • @graphiql/[email protected]

Minor Changes

• #2724 dd5db3b2 Thanks @thomasheyenbrock! - Add a package that exports a plugin to use the GraphiQL Explorer from OneGraph

Patch Changes

• #2706 ff20a381 Thanks @mxstbr! - Wrap the GraphiQL logo with a link to the repository

• #2715 c922719e Thanks @thomasheyenbrock! - Add the contents of graphql and @graphiql/react as static properties to the GraphiQL component in CDN bundles so that these modules can be reused from plugin CDN bundles.

Patch Changes

• Updated dependencies [d65f00ea, f15ee38d, d65f00ea]:
  • @graphiql/[email protected]

Patch Changes

• #2712 d65f00ea Thanks @thomasheyenbrock! - Make sure the back link and title are hidden when focussing the input field for searching the docs

• #2708 f15ee38d Thanks @thomasheyenbrock! - Fix computing the initial state for editor values and tabs to avoid duplicating tabs on page reload

• #2712 d65f00ea Thanks @thomasheyenbrock! - Make sure hidden editors don't overflow

Patch Changes

• #2699 3b642aa3 Thanks @patrick91! - Export hooks in CDN bundle

• #2700 3acacf5b Thanks @patrick91! - Fix cannot access initialHeaders before initialization

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

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]

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

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]

Patch Changes

• #2678 b3470b99 Thanks @thomasheyenbrock! - Add the attribute type="button" to all buttons

Patch Changes

• Updated dependencies [721425b3]:
  • [email protected]

Patch Changes

• #2664 721425b3 Thanks @acao! - This reverts the bugfix for .graphqlrc.ts users, which broke the extension for schema url users

Patch Changes

• #2660 34d31fbc Thanks @acao! - bump ts-node to 10.x, so that TypeScript based configs (i.e. .graphqlrc.ts) will continue to work. It also bumps to the latest patch releases of graphql-config fixed several issues with TypeScript loading (v4.3.2, v4.3.3). We tested manually, but please open a bug if you encounter any with schema-as-url configs & schema introspection.

Patch Changes

• #2660 34d31fbc Thanks @acao! - bump ts-node to 10.x, so that TypeScript based configs (i.e. .graphqlrc.ts) will continue to work. It also bumps to the latest patch releases of graphql-config fixed several issues with TypeScript loading (v4.3.2, v4.3.3). We tested manually, but please open a bug if you encounter any with schema-as-url configs & schema introspection.

• Updated dependencies [34d31fbc]:

  • [email protected]

Minor Changes

• #2651 85d5af25 Thanks @thomasheyenbrock! - BREAKING: The following context properties have been removed as they are only meant for internal use:

  • The subscription property of the ExecutionContext
  • The setSchema method of the SchemaContext
  • The setFetchError method of the SchemaContext

• #2652 6ff0bab9 Thanks @thomasheyenbrock! - BREAKING: The validationErrors property of the SchemaContext is now always non-null. If the schema is valid then it will contain an empty list.

• #2644 0aff68a6 Thanks @thomasheyenbrock! - BREAKING: The ResponseEditor component no longer accepts the prop value. Instead you can now pass the prop response to the EditorContextProvider. This aligns it with the API design of the other editor components.