diff --git a/public/img/blog/graphiql-6/01-workspace-dark.png b/public/img/blog/graphiql-6/01-workspace-dark.png new file mode 100644 index 0000000000..75b0665398 Binary files /dev/null and b/public/img/blog/graphiql-6/01-workspace-dark.png differ diff --git a/public/img/blog/graphiql-6/04-response-tree-dark.png b/public/img/blog/graphiql-6/04-response-tree-dark.png new file mode 100644 index 0000000000..178e180176 Binary files /dev/null and b/public/img/blog/graphiql-6/04-response-tree-dark.png differ diff --git a/public/img/blog/graphiql-6/05-response-table-dark.png b/public/img/blog/graphiql-6/05-response-table-dark.png new file mode 100644 index 0000000000..fdc492061c Binary files /dev/null and b/public/img/blog/graphiql-6/05-response-table-dark.png differ diff --git a/public/img/blog/graphiql-6/09-fragment-extraction-dark.png b/public/img/blog/graphiql-6/09-fragment-extraction-dark.png new file mode 100644 index 0000000000..3658301014 Binary files /dev/null and b/public/img/blog/graphiql-6/09-fragment-extraction-dark.png differ diff --git a/public/img/blog/graphiql-6/10-collection-import-dark.png b/public/img/blog/graphiql-6/10-collection-import-dark.png new file mode 100644 index 0000000000..dc36941b62 Binary files /dev/null and b/public/img/blog/graphiql-6/10-collection-import-dark.png differ diff --git a/public/img/blog/graphiql-6/collections-sharing-poster.jpg b/public/img/blog/graphiql-6/collections-sharing-poster.jpg new file mode 100644 index 0000000000..d553d324ee Binary files /dev/null and b/public/img/blog/graphiql-6/collections-sharing-poster.jpg differ diff --git a/public/img/blog/graphiql-6/query-builder-fragments-poster.jpg b/public/img/blog/graphiql-6/query-builder-fragments-poster.jpg new file mode 100644 index 0000000000..fb03e5d90c Binary files /dev/null and b/public/img/blog/graphiql-6/query-builder-fragments-poster.jpg differ diff --git a/public/videos/graphiql-6/collections-sharing.mp4 b/public/videos/graphiql-6/collections-sharing.mp4 new file mode 100644 index 0000000000..dc157fd68b Binary files /dev/null and b/public/videos/graphiql-6/collections-sharing.mp4 differ diff --git a/public/videos/graphiql-6/collections-sharing.vtt b/public/videos/graphiql-6/collections-sharing.vtt new file mode 100644 index 0000000000..7e6af1aaea --- /dev/null +++ b/public/videos/graphiql-6/collections-sharing.vtt @@ -0,0 +1,10 @@ +WEBVTT + +00:00:00.000 --> 00:00:06.053 +Share a collection as importable JSON. + +00:00:06.053 --> 00:00:17.469 +In another session, import the shared collection. + +00:00:17.469 --> 00:00:25.400 +Open an imported operation and run it. diff --git a/public/videos/graphiql-6/query-builder-fragments.mp4 b/public/videos/graphiql-6/query-builder-fragments.mp4 new file mode 100644 index 0000000000..2053e13a7f Binary files /dev/null and b/public/videos/graphiql-6/query-builder-fragments.mp4 differ diff --git a/public/videos/graphiql-6/query-builder-fragments.vtt b/public/videos/graphiql-6/query-builder-fragments.vtt new file mode 100644 index 0000000000..4c22f02409 --- /dev/null +++ b/public/videos/graphiql-6/query-builder-fragments.vtt @@ -0,0 +1,10 @@ +WEBVTT + +00:00:00.000 --> 00:00:06.361 +Add fields in the query builder. + +00:00:06.361 --> 00:00:15.226 +Extract the selected fields into a reusable fragment. + +00:00:15.226 --> 00:00:23.400 +Keep editing the fragment through the builder. diff --git a/src/pages/blog/2026-11-01-introducing-graphiql-6.mdx b/src/pages/blog/2026-11-01-introducing-graphiql-6.mdx new file mode 100644 index 0000000000..6713ffa8ae --- /dev/null +++ b/src/pages/blog/2026-11-01-introducing-graphiql-6.mdx @@ -0,0 +1,116 @@ +--- +title: Introducing GraphiQL 6 +tags: [announcements, grants] +date: 2026-11-01 +byline: Trevor Scheer +--- + +> This work was funded through the [GraphQL Community Grant program](https://graphql.org/community/foundation/community-grant/). I'm grateful to the GraphQL Foundation and Technical Steering Committee for supporting this work and helping me bring these improvements to GraphiQL. +> +> Special thanks to [Martin Bonnin](https://github.com/martinbonnin) and [Benjie Gillam](https://github.com/benjie) for their help with the grant process, and to [Dimitri Postolov](https://github.com/dimaMachina) for all his help throughout the project. +> +> If you have an idea for improving a GraphQL Foundation project, consider applying! The program supports code, documentation, and community contributions. + +GraphiQL 6 brings a completely redesigned workspace, along with new tools for building operations and saving operations. The changes reach from the editor and navigation to the smaller details, including tabs, menus, and dialogs. + +The biggest additions are a built-in query builder, operation collections, and Tree and Table response views. + +## Get started with GraphiQL 6 + +Try the [GraphiQL demo](https://graphiql-test.netlify.app/), or install `graphiql@6` in your React application. The [setup documentation](https://github.com/graphql/graphiql/tree/graphiql%406.0.0/packages/graphiql#usage) covers connecting GraphiQL to your API. + +If you're upgrading an existing integration, start with the [migration guide](https://github.com/graphql/graphiql/blob/graphiql%406.0.0/docs/migration/graphiql-6.0.0.md). For the full list of changes, see the [GitHub release notes](https://github.com/graphql/graphiql/releases/tag/graphiql%406.0.0) and [GraphiQL changelog](https://github.com/graphql/graphiql/blob/graphiql%406.0.0/packages/graphiql/CHANGELOG.md#600). + +
+ GraphiQL in dark theme, with a country query, variables, and JSON response. +
The GraphiQL 6 workspace.
+
+ +## A more modern look + +GraphiQL 6 gives the familiar workspace a more modern look, taking cues from the IDEs we use every day. Refreshed colors, spacing, and controls carry through the app. + +We've also improved accessibility, with clearer keyboard focus indicators, better-labeled controls, and more readable text in the refreshed styles. Automated accessibility checks now run alongside our other tests, helping us catch common problems and guard against regressions as GraphiQL evolves. + +Let's walk through the new workspace using a few country queries, from choosing fields to sharing saved operations. + +## Build an operation from the schema + +The query builder lets you select fields from your schema and see the operation take shape in the editor. You can move between the builder and the text editor as you work, with the builder reflecting the operation you're editing. + +The clip below shows how you can add fields, extract them into a reusable fragment, and keep editing through the builder. + +
+ +
Select fields, extract them into a named fragment, and keep editing through the query builder.
+
+ +[View the resulting fragment and response as a still image](/img/blog/graphiql-6/09-fragment-extraction-dark.png). + +The builder also provides argument inputs, supports promoting scalar arguments to variables, and offers type selections for fields that return interfaces or unions. + +## Saving and sharing operations + +Collections allow you to organize, manage, and share your operations in your workspace. Save an operation with **Save operation** or the keyboard shortcut (⌘S on macOS, Ctrl+S on Windows and Linux), choose a collection, and give it a name. For example, a “Customer support” collection could hold queries for looking up a customer, checking recent orders, and investigating a failed payment. + +Opening a saved operation opens it in a new tab or returns to its existing tab. You can edit and run it, then save your changes back to the same collection item. History remains useful for returning to recent work while collections let you choose which operations to keep and organize for repeated use. + +Collections also support sharing. **Share** copies importable JSON for an operation or a whole collection to your clipboard. Once you send that JSON to someone, they can paste it into their Collections panel or use the import dialog to bring it into their workspace. + +
+ +
Share a collection as JSON, then import it and run a saved operation.
+
+ +[View the collection import dialog as a still image](/img/blog/graphiql-6/10-collection-import-dark.png). + +Importing also accounts for operations you already have. When an incoming operation differs from your saved copy, you can apply the incoming changes, keep your versions, or review the conflicts individually. Re-importing the same unchanged collection doesn't create duplicate operations, and merging keeps operations that aren't part of the import. + +Collections save in your browser by default, but organizations embedding GraphiQL can provide their own storage backend. Teams can connect collections to internal services and build shared libraries of operations into their existing tools. + +With the default browser storage, sharing transfers the JSON you copied; subsequent edits need to be shared and imported again. That makes it useful for passing along a set of examples while leaving each recipient in control of their saved copies. + +## Response pane updates + +The response pane now offers **JSON**, **Tree**, and **Table** views. You can switch between them for the same result, depending on what you're trying to inspect. + +**JSON** shows the response in the editor. It's useful when you want to read the complete structure, examine field names and values, or copy the response. + +**Tree** lets you expand individual objects and arrays, keeping the branches you're interested in open while collapsing the rest. + +**Table** presents list-shaped results as rows and columns. For the country example, that means comparing codes, capitals, and currencies across several countries without following each object through the JSON. Nested objects and arrays appear as short summaries, and you can switch back to Tree or JSON to inspect their contents. GraphiQL remembers your selected response view across reloads. + +
+
+ A Tree response with country and language data expanded and other entries collapsed. +
Expand the parts of a response you want to inspect.
+
+
+ The same five countries in Table view, with code, capital, currency, language, and name columns. +
Compare list results in Table view.
+
+
+ +## A new transport API + +The new `transport` API sends GraphQL operations to your server and returns HTTP details alongside the result. It's the recommended replacement for the older `fetcher` prop, which still works for existing integrations. + +When provided by the transport, GraphiQL shows the HTTP method, status, elapsed time, and response size of the most recent request in the response header. These details give you more context when inspecting a result, especially when the server returns an error response. + +By default, `createTransport` discovers which HTTP methods your server supports and prefers `QUERY` for queries, followed by `POST` and `GET`. If discovery is unavailable, it falls back to `POST`. Mutations continue to use `POST`. + +## Help shape what’s next + +Take GraphiQL 6 for a spin with your own API, and let us know what works and what could be better. [Bug reports and feature requests](https://github.com/graphql/graphiql/issues) are welcome. I'm actively maintaining and improving GraphiQL, and your feedback helps shape what comes next. + +Thanks for reading and for being part of the GraphQL community. + +[Trevor Scheer (@trevor-scheer)](https://github.com/trevor-scheer)