graphiql

Patch Changes

• #3350 119775ed Thanks @acao! - handle null editor in explorer plugin (PR)

Minor Changes

• #3130 9a38de29 Thanks @lesleydreyer! - - Add a "clear history" button to clear all history as well as trash icons to clear individual history items

  • Change so item is in history items or history favorites, not both
  • Fix history label editing so if the same item is in the list more than once it edits the correct label
  • Pass the entire history item in history functions (addToHistory, editLabel, toggleFavorite, etc.) so users building their own HistoryContext.Provider will get any additional props they added to the item in their customized functions
  • Adds a "setActive" callback users can use to customize their UI when the history item is clicked

Patch Changes

• Updated dependencies [9a38de29]:
  • @graphiql/[email protected]

Minor Changes

• #3285 d7f595e3 Thanks @B2o5T! - avoid bundling unnecessary languages — import monaco-graphql/esm/monaco-editor instead of monaco-editor to reduce your bundle size, as that imports only graphql and json languages and leaves out ts, css, html, and much more

Patch Changes

• #3322 6939bac4 Thanks @acao! - Bypass babel typescript parsing errors to continue extracting graphql strings

Patch Changes

• #3322 6939bac4 Thanks @acao! - Bypass babel typescript parsing errors to continue extracting graphql strings

• Updated dependencies [6939bac4]:

  • [email protected]

Minor Changes

• #3330 bed5fc86 Thanks @acao! - BREAKING CHANGE: fix lifecycle issue in plugin-explorer, change implementation pattern

  value and setValue is no longer an implementation detail, and are handled internally by plugins. the plugin signature has changed slightly as well.

  now, instead of something like this:

  import { useExplorerPlugin } from '@graphiql/plugin-explorer';
  import { snippets } from './snippets';
  import { useExporterPlugin } from '@graphiql/plugin-code-exporter';
  
  const App = () => {
    const [query, setQuery] = React.useState('');
    const explorerPlugin = useExplorerPlugin({
      query,
      onEdit: setQuery,
    });
    const codeExporterPlugin = useExporterPlugin({
      query,
      snippets,
    });
  
    const plugins = React.useMemo(
      () => [explorerPlugin, codeExporterPlugin],
      [explorerPlugin, codeExporterPlugin],
    );
  
    return (
      <GraphiQL
        query={query}
        onEditQuery={setQuery}
        plugins={plugins}
        fetcher={fetcher}
      />
    );
  };
  

  you can just do this:

  import { explorerPlugin } from '@graphiql/plugin-explorer';
  import { snippets } from './snippets';
  import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
  import { createGraphiQLFetcher } from '@graphiql/toolkit';
  
  // only invoke these inside the component lifecycle
  // if there are dynamic values, and then use useMemo() (see below)
  const explorer = explorerPlugin();
  const exporter = codeExporterPlugin({ snippets });
  
  const fetcher = createGraphiQLFetcher({ url: '/graphql' });
  
  const App = () => {
    return <GraphiQL plugins={[explorer, exporter]} fetcher={fetcher} />;
  };
  

  or this, for more complex state-driven needs:

  import { useMemo } from 'react';
  import { explorerPlugin } from '@graphiql/plugin-explorer';
  import { snippets } from './snippets';
  import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
  
  const explorer = explorerPlugin();
  const fetcher = createGraphiQLFetcher({ url: '/graphql' });
  
  const App = () => {
    const { snippets } = useMyUserSuppliedState();
    const exporter = useMemo(
      () => codeExporterPlugin({ snippets }),
      [snippets],
    );
  
    return <GraphiQL plugins={[explorer, exporter]} fetcher={fetcher} />;
  };
  

Minor Changes

• #3330 bed5fc86 Thanks @acao! - BREAKING CHANGE: fix lifecycle issue in plugin-explorer, change implementation pattern

  value and setValue is no longer an implementation detail, and are handled internally by plugins. the plugin signature has changed slightly as well.

  now, instead of something like this:

  import { useExplorerPlugin } from '@graphiql/plugin-explorer';
  import { snippets } from './snippets';
  import { useExporterPlugin } from '@graphiql/plugin-code-exporter';
  
  const App = () => {
    const [query, setQuery] = React.useState('');
    const explorerPlugin = useExplorerPlugin({
      query,
      onEdit: setQuery,
    });
    const codeExporterPlugin = useExporterPlugin({
      query,
      snippets,
    });
  
    const plugins = React.useMemo(
      () => [explorerPlugin, codeExporterPlugin],
      [explorerPlugin, codeExporterPlugin],
    );
  
    return (
      <GraphiQL
        query={query}
        onEditQuery={setQuery}
        plugins={plugins}
        fetcher={fetcher}
      />
    );
  };
  

  you can just do this:

  import { explorerPlugin } from '@graphiql/plugin-explorer';
  import { snippets } from './snippets';
  import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
  import { createGraphiQLFetcher } from '@graphiql/toolkit';
  
  // only invoke these inside the component lifecycle
  // if there are dynamic values, and then use useMemo() (see below)
  const explorer = explorerPlugin();
  const exporter = codeExporterPlugin({ snippets });
  
  const fetcher = createGraphiQLFetcher({ url: '/graphql' });
  
  const App = () => {
    return <GraphiQL plugins={[explorer, exporter]} fetcher={fetcher} />;
  };
  

  or this, for more complex state-driven needs:

  import { useMemo } from 'react';
  import { explorerPlugin } from '@graphiql/plugin-explorer';
  import { snippets } from './snippets';
  import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
  
  const explorer = explorerPlugin();
  const fetcher = createGraphiQLFetcher({ url: '/graphql' });
  
  const App = () => {
    const { snippets } = useMyUserSuppliedState();
    const exporter = useMemo(
      () => codeExporterPlugin({ snippets }),
      [snippets],
    );
  
    return <GraphiQL plugins={[explorer, exporter]} fetcher={fetcher} />;
  };
  

