[v2] cleanup GraphiQL component (#2632)

* remove deprecated class methods

* remove utilities

* remove ref forwarding

* refactor inner class component to a function component

* merge main component with context consumer component

* remove component statics

* refactor outer component to be a class component

* remove comments

* add changeset

* remove legacy exports

Author: thomasheyenbrock

.changeset/real-waves-enjoy.md

@@ -3,6 +3,12 @@
 ---
 
 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.

.changeset/red-zoos-divide.md

@@ -5,7 +5,21 @@
 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`

.changeset/rude-houses-kiss.md

@@ -0,0 +1,5 @@
+---
+'graphiql': major
+---
+
+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.