feat: add support for @graphiql/plugin-explorer (#18)

package.json

@@ -57,6 +57,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
+    "@graphiql/plugin-explorer": "^0.1.12",
     "@graphiql/toolkit": "^0.8.0",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",

src/client/App.tsx

@@ -1,12 +1,20 @@
 import { GraphiQL } from 'graphiql'
 import { useEffect, useMemo, useState } from 'react'
 import { createGraphiQLFetcher } from '@graphiql/toolkit'
+import { useExplorerPlugin } from '@graphiql/plugin-explorer'
 import { fetchClientConfig } from './utils/fetchClientConfig'
 import type { ClientOptions } from '../types'
+
 import 'graphiql/graphiql.css'
+import '@graphiql/plugin-explorer/dist/style.css'
+
+const DEFAULT_QUERY = ''
 
 export default function App() {
   const [config, setConfig] = useState<ClientOptions | null>(null)
+  const [query, setQuery] = useState(DEFAULT_QUERY)
+
+  const explorerPlugin = useExplorerPlugin({ query, onEdit: setQuery })
 
   useEffect(() => {
     fetchClientConfig().then((config) => {
@@ -26,5 +34,12 @@ export default function App() {
     return null
   }
 
-  return <GraphiQL fetcher={fetcher} />
+  return (
+    <GraphiQL
+      fetcher={fetcher}
+      query={query}
+      onEditQuery={setQuery}
+      plugins={[explorerPlugin]}
+    />
+  )
 }