fix TypeError: Cannot read properties of null (reading 'get') and update graphiql webpack example to show how to use useStorage hook with GraphiQL component (#3993)

* upd

* upd

Author: dimaMachina

.changeset/stale-rice-camp.md

@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+fix `TypeError: Cannot read properties of null (reading 'get')` and update graphiql webpack example to show how to use `useStorage` hook with `GraphiQL` component

examples/graphiql-webpack/src/constants.js

@@ -1,3 +1,8 @@
+@import 'graphiql/style.css';
+@import '@graphiql/plugin-explorer/style.css';
+@import '@graphiql/plugin-code-exporter/style.css';
+@import './select-server-plugin.css';
+
 body {
   padding: 0;
   margin: 0;

examples/graphiql-webpack/src/index.css

@@ -1,31 +1,26 @@
 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/style.css';
-import '@graphiql/plugin-explorer/style.css';
-import '@graphiql/plugin-code-exporter/style.css';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { useStorage } from '@graphiql/react';
-
-export const STARTING_URL =
-  'https://swapi-graphql.netlify.app/.netlify/functions/index';
-
-import './index.css';
 import { serverSelectPlugin, LAST_URL_KEY } from './select-server-plugin';
+import './index.css';
+
+export const STARTING_URL = 'https://countries.trevorblades.com';
 
 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);
       });
   });
 }
@@ -59,24 +54,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],
   );
@@ -87,9 +79,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/graphiql-webpack/src/index.jsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-
-import './select-server-plugin.css';
 import { useStorage, useSchemaStore } from '@graphiql/react';
 
 export const LAST_URL_KEY = 'lastURL';

examples/graphiql-webpack/src/select-server-plugin.jsx

@@ -316,10 +316,13 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = props => {
     'success' | 'error' | null
   >(null);
 
-  const { logo, toolbar, footer } = Children.toArray(props.children).reduce<{
+  const { logo, toolbar, footer, children } = Children.toArray(
+    props.children,
+  ).reduce<{
     logo?: ReactNode;
     toolbar?: ReactNode;
     footer?: ReactNode;
+    children: ReactNode[];
   }>(
     (acc, curr) => {
       switch (getChildComponentType(curr)) {
@@ -336,6 +339,8 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = props => {
         case GraphiQL.Footer:
           acc.footer = curr;
           break;
+        default:
+          acc.children.push(curr);
       }
       return acc;
     },
@@ -348,6 +353,7 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = props => {
           onPrettifyQuery={props.onPrettifyQuery}
         />
       ),
+      children: [],
     },
   );
 
@@ -823,6 +829,7 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = props => {
           </div>
         </Dialog>
       </div>
+      {children}
     </Tooltip.Provider>
   );
 };