Version Packages #3909

acao · 2025-05-03T09:30:39Z

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

#3904 d1395f9 Thanks @dimaMachina! - drop commonjs build files
#3904 d1395f9 Thanks @dimaMachina! - show tabs even there is only 1 tab

#3904 d1395f9 Thanks @dimaMachina! - remove default export

Migration

Before

import GraphiQL from 'graphiql';

After

import { GraphiQL } from 'graphiql';

#3904 d1395f9 Thanks @dimaMachina! - - support react 19, drop support react 16 and react 17
- replace deprecated ReactDOM.unmountComponentAtNode() and ReactDOM.render() with root.unmount() and createRoot(container).render()
- update @radix-ui and @headlessui/react dependencies
#3904 d1395f9 Thanks @dimaMachina! - remove disableTabs option
#3904 d1395f9 Thanks @dimaMachina! - remove data-testid="graphiql-container"

#3904 d1395f9 Thanks @dimaMachina! - changed exports

-graphiql/graphiql.css
+graphiql/style.css

changed cdn paths, dist/index.umd.js and dist/style.css are minified

-https://unpkg.com/graphiql/graphiql.js
-https://unpkg.com/graphiql/graphiql.min.js
+https://unpkg.com/graphiql/dist/index.umd.js
-https://unpkg.com/graphiql/graphiql.css
-https://unpkg.com/graphiql/graphiql.min.css
+https://unpkg.com/graphiql/dist/style.css

#3904 d1395f9 Thanks @dimaMachina! - - new looks of tabs
- fix disableTabs when Add tab button is still shown

#3904 d1395f9 Thanks @dimaMachina! - Remove toolbar.additionalContent and toolbar.additionalComponent props in favor of GraphiQL.Toolbar render props.

Migration from `toolbar.additionalContent`

Before

<GraphiQL toolbar={{ additionalContent: <button>My button</button> }} />

After

<GraphiQL>
  <GraphiQL.Toolbar>
    {({ merge, prettify, copy }) => (
      <>
        {prettify}
        {merge}
        {copy}
        <button>My button</button>
      </>
    )}
  </GraphiQL.Toolbar>
</GraphiQL>

Migration from `toolbar.additionalComponent`

Before

<GraphiQL
  toolbar={{
    additionalComponent: function MyComponentWithAccessToContext() {
      return <button>My button</button>;
    },
  }}
/>

After

<GraphiQL>
  <GraphiQL.Toolbar>
    {({ merge, prettify, copy }) => (
      <>
        {prettify}
        {merge}
        {copy}
        <MyComponentWithAccessToContext />
      </>
    )}
  </GraphiQL.Toolbar>
</GraphiQL>

Additionally, you can sort default toolbar buttons in different order or remove unneeded buttons for you:

<GraphiQL>
  <GraphiQL.Toolbar>
    {({ prettify, copy }) => (
      <>
        {copy /* Copy button will be first instead of default last */}
        {/* Merge button is removed from toolbar */}
        {prettify}
      </>
    )}
  </GraphiQL.Toolbar>
</GraphiQL>

Minor Changes

#3904 d1395f9 Thanks @dimaMachina! - Add support for onPrettifyQuery callback to enable customised query formatting
#3904 d1395f9 Thanks @dimaMachina! - Update GraphiQL CDN example using ESM-based CDN esm.sh
#3904 d1395f9 Thanks @dimaMachina! - update vite and related dependencies
#3904 d1395f9 Thanks @dimaMachina! - remove .graphiql-session class

Patch Changes

#3904 d1395f9 Thanks @dimaMachina! - update graphql to 16.9.0 and use vite define configuration to remove development code from cdn bundle
#3904 d1395f9 Thanks @dimaMachina! - Respect Markdown format: ignore single newline
#3904 d1395f9 Thanks @dimaMachina! - use position: absolute for .graphiql-logo class
#3904 d1395f9 Thanks @dimaMachina! - replace overflow-y: scroll with overflow-y: auto
#3904 d1395f9 Thanks @dimaMachina! - rollback position: absolute style for .graphiql-logo because tabs will behind logo
#3904 d1395f9 Thanks @dimaMachina! - - prefer location over window.location
- prefer navigator over window.navigator
#3904 d1395f9 Thanks @dimaMachina! - use right: var(--px-16) instead of right: 0 for .graphiql-logo
#3904 d1395f9 Thanks @dimaMachina! - replace Tooltips in tabs with html title="..." attribute
Updated dependencies [d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9]:
- @graphiql/[email protected]

@graphiql/[email protected]

Major Changes

#3904 d1395f9 Thanks @dimaMachina! - style.css import was changed

Migration

-import '@graphiql/plugin-code-exporter/dist/style.css';
+import '@graphiql/plugin-code-exporter/style.css';

#3904 d1395f9 Thanks @dimaMachina! - drop commonjs build files
#3904 d1395f9 Thanks @dimaMachina! - - support react 19, drop support react 16 and react 17
- replace deprecated ReactDOM.unmountComponentAtNode() and ReactDOM.render() with root.unmount() and createRoot(container).render()
- update @radix-ui and @headlessui/react dependencies

Minor Changes

