GraphiQL 2.0 (#1777)

* feat: GraphiQL 2.0

* chore(dependencies): updated changesets for modified dependencies

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: saihaj

.changeset/@graphql-yoga_graphiql-1777-dependencies.md

@@ -0,0 +1,11 @@
+---
+"@graphql-yoga/graphiql": patch
+---
+
+dependencies updates: 
+
+- Updated dependency [`[email protected]` ↗︎](https://www.npmjs.com/package/graphiql/v/2.0.7) (from `1.8.8`, in `dependencies`)
+- Added dependency [`@graphiql/plugin-explorer@^0.1.4` ↗︎](https://www.npmjs.com/package/@graphiql/plugin-explorer/v/null) (to `dependencies`)
+- Added dependency [`@graphiql/toolkit@^0.8.0` ↗︎](https://www.npmjs.com/package/@graphiql/toolkit/v/null) (to `dependencies`)
+- Removed dependency [`[email protected]` ↗︎](https://www.npmjs.com/package/copy-to-clipboard/v/3.3.2) (from `dependencies`)
+- Removed dependency [`[email protected]` ↗︎](https://www.npmjs.com/package/graphiql-explorer/v/0.9.0) (from `dependencies`)

.changeset/spotty-crews-poke.md

@@ -0,0 +1,5 @@
+---
+'@graphql-yoga/graphiql': major
+---
+
+upgrade to GraphiQL v2

packages/graphiql/package.json

@@ -28,15 +28,15 @@
     "vite": "3.1.3"
   },
   "dependencies": {
+    "@graphiql/plugin-explorer": "^0.1.4",
+    "@graphiql/toolkit": "^0.8.0",
     "@graphql-tools/url-loader": "7.16.2",
-    "copy-to-clipboard": "3.3.2",
-    "graphiql": "1.8.8",
-    "graphiql-explorer": "0.9.0",
+    "graphiql": "2.0.7",
     "graphql": "16.6.0",
+    "json-bigint-patch": "0.0.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "use-url-search-params": "2.5.1",
-    "json-bigint-patch": "0.0.8"
+    "use-url-search-params": "2.5.1"
   },
   "main": "dist/yoga-graphiql.umd.js",
   "module": "dist/yoga-graphiql.es.js",

packages/graphiql/src/YogaGraphiQL.tsx

@@ -1,25 +1,24 @@
-import React, { useMemo } from 'react'
-import copyToClipboard from 'copy-to-clipboard'
+import React, { useMemo, useState } from 'react'
+import { useExplorerPlugin } from '@graphiql/plugin-explorer'
 import {
   GraphiQL,
-  Fetcher,
+  GraphiQLInterface,
   GraphiQLProps,
-  FetcherParams,
-  FetcherOpts,
+  GraphiQLProvider,
 } from 'graphiql'
+import { Fetcher, FetcherParams, FetcherOpts } from '@graphiql/toolkit'
 import {
   LoadFromUrlOptions,
   SubscriptionProtocol,
   UrlLoader,
 } from '@graphql-tools/url-loader'
-import { DocumentNode, GraphQLSchema, Kind, parse } from 'graphql'
-import GraphiQLExplorer from 'graphiql-explorer'
+import { useUrlSearchParams } from 'use-url-search-params'
+import { DocumentNode, Kind, parse } from 'graphql'
 import 'graphiql/graphiql.css'
+import '@graphiql/plugin-explorer/dist/style.css'
 import './styles.css'
-import './dark-mode.css'
-import { YogaLogo } from './YogaLogo'
-import { useUrlSearchParams } from 'use-url-search-params'
 import 'json-bigint-patch'
+import { YogaLogo } from './YogaLogo'
 
 const getOperationWithFragments = (
   document: DocumentNode,
@@ -44,18 +43,14 @@ const getOperationWithFragments = (
 
 export type YogaGraphiQLProps = Omit<
   GraphiQLProps,
-  | 'ref'
   | 'fetcher'
-  | 'headerEditorEnabled'
-  | 'defaultVariableEditorOpen'
-  | 'docExplorerOpen'
+  | 'isHeadersEditorEnabled'
+  | 'defaultEditorToolsVisibility'
   | 'onToggleDocs'
-  | 'tabs'
   | 'toolbar'
   | 'onSchemaChange'
   | 'query'
   | 'onEditQuery'
-  | 'beforeTopBarContent'
 > &
   Partial<Omit<LoadFromUrlOptions, 'headers'>> & {
     title?: string
@@ -67,44 +62,48 @@ export type YogaGraphiQLProps = Omit<
 
 export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
   const initialQuery = /* GraphQL */ `#
-# Welcome to ${props.title || 'Yoga GraphiQL'}
-#
-# ${
+  # Welcome to ${props.title || 'Yoga GraphiQL'}
+  #
+  # ${
     props.title || 'Yoga GraphiQL'
   } is an in-browser tool for writing, validating, and
-# testing GraphQL queries.
-#
-# Type queries into this side of the screen, and you will see intelligent
-# typeaheads aware of the current GraphQL type schema and live syntax and
-# validation errors highlighted within the text.
-#
-# GraphQL queries typically start with a "{" character. Lines that start
-# with a # are ignored.
-#
-# An example GraphQL query might look like:
-#
-#     {
-#       field(arg: "value") {
-#         subField
-#       }
-#     }
-#
-# Keyboard shortcuts:
-#
-#  Prettify Query:  Shift-Ctrl-P (or press the prettify button above)
-#
-#     Merge Query:  Shift-Ctrl-M (or press the merge button above)
-#
-#       Run Query:  Ctrl-Enter (or press the play button above)
-#
-#   Auto Complete:  Ctrl-Space (or just start typing)
-#
-`
+  # testing GraphQL queries.
+  #
+  # Type queries into this side of the screen, and you will see intelligent
+  # typeaheads aware of the current GraphQL type schema and live syntax and
+  # validation errors highlighted within the text.
+  #
+  # GraphQL queries typically start with a "{" character. Lines that start
+  # with a # are ignored.
+  #
+  # An example GraphQL query might look like:
+  #
+  #     {
+  #       field(arg: "value") {
+  #         subField
+  #       }
+  #     }
+  #
+  # Keyboard shortcuts:
+  #
+  #  Prettify Query:  Shift-Ctrl-P (or press the prettify button above)
+  #
+  #     Merge Query:  Shift-Ctrl-M (or press the merge button above)
+  #
+  #       Run Query:  Ctrl-Enter (or press the play button above)
+  #
+  #   Auto Complete:  Ctrl-Space (or just start typing)
+  #
+  `
+
   const endpoint = new URL(
     props.endpoint ?? location.pathname,
     location.href,
   ).toString()
-  const graphiqlRef = React.useRef<GraphiQL | null>(null)
+
+  const type = {
+    query: String,
+  }
 
   const urlLoader = useMemo(() => new UrlLoader(), [])
 
@@ -134,102 +133,35 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
     }
   }, [urlLoader, endpoint])
 
-  const [showExplorer, setShowExplorer] = React.useState(false)
-  const [schema, setSchema] = React.useState<GraphQLSchema | null>(null)
-  const types = {
-    query: String,
-  }
   const [params, setParams] = useUrlSearchParams(
     {
       query: props.defaultQuery || initialQuery,
     },
-    types,
+    type,
     false,
   )
-  const [showDocs, setShowDocs] = React.useState(false)
+
+  const [query, setQuery] = useState(params.query?.toString())
+  const explorerPlugin = useExplorerPlugin({
+    query,
+    onEdit: setQuery,
+  })
 
   return (
     <div className="graphiql-container">
-      {schema && params?.query != null ? (
-        <GraphiQLExplorer
-          schema={schema}
-          query={params.query.toString()}
-          onEdit={(query: string) => {
-            setParams({
-              query,
-            })
-          }}
-          explorerIsOpen={showExplorer}
-          onToggleExplorer={() => setShowExplorer((isOpen) => !isOpen)}
-          colors={{
-            keyword: '#ff6d5d',
-            def: '#9f51d9', // OperationName, FragmentName
-            property: '#0083c7', // FieldName
-            qualifier: '#008aed', // FieldAlias
-            attribute: '#00b8ff', // ArgumentName and ObjectFieldName
-            number: '#97b1aa', // type number
-            string: '#00917d', // type String
-            string2: '#146574', // Enum
-            builtin: '#da8aff', // Boolean
-            variable: '#ff6d5d',
-            atom: '#ff9f4c', // Type
-          }}
-        />
-      ) : null}
-      {params?.query != null ? (
-        <GraphiQL
-          ref={graphiqlRef}
-          fetcher={fetcher}
-          headerEditorEnabled={true}
-          defaultVariableEditorOpen={true}
-          docExplorerOpen={showDocs}
-          onToggleDocs={() => setShowDocs((isOpen) => !isOpen)}
-          tabs
-          toolbar={{
-            additionalContent: (
-              <>
-                <button
-                  className="toolbar-button"
-                  onClick={() => {
-                    const state = graphiqlRef.current?.state
-
-                    copyToClipboard(
-                      urlLoader.prepareGETUrl({
-                        baseUrl: window.location.href,
-                        query: state?.query || '',
-                        variables: state?.variables,
-                        operationName: state?.operationName,
-                      }),
-                    )
-                  }}
-                >
-                  Copy Link
-                </button>
-              </>
-            ),
-          }}
-          onSchemaChange={(schema) => {
-            setSchema(schema)
-          }}
-          query={params.query.toString()}
+      <GraphiQLProvider
+        plugins={[explorerPlugin]}
+        query={query}
+        fetcher={fetcher}
+      >
+        <GraphiQLInterface
+          isHeadersEditorEnabled
+          defaultEditorToolsVisibility
           onEditQuery={(query) =>
             setParams({
               query,
             })
           }
-          beforeTopBarContent={
-            schema ? (
-              showExplorer ? null : (
-                <button
-                  className="docExplorerShow docExplorerShowReverse"
-                  onClick={() => setShowExplorer((isOpen) => !isOpen)}
-                >
-                  Explorer
-                </button>
-              )
-            ) : null
-          }
-          {...props}
         >
           <GraphiQL.Logo>
             <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -249,8 +181,8 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
               </span>
             </div>
           </GraphiQL.Logo>
-        </GraphiQL>
-      ) : null}
+        </GraphiQLInterface>
+      </GraphiQLProvider>
     </div>
   )
 }