Merge branch 'main' into graphiql-5

Author: dimaMachina

docs/migration/graphiql-5.0.0.md

@@ -0,0 +1,15 @@
+# Upgrading `graphiql` from `4.x` to `5.0.0-rc`
+
+---
+
+## `graphiql`
+
+- Migration from Codemirror to
+  [Monaco Editor](https://github.com/microsoft/monaco-editor)
+  - Replacing `codemirror-graphql` with
+    [`monaco-graphql`](https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql)
+  - Clicking on a reference in the query editor now works by holding `Cmd` on macOS or `Ctrl` on Windows/Linux
+- Support for comments in **Variables** and **Headers** editors
+- Added new examples: [**GraphiQL x Vite**](https://github.com/graphql/graphiql/tree/graphiql-5/examples/graphiql-vite) and [**GraphiQL x
+  Next.js**](https://github.com/graphql/graphiql/tree/graphiql-5/examples/graphiql-nextjs)
+- Removed examples: **GraphiQL x Parcel** and **GraphiQL x Create React App**

examples/graphiql-webpack/package.json

@@ -36,7 +36,7 @@
     "style-loader": "^3.3.1",
     "webpack": "5.94.0",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^4.11.1",
+    "webpack-dev-server": "^5.2.1",
     "webpack-manifest-plugin": "^5.0.0",
     "workbox-webpack-plugin": "^7.0.0",
     "worker-loader": "^2.0.0"

examples/graphiql-webpack/src/index.jsx

@@ -1,28 +1,27 @@
 import 'regenerator-runtime/runtime.js';
-import * as React from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
 import { GraphiQL } from 'graphiql';
 import { explorerPlugin } from '@graphiql/plugin-explorer';
 import { getSnippets } from './snippets';
 import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
-import 'graphiql/setup-workers/webpack';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { useStorage } from '@graphiql/react';
+import { serverSelectPlugin, LAST_URL_KEY } from './select-server-plugin';
+import 'graphiql/setup-workers/webpack';
+import './index.css';
 
 export const STARTING_URL = 'https://countries.trevorblades.com';
 
-import './index.css';
-import { serverSelectPlugin, LAST_URL_KEY } from './select-server-plugin';
-
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', () => {
     navigator.serviceWorker
       .register('/service-worker.js')
       .then(registration => {
-        console.log('SW registered: ', registration);
+        console.log('SW registered:', registration);
       })
       .catch(registrationError => {
-        console.log('SW registration failed: ', registrationError);
+        console.error('SW registration failed:', registrationError);
       });
   });
 }
@@ -56,24 +55,21 @@ const style = { height: '100vh' };
  */
 const explorer = explorerPlugin();
 
-const App = () => {
-  // TODO: `storage` will be always `null`, fix it to have access outside `StorageContextProvider` after zustand migration
-  const storage = useStorage();
-  const lastUrl = storage?.get(LAST_URL_KEY);
-  const [currentUrl, setUrl] = React.useState(lastUrl ?? STARTING_URL);
+function App() {
+  const [currentUrl, setUrl] = useState('');
   // TODO: a breaking change where we make URL an internal state concern, and then expose hooks
   // so that you can handle/set URL state internally from a plugin
   // fetcher could then pass a dynamic URL config object to the fetcher internally
-  const exporter = React.useMemo(
+  const exporter = useMemo(
     () =>
       codeExporterPlugin({ snippets: getSnippets({ serverUrl: currentUrl }) }),
     [currentUrl],
   );
-  const fetcher = React.useMemo(
+  const fetcher = useMemo(
     () => createGraphiQLFetcher({ url: currentUrl }),
     [currentUrl],
   );
-  const serverSelect = React.useMemo(
+  const serverSelect = useMemo(
     () => serverSelectPlugin({ url: currentUrl, setUrl }),
     [currentUrl],
   );
@@ -84,9 +80,26 @@ const App = () => {
       plugins={[serverSelect, explorer, exporter]}
       fetcher={fetcher}
       shouldPersistHeaders
-    />
+    >
+      <GraphiQLStorageBound setUrl={setUrl} />
+    </GraphiQL>
   );
-};
+}
+
+/**
+ * `useStorage` is a context hook that's only available within the `<GraphiQL>`
+ * provider tree. `<GraphiQLStorageBound>` must be rendered as a child of `<GraphiQL>`.
+ */
+function GraphiQLStorageBound({ setUrl }) {
+  const storage = useStorage();
+  const lastUrl = storage.get(LAST_URL_KEY) ?? STARTING_URL;
+
+  useEffect(() => {
+    setUrl(lastUrl);
+  }, [lastUrl, setUrl]);
+
+  return null;
+}
 
 const root = createRoot(document.getElementById('root'));
 root.render(<App />);

examples/monaco-graphql-webpack/package.json

@@ -39,6 +39,6 @@
     "webpack": "5.76.0",
     "webpack-bundle-analyzer": "^3.6.1",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^5.2.1"
   }
 }

packages/graphiql/CHANGELOG.md

@@ -49,6 +49,12 @@
   - @graphiql/plugin-history@0.3.0-rc.0
   - @graphiql/react@0.35.0-rc.0
 
+## 4.1.2
+
+### Patch Changes
+
+- [#3993](https://github.com/graphql/graphiql/pull/3993) [`70d2216`](https://github.com/graphql/graphiql/commit/70d22164d67b925f3342800161a2b568997bd689) Thanks [@dimaMachina](https://github.com/dimaMachina)! - fix `TypeError: Cannot read properties of null (reading 'get')` and update graphiql webpack example to show how to use `useStorage` hook with `GraphiQL` component
+
 ## 4.1.1
 
 ### Patch Changes

packages/graphiql/src/GraphiQL.tsx

@@ -300,6 +300,7 @@ const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
     logo?: ReactNode;
     toolbar?: ReactNode;
     footer?: ReactNode;
+    children: ReactNode[];
   }>(
     (acc, curr) => {
       switch (getChildComponentType(curr)) {
@@ -312,12 +313,15 @@ const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
         case GraphiQL.Footer:
           acc.footer = curr;
           break;
+        default:
+          acc.children.push(curr);
       }
       return acc;
     },
     {
       logo: <GraphiQL.Logo />,
       toolbar: <GraphiQL.Toolbar />,
+      children: [],
     },
   );