#3904 d1395f9 Thanks @dimaMachina! - Update GraphiQL CDN example using ESM-based CDN esm.sh
#3904 d1395f9 Thanks @dimaMachina! - generate types with vite-plugin-dts
#3904 d1395f9 Thanks @dimaMachina! - update vite and related dependencies

Patch Changes

#3904 d1395f9 Thanks @dimaMachina! - fix types incorrect types entry
#3904 d1395f9 Thanks @dimaMachina! - use vite build --watch instead of vite for dev script because we don't need development server for them

do not use vite-plugin-dts when generating umd build
Updated dependencies [d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9]:
- @graphiql/[email protected]

@graphiql/[email protected]

Major Changes

#3904 d1395f9 Thanks @dimaMachina! - drop commonjs build files
#3904 d1395f9 Thanks @dimaMachina! - - support react 19, drop support react 16 and react 17
- replace deprecated ReactDOM.unmountComponentAtNode() and ReactDOM.render() with root.unmount() and createRoot(container).render()
- update @radix-ui and @headlessui/react dependencies

#3904 d1395f9 Thanks @dimaMachina! - style.css import was changed

Migration

-import '@graphiql/plugin-explorer/dist/style.css';
+import '@graphiql/plugin-explorer/style.css';

Minor Changes

#3904 d1395f9 Thanks @dimaMachina! - Update GraphiQL CDN example using ESM-based CDN esm.sh
#3904 d1395f9 Thanks @dimaMachina! - generate types with vite-plugin-dts
#3904 d1395f9 Thanks @dimaMachina! - update vite and related dependencies

Patch Changes

#3904 d1395f9 Thanks @dimaMachina! - improve explorer styles
#3904 d1395f9 Thanks @dimaMachina! - fix types incorrect types entry
#3904 d1395f9 Thanks @dimaMachina! - use vite build --watch instead of vite for dev script because we don't need development server for them

do not use vite-plugin-dts when generating umd build
Updated dependencies [d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9, d1395f9]:
- @graphiql/[email protected]

@graphiql/[email protected]

Minor Changes

#3904 d1395f9 Thanks @dimaMachina! - Add support for onPrettifyQuery callback to enable customised query formatting
#3904 d1395f9 Thanks @dimaMachina! - Update GraphiQL CDN example using ESM-based CDN esm.sh
#3904 d1395f9 Thanks @dimaMachina! - drop commonjs build files
#3904 d1395f9 Thanks @dimaMachina! - generate types with vite-plugin-dts
#3904 d1395f9 Thanks @dimaMachina! - - support react 19, drop support react 16 and react 17
- replace deprecated ReactDOM.unmountComponentAtNode() and ReactDOM.render() with root.unmount() and createRoot(container).render()
- update @radix-ui and @headlessui/react dependencies

#3904 d1395f9 Thanks @dimaMachina! - style.css import was changed

Migration

-import '@graphiql/react/dist/style.css';
+import '@graphiql/react/style.css';

#3904 d1395f9 Thanks @dimaMachina! - update vite and related dependencies
#3904 d1395f9 Thanks @dimaMachina! - remove createComponentGroup utility in favour Object.assign
#3904 d1395f9 Thanks @dimaMachina! - - new looks of tabs
- fix disableTabs when Add tab button is still shown

Patch Changes

#3904 d1395f9 Thanks @dimaMachina! - Respect Markdown format: ignore single newline
#3904 d1395f9 Thanks @dimaMachina! - use vite build --watch instead of vite for dev script because we don't need development server for them

do not use vite-plugin-dts when generating umd build
#3904 d1395f9 Thanks @dimaMachina! - replace overflow-y: scroll with overflow-y: auto
#3904 d1395f9 Thanks @dimaMachina! - rollback position: absolute style for .graphiql-logo because tabs will behind logo
#3904 d1395f9 Thanks @dimaMachina! - - prefer location over window.location
- prefer navigator over window.navigator

github-actions · 2025-05-03T09:35:54Z

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

Version Packages

33a4463

dimaMachina merged commit 50b6836 into main May 3, 2025
2 checks passed

dimaMachina deleted the changeset-release/main branch May 3, 2025 09:31

abdavid mentioned this pull request May 3, 2025

GraphiQL v2 playground broken. async-graphql/async-graphql#1703

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Version Packages #3909

Version Packages #3909

Uh oh!

acao commented May 3, 2025

Uh oh!

Uh oh!

github-actions bot commented May 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Version Packages #3909

Version Packages #3909

Uh oh!

Conversation

acao commented May 3, 2025

Releases

[email protected]

Major Changes

Migration

Before

After

Migration from toolbar.additionalContent

Before

After

Migration from toolbar.additionalComponent

Before

After

Minor Changes

Patch Changes

@graphiql/[email protected]

Major Changes

Migration

Minor Changes

Patch Changes

@graphiql/[email protected]

Major Changes

Migration

Minor Changes

Patch Changes

@graphiql/[email protected]

Minor Changes

Migration

Patch Changes

Uh oh!

Uh oh!

github-actions bot commented May 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Migration from `toolbar.additionalContent`

Migration from `toolbar.additionalComponent`