Skip to content

graphiql-5.0.0.md

Latest commit

 

History

History
226 lines (174 loc) · 7.16 KB

graphiql-5.0.0.md

File metadata and controls

226 lines (174 loc) · 7.16 KB

Upgrading graphiql from 4.x to 5.0.0

Starting from GraphiQL 5, you need to set up Monaco workers in your project:

  • For Vite projects you must:

    1. Install vite-plugin-monaco-editor package:
    npm install vite-plugin-monaco-editor --save-dev
    1. Import and configure the plugin in your vite.config.mjs file:
    // vite.config.mjs
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+import $monacoEditorPlugin from 'vite-plugin-monaco-editor'

+const monacoEditorPlugin = $monacoEditorPlugin.default ?? $monacoEditorPlugin

export default defineConfig({
  plugins: [
    react(),
+   monacoEditorPlugin({
+     languageWorkers: ['editorWorkerService', 'json'],
+     customWorkers: [
+       {
+         label: 'graphql',
+         entry: 'monaco-graphql/esm/graphql.worker.js'
+       }
+     ]
+   })
  ]
})

Note

See Vite example.

  • For Webpack (and Turbopack) projects such as Next.js you must import:

    import 'graphiql/setup-workers/webpack';

Note

See Next.js example.

  • For ESM-based CDN usages, you must use ?worker query to load the module as a web worker:

    import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker';
import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker';
import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker';

globalThis.MonacoEnvironment = {
  getWorker(_workerId, label) {
    switch (label) {
      case 'json':
        return createJSONWorker();
      case 'graphql':
        return createGraphQLWorker();
    }
    return createEditorWorker();
  },
};

Note

See CDN example.

Allow to Override All Default GraphiQL Plugins

Starting from GraphiQL 5, you can override all default plugins.

Removing All Default Plugins

To remove all default plugins (currently Doc Explorer and History), set referencePlugin={null} and pass an empty array to the plugins prop:

import { GraphiQL } from 'graphiql';

const myPlugins = [];

function App() {
  return (
    <GraphiQL
      referencePlugin={null} // Removes Doc Explorer plugin
      plugins={myPlugins} // Removes History plugin
    />
  );
}

Note

If you're using a custom Doc Explorer, pass it to the referencePlugin prop — not the plugins array. It will be automatically included and always rendered first.

Adding Plugins While Keeping Defaults

If you're adding custom plugins (e.g., the Explorer plugin) and want to keep the History plugin, you must explicitly include it in the plugins array:

import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
import { explorerPlugin } from '@graphiql/plugin-explorer';

const myPlugins = [HISTORY_PLUGIN, explorerPlugin()];

function App() {
  return <GraphiQL plugins={myPlugins} />;
}

graphiql

Warning

⚠️ UMD build is removed. Switch to the ESM CDN example.

Note

If you used query, variables and headers in integration tests, you can use the new initialQuery, initialVariables and initialHeaders props instead. These props will only be used for the first tab. When opening more tabs, the operation editor will start out empty.

  • Added new props
    • initialQuery
    • initialVariables
    • initialHeaders
  • feat: allow children: ReactNode for <GraphiQL.Toolbar /> component

@graphiql/react

Important

Clicking on a reference in the operation editor now works by holding Cmd on macOS or Ctrl on Windows/Linux.

  • usePrettifyEditors, useCopyQuery, useMergeQuery, useExecutionContext, usePluginContext, useSchemaContext, useStorageContext hooks are deprecated.
  • Add new useGraphiQL and useGraphiQLActions hooks instead. See updated README for more details about them.
  • remove useSynchronizeValue hook
  • fix defaultQuery with empty string does not result in an empty default query
  • fix defaultQuery, when is set will only be used for the first tab. When opening more tabs, the operation editor will start out empty
  • fix execute query shortcut in operation editor, run it even there are no operations in the operation editor
  • fix plugin store, save last opened plugin in storage
  • remove onClickReference from variable editor
  • fix shortcut text per OS for default query and in run query in execute query button's tooltip

The ToolbarMenu component has changed.

  • The label and className props were removed

  • The button prop should now be a button element

    <ToolbarMenu
  label="Options"
  button={
    <ToolbarButton label="Options">
      <SettingsIcon className="graphiql-toolbar-icon" aria-hidden="true" />
    </ToolbarButton>
  }
>
  <ToolbarMenu.Item onSelect={() => console.log('Clicked!')}>
    Test
  </ToolbarMenu.Item>
</ToolbarMenu>

@graphiql/plugin-code-exporter

Warning

⚠️ UMD build is removed. Switch to the ESM CDN example.

@graphiql/plugin-explorer

Warning

⚠️ UMD build is removed. Switch to the ESM CDN example.

@graphiql/plugin-doc-explorer

  • useExplorerContext hook is deprecated. Use new useDocExplorer and useDocExplorerActions hooks instead.
  • The shortcut to focus on the Doc Explorer search input is now Cmd/Ctrl+Alt+K instead of the previous Cmd/Ctrl+K. This was changed because monaco-editor has a built-in Cmd/Ctrl+K command.
  • push a field type on stack too before field
  • fix: show spinner in doc explorer based on isIntrospecting value, and not based on isFetching

@graphiql/plugin-history

  • useHistoryContext hook is deprecated. Use new useHistory and useHistoryActions hooks instead.