Minor Changes

• #3293 1b8f3fe9 Thanks @B2o5T! - BREAKING CHANGE: umd build was renamed to index.umd.js

Patch Changes

• #3319 2f51b1a5 Thanks @LekoArts! - Use named Explorer import from graphiql-explorer to fix an issue where the bundler didn't correctly choose either the default or Explorer import. This change should ensure that @graphiql/plugin-explorer works correctly without graphiql-explorer being bundled.

Minor Changes

• #3293 1b8f3fe9 Thanks @B2o5T! - BREAKING CHANGE: umd build was renamed to index.umd.js

Patch Changes

• #3292 f86e4172 Thanks @B2o5T! - fix umd build names graphiql-plugin-code-exporter.umd.js and graphiql-plugin-explorer.umd.js

Patch Changes

• #3292 f86e4172 Thanks @B2o5T! - fix umd build names graphiql-plugin-code-exporter.umd.js and graphiql-plugin-explorer.umd.js

Patch Changes

• #3224 5971d528 Thanks @acao! - try removing some packages from pre.json

• #3216 55135804 Thanks @simowe! - fix: reload schema when a change to the schema file is detected

• Updated dependencies [5971d528, d9e5089f]:

  • [email protected]

Patch Changes

• Updated dependencies [5971d528, d9e5089f]:
  • [email protected]

Patch Changes

• #3224 5971d528 Thanks @acao! - try removing some packages from pre.json

• Updated dependencies [5971d528, d9e5089f, 55135804]:

  • [email protected]
  • [email protected]

Minor Changes

• #3181 9ac84bfc Thanks @B2o5T! - remove initialTabs, use defaultTabs instead

• #3181 9ac84bfc Thanks @B2o5T! - replace @reach/dialog by @radix-ui/react-dialog replace @reach/visually-hidden by @radix-ui/react-visually-hidden

• #3181 9ac84bfc Thanks @B2o5T! - replace @reach/menu-button by @radix-ui/react-dropdown-menu remove @reach/listbox remove <ToolbarListbox /> and <Listbox /> components (use <Menu /> instead)

• #3181 9ac84bfc Thanks @B2o5T! - fixed long list items in dropdown were hidden

  rename <Menu /> to <DropdownMenu /> rename <Menu.List /> to <DropdownMenu.Content /> rename <Menu.Item /> to <DropdownMenu.Item /> rename <Menu.Button /> to <DropdownMenu.Button />

• #3181 9ac84bfc Thanks @B2o5T! - replace @reach/tooltip by @radix-ui/react-tooltip

• #3181 9ac84bfc Thanks @B2o5T! - replace @reach/combobox with Combobox from @headlessui/react

• #3181 9ac84bfc Thanks @B2o5T! - tabs could be reorderded

Patch Changes

• #2716 bc9d243d Thanks @SimenB! - Make @types/codemirror a dependency of @graphiql/react

• #3228 67bf93a3 Thanks @B2o5T! - exclude peer dependencies and dependencies from bundle

• Updated dependencies [5971d528, d9e5089f, 61986469]:

  • [email protected]
  • [email protected]

Patch Changes

• #3224 5971d528 Thanks @acao! - try removing some packages from pre.json

• #3149 d9e5089f Thanks @mskelton! - Fix hover docs being off by one position.

Patch Changes

• #3229 0a65e720 Thanks @B2o5T! - exclude peer dependencies and dependencies from bundle

• #3251 f8d8509b Thanks @B2o5T! - always bundle package.json#dependencies for UMD build for @graphiql/plugin-code-exporter and @graphiql/plugin-explorer

• #3236 64da8c30 Thanks @B2o5T! - update vite

• #3252 c915a4ee Thanks @B2o5T! - @graphiql/react should be in peerDependencies not in dependencies

• Updated dependencies [9ac84bfc, 9ac84bfc, 9ac84bfc, 9ac84bfc, bc9d243d, 9ac84bfc, 9ac84bfc, 9ac84bfc, 67bf93a3]:

  • @graphiql/[email protected]

Major Changes

• #3181 9ac84bfc Thanks @B2o5T! - remove initialTabs, use defaultTabs instead

Patch Changes

• #3235 5d062809 Thanks @B2o5T! - remove unnecessary <div /> wrappers

• Updated dependencies [9ac84bfc, 9ac84bfc, 9ac84bfc, 5971d528, 9ac84bfc, d9e5089f, bc9d243d, 9ac84bfc, 9ac84bfc, 9ac84bfc, 67bf93a3]:

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

Patch Changes

• #3229 0a65e720 Thanks @B2o5T! - exclude peer dependencies and dependencies from bundle

• #3251 f8d8509b Thanks @B2o5T! - always bundle package.json#dependencies for UMD build for @graphiql/plugin-code-exporter and @graphiql/plugin-explorer

• #3236 64da8c30 Thanks @B2o5T! - update